This article will help you install Kiwi Sizing on your 3dcart store.
Note this step will only affect your current theme. If you change theme, you need to repeat this guide again.
Note it is usually a good idea to back up your theme before you make any changes!
Product attributes supported for matching:
| 3d product attributes | Kiwi Sizing product matching condition |
|---|---|
Catalog ID | Product ID |
SKU | Product SKU |
Manufacturer | Product Brand |
Keywords | Product Tags |
1. On the side panel, Click on Settings > Design > Theme & styles
2. Click on "More" and "Edit Template (HTML)"
3. Click Edit for the file "frame.html"
4. Insert code snippet
Insert the following code at the end of the file, right above the </body> tag.
Make sure you replace the REPLACE_ME_KIWI_SIZING_SHOP_ID with your kiwi sizing shop ID. The ID looks something like integrationdemo-a71e-8c00a6ecb926
<script type="text/javascript">
if (window._3d_item || $('meta[property="og:image"]').attr('content') === 'product') {
var shopID = 'REPLACE_ME_KIWI_SIZING_SHOP_ID';
// load Kiwi Sizing Script v1.0.0
!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");
// load size charts
ks.setShopID(shopID);
ks.loadSizing({
productData: {
productID: "[catalogid]",
title: "[name]",
sku: "[id]",
brand: "[manufacturer_name]",
tags: "[keywords]".split(','),
images:["[image1]", "[image2]", "[image3]", "[image4]"].filter(function(x) {return x}),
},
});
}
</script>It will look something like this.
5. Click the "Save" button
That's it! Now you can start creating size charts in Kiwi Sizing and see them on your product pages!
Question: I don't see the size chart!
If you don't see the size charts showing up even though product conditions are set up properly, it is most likely because we couldn't inject into the shop. You will need to update the injection selector in app settings. See this guide for support.