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

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

Magento 2 product attributesKiwi Sizing product matching condition
IDProduct ID
SKUProduct SKU
Category namesProduct Categories (IDs)

1. Add new template file kiwisizing.phtml

We need to add a new template file in your theme that will load Kiwi Sizing's JS library asynchronously and also pass in the relevant product data attributes.

Create a file at<MAGENTO_ROOT>/app/design/frontend/<VENDOR>/<THEME>/<Namespace>_<Module>/templates/kiwisizing.phtmlwith the following content:

<?php
// NOTE: Make sure to replace this with your Kiwi Sizing shop ID
$shop_id = "REPLACE_ME_KIWI_SIZING_SHOP_ID";

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');

if ($product) {
  // Insert kiwi sizing integration
  echo '
<!-- 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 !-->';

  $category_ids = [];
  foreach($product->getCategoryIds() as $id) {
   array_push($category_ids, "'".addslashes($id)."'");
  }
  
  $image_gallery = $product->getMediaGalleryImages();
  $images = [];
  foreach($image_gallery as $i) {
    array_push($images, "'".$i['url']."'");
  }

  $customerSession = $objectManager->get('Magento\Customer\Block\Account\AuthorizationLink');
  if ($customerSession->isLoggedIn() == true) {
    echo '
<script>
ks.setUserID("'.$customerSession->getCustomerId().'");
ks.setUserEmail("'.$customerSession->getCustomer()->getEmail().'");
</script>';
  }
  
  echo '
<script>
ks.setShopID("'.$shop_id.'");
ks.loadSizing({
  productData: {
    productID:"'.addslashes($product->getID()).'",
    title:"'.addslashes($product->getName()).'",
    sku:"'.addslashes($product->getSku()).'",
    categories:['.join(",", $category_ids).'],
    images:['.join(",", $images).'],
  },
});
</script>';
}
?>


2. Add new block to theme's default.xml

We need to add a new block in the default.xml layout to add Kiwi Sizing's JS script. Typically, the file should be located at <MAGENTO_ROOT>/app/design/frontend/<VENDOR>/<THEME>/Magento_Theme/layout/default.xml. If you don't have this file yet for your theme, please copy it from <MAGENTO_ROOT>/vendor/magento/module-theme/view/frontend/layout/default.xml

Open the file with your editor and add the following right before the </body> tag.

<referenceContainer name="before.body.end">
  <block class="\Magento\Framework\View\Element\Template" template="<Namespace>_<Module>::kiwisizing.phtml" name="kiwisizing"/>
</referenceContainer>


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.