To showcase the Kiwi size chart in your featured product section, follow these steps to add the necessary script to your theme:
Open your code editor and locate the
theme.liquidfile. Insert the following snippet right before the</head>tag:<script type="text/javascript"
defer src="https://app.kiwisizing.com/web/js/dist/kiwiSizing/plugin/SizingPlugin.prod.js?v=318">
</script>Next, navigate to the
featured-product.liquidfile.
In the liquid file, find the location where you want the size chart to display. Insert the following code:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-collections="{{ product.collections | map: 'id' | join: ','}}" data-tags="{{ product.tags | join: ',' | escape}}"
data-product="{{product.id}}"
data-vendor="{{product.vendor | escape}}"
data-product-name="{{product.title}}"
data-product-images="{{product.images | json| escape}}"
data-type="{{product.type | escape}}">
</div>
<!-- END KiwiSizing code !-->Ensure you save the changes in both the
theme.liquidandfeatured-product.liquidfiles.
For more information on the snippet, see this guide: Can I use code snippets instead of injection selectors?