Product Page JS Integration · Kiwi Sizing Developer Docs

Here you will find the documentation for setting up Kiwi Sizing script on your product pages. Note that if you installed the Shopify app, the script is automatically set up and you do not need to follow this guide.

Integrating the Javascript snippet

Integrate the script

First thing you need to do is include the following script on your product page. You can add it right after the </body> close tag.

<!-- KiwiSizing v1.0.0 Integration !-->
<script>
!function(t,n,s,e,i){function r(t){try{var s="; "+n.cookie,e=s.split("; "+t+"=");if(2==e.length)return e.pop().split(";").shift()}catch(i){}return null}t[i]=t[i]||{},t[i]._queue=[];const o="on setShopID setUserID setUserEmail setLanguage loadSizing".split(" ");for(var a=0;a<o.length;a++){const c=o[a];t[i][c]=function(){var n=Array.prototype.slice.call(arguments);return n.unshift(c),t[i]._queue.push(n),t[i]}}const l=r("_ks_scriptVersion")||t.ks_version||"";var u=n.createElement(s);n=n.getElementsByTagName(s)[0],u.async=1,void 0!==t.ks_load_async&&(u.async=t.ks_load_async),u.src=e+"?v="+l,u.id="ks-integration",n.parentNode.insertBefore(u,n)}(window,document,"script","https://cdn.static.kiwisizing.com/SizingPlugin.prod.js","ks");
</script>
<!-- End KiwiSizing Integration !-->

Load size charts

After the script is added, a global ks object becomes available on the page. You would need to call a few functions to properly load the size charts and recommenders on the product page.

ks.setShopID("KIWI_SIZING_SHOP_ID");

// if user is logged in
ks.setUserID("USER_ID");

ks.loadSizing({
  productData: PRODUCT_DATA, // (required) see below
  options: LOADING_OPTIONS, // (optional) see below
});

Product data object (required)

Product data is used by the app to check against the product matching conditions of all the size charts in the app to decide which size charts to display on the product page.

Fields marked with * are required

Key	Value type	Example Values
`productID`*	`String`	`"12345"`
`tags`	`Array<String>`	`["t-shirt", "male"]`
`sku`	`String`	`"S12-GET-RS"`
`categories`	`Array<String>`	`["dresses", "wedding"]`
`brand`	`String`	`"Nike"`
`title`*	`String`	`"Modern Skinny-fit Washable Turtleneck Sweater"`
`images`*	`Array<String>`	`["https://example.com/image1.jpg", "https://example.com/image2.jpg"]`

Loading option object (optional)

Passing this object is optional and you likely won't need it. All the loading options here is configurable through the app settings. Any options set here would override the app settings. Generally you only need to override the options if you're doing something special on the product page.

Note that all of these are options you can set in the app's settings. Passing those data in JS will override the app settings values.

Key	Value type	Example Values
`injectionSelector`	`CSS Selector`	`".size-chart-wrapper"` or `"#size-chart-wrapper"`
`displayMode`	`0` for Inline `1` for link modal `2` for button modal	`0`
`injectionOrder`	`0` for inject before `1` for inject after `2` for inject at the beginning of `3` for inject at the end of	`0`
`calculatorDisplayMode`	same as `displayMode`	`0`
`calculatorInjectionOrder`	same as `injectionOrder`	`0`
`modalHeaderText`	`String`	`"Size Chart Header"`
`modalSubHeaderText`	`String`	`"Size Chart Subheader"`
`buttonText`	`String`	`"Size Chart"`
`buttonIcon`	`String`	`"Nike"`

Event listening

It is often useful to listen for events from our app so that you can trigger your own analytics or perform other behaviors on product page.

ks.on("EVENT_NAME", function(data) {
  console.log("Event is triggered", data);
});

Event Name	Description	Callback data
`sizing_loaded`	Triggered when the size chart is finished loading after calling `ks.loadSizing`	`{sizeChartID: 123}`
`modal_open`	Triggered when modal is opened	`{modalID: "modal-id-123"}`
`modal_close`	Triggered when modal is closed	none
`modal_tab_change`	Triggered when modal tab is changed	`{tabID: "size-chart-layout"}` or `{tabID: "recommender"}`
`on_size_recommendation`	Triggered after user uses the recommender	`{status: "has_size", size: "M"}` or `{status: "no_size"}`
`on_add_to_cart`	Triggered when the add-to-cart button from the recommender is triggered. This is important if you want the app to be able to dynamically add the recommended product to cart	`{size: "M"}`

FAQ

Asynchronous script loading

The KiwiSizing script is by default loaded asynchronously, meaning that it will wait for the content on the product page to load first. However, the ks object is immediately available to be called.

If you wish for the script loading to be done synchronously, please do the following before the kiwi script:

window.ks_load_async = 1;

// load kiwi script