This article will help you install Kiwi Sizing on your Opencart store. 


Note that currently the integration would require making manual changes to the Opencart theme code and you would need access to your Opencart 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:

Opencart product attributesKiwi Sizing product matching condition
Product IDProduct ID
Product Name
Product Name
TagsProduct Tags
SKUProduct SKU
BrandProduct Brand

First Login and access the admin section of your OpenCart store.


1. Integrate the Javascript snippet

We need to Integrate the Javascript snippet in product.twig  file in your theme that will load Kiwi Sizing's JS library asynchronously and also pass in the relevant product data attributes. Navigate To : 

<OPENCART_ROOT>\catalog\view\theme\<YOUR_THEME>\template\product\product.twig 

NOTE: If you are using DEFAULT Opencart theme then path would be: <OPENCART_ROOT>\catalog\view\theme\default\template\product\product.twig 


Open the product.twig file with your editor and add the following snippet at the bottom before {{ footer }}


<!-- KiwiSizing v1.0.0 Integration !-->
    <script type="text/javascript"><!--
    $(document).ready(function() {
		  !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 !-->

<script type="text/javascript"><!--
  {% if customer_id %}
  ks.setUserID('{{ customer_id|e("js") }}');
  ks.setUserEmail('{{ customer_email|e("js") }}');
  {% endif %}
//--></script>

<script type="text/javascript"><!--
$(document).ready(function () {
ks.setShopID("REPLACE_ME_KIWI_SIZING_SHOP_ID ");
ks.loadSizing({
  productData: {
  productID:'{{ product_id|e("js") }}',
  title:'{{ heading_title|e("js") }}',
  images:[
        '{{ thumb|e("js") }}',
          {% for image in images %}
        '{{ image.popup|e("js") }}',
          {% endfor %}
          ],
  tags:[
      {% for i in 0..tags|length %}
       '{{ tags[i].tag|e("js") }}',
      {% endfor %}
  ],
  model:'{{ model|e("js") }}',
  brand:'{{ manufacturer|e("js") }}',
 });		
});	
//--></script>

Make sure to update "REPLACE_ME_KIWI_SIZING_SHOP_ID" with the shop ID of your account.


2. Replace the code in product.php controller


Navigate To :

<OPENCART_ROOT>\ catalog\controller\product\product.php


1 – Find the code below in product.php

if ($this->customer->isLogged()) {
    $data['customer_name'] = $this->customer->getFirstName() . '' . $this->customer->getLastName();
} else {
    $data['customer_name'] = '';
}


2 - Replace the above code with the code provided below

if ($this->customer->isLogged()) {
    $data['customer_name'] = $this->customer->getFirstName() . '&nbsp;' . $this->customer->getLastName();
    $data['customer_id'] = $this->customer->getId();
    $data['customer_email'] = $this->customer->getEmail();
} else {
    $data['customer_name'] = '';
    $data['customer_id'] = '';
    $data['customer_email'] = '';
}



3. (optional) Add Kiwi Sizing Injection Selector at desired location of product.twig page

In product.twig file add the following HTML snippet where you want to see the Size-Chart Icon. 

<div class="kiwi-sizing-placeholder"></div>


Note: You can place it before <div id="product"> in product.twig file.

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".