This article will help you install Kiwi Sizing on your PrestaShop store.
Note that currently the integration would require making manual changes to the PrestaShop theme code and you would need access to your PrestaShop server to make those changes. If you are unsure, please consult with your web developer.
Note this step will only affect your current theme. If you change theme, you need to repeat this guide again.
Product attributes supported for matching:
| PrestaShop product attributes | Kiwi Sizing product matching condition |
|---|---|
Product ID | Product ID |
Product Name | Product Name |
First Login and access the admin section of your PrestaShop store.
1. Integrate the Javascript snippet
We need to Integrate the Javascript snippet in product.tpl file in your theme that will load Kiwi Sizing's JS library asynchronously and also pass in the relevant product data attributes.
Navigate To :
<PRESTASHOP_ROOT>\themes\<THEME>\templates\catalog\product.tpl
and add the following snippet in the <footer> at bottom of the product.tpl file:
(Note If you are using DEFAULT PrestaShop theme then path would be:<PRESTASHOP_ROOT>\themes\classic\templates\catalog\product.tpl)
<!-- KiwiSizing v1.0.0 Integration !-->
<script>
{literal}
!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");
{/literal}
</script>
<!-- End KiwiSizing Integration !-->
{if $customer.is_logged}
<script>
ks.setUserID({$customer.id|escape:javascript|replace:"</":"<\/"});
ks.setUserEmail('{$customer.email|escape:javascript|replace:"</":"<\/"}');
</script>
{/if}
<script>
ks.setShopID("REPLACE_ME_KIWI_SIZING_SHOP_ID");
ks.loadSizing({
productData: {
productID:"{$product.id|escape:javascript|replace:"</":"<\/"}",
title:"{$product.name|escape:javascript|replace:"</":"<\/"}",
images:[
{foreach from=$product.images item=image}
"{$image.bySize.home_default.url|escape:javascript|replace:"</":"<\/"}",
{/foreach}
]},
});
</script>Make sure to update "REPLACE_ME_KIWI_SIZING_SHOP_ID" with the shop ID of your account.
3. (optional) Add Kiwi Sizing Injection Selector at desired location of product.tpl page
In product.tpl file add the following HTML snippet where you want to see the size chart Icon.
<div class="kiwi-sizing-placeholder"></div>
Question: I still 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.
A good place to inject size chart in OpenCart is before ID "product".