[Shopify-only] Can I use code snippets instead of injection selectors?

NOTE: this guide is only relevant for those who installed the app through Shopify's app store!

If you are more familiar with adding code snippets to your theme, Kiwi also supports this option. We have designed 2 main ways to do it depending on the need.

1. Adding snippet on product page

Because product pages already have kiwi snippet installed, our app can identify which size chart belongs to this product. You can simply add the following snippet and Kiwi will inject size chart here.

<div id="KiwiSizingChart"></div>

2. Adding snippet with product info (using liquid)

If you are inserting snippet at a place where the product info may not be available. For example, you want to add the snippet on the home page, then you need to add the following snippet with liquid so KiwiSizing knows what the product is and find the relevant size charts.

<!-- 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 !-->

Q. Can I customize the display settings?

By default, the size chart will be displayed according to the settings in the app. In certain situations, you may want to override these settings. For example, you may want a link above the add to cart button but show the size chart inline within the description.

Here are all the options you can pass in to override the settings:

key	Possible values
data-display-mode	0 is inline, 1 is link modal, 2 is button modal
data-link-text	any string
data-modal-header-text	any string
data-modal-sub-header-text	any string
data-layout-type	0 is display both, 1 is display recommender only, 2 is display layout only
data-recommender-display-mode	0 is inline, 1 is link modal, 2 is button modal
data-recommender-has-result-text	any string (use{result} to reference recommended size)
data-recommender-no-result-text	any string
data-recommender-no-input-text	any string

For example, if you want to hardcode the display type. You can pass in `data-display-mode`. 

• 0 is inline
• 1 is link modal
• 2 is button modal

<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
  data-display-mode="0">
</div>
<!-- END KiwiSizing code !-->

If you want to have different modal header text, subtext or even just the link text, you can pass in `data-modal-header-text`, `data-modal-sub-header-text`, and `data-link-text` respectively.

<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
  data-modal-header-text="THIS IS A NEW MODAL HEADER"
  data-modal-sub-header-text="THIS IS A NEW MODAL SUB HEADER"
  data-link-text="THIS IS A NEW LINK TEXST">
</div>
<!-- END KiwiSizing code !-->

Q: Is there a limit of how many snippet I can use per page?

You can put the snippet in as many places as you want in your page, the app will inject size charts to all of them.

Q: My original size chart disappeared after I added a snippet. How do I keep both?

Note that by adding a snippet like this, KiwiSizing will automatically ignore the injection selector and only inject within this snippet container. If you want to keep the regular injection selector and also use a separate snippet to inject the size chart, then add the class `kiwiAllowRegularInjectionSelector` like this

<div id="KiwiSizingChart" class="kiwiAllowRegularInjectionSelector"></div>

This same class can be added to the liquid snippet as well.