How to Display the Kiwi Size Chart in the Featured Product Section on the Homepage

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.liquid file. 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=311">

</script>

Next, navigate to the featured-product.liquid file.

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.liquid and featured-product.liquid files.

For more information on the snippet, see this guide: Can I use code snippets instead of injection selectors?

Can I make size chart load faster?

Can I Use Code Snippets Instead of Injection Selectors?

How to Manually Install Kiwi Code on Unpublished Themes?

[Advanced] Dynamically passing product name from Shopify to sizing chart link/button text

Understanding Size Chart Layout and Display Settings in the Kiwi App