Kiwi Sizing Help Center

Step 1: enable dev mode for your store (also known as “Wix Velo”)

First login into your Wix dashboard and click “Site Actions > Edit Site” for the site you want to add Kiwi Sizing to:

Wix editor will load. Turn on Dev Mode at the top menu: 

Step 2: find out the ID of your product page

Next we need to find out the ID of your product detail page. Click the first button at the left (“Pages”):

Then switch the “Page” drop-down at top left to “Product Page”:

The center area will refresh and display the product detail page in edit mode. Notice the ID (in black) next to “ProductPage” (in blue). It’s the ID we need:

Step 3: paste JS code on the product detail page and save

While still on the same page as step #2 above, locate the javascript editor area at the bottom:

If your theme isn’t customized and has default/placeholder Javascript code as shown in the screenshot, then simply empty the editor area and replace with the following javascript code. If your theme is customized and there’s some custom code already, then append the following code:

const KIWI_SHOP_ID = 'REPLACE_ME_KIWI_SIZING_SHOP_ID';
const PRODUCT_PAGE_ID = 'REPLACE_ME_PRODUCT_PAGE_ID';

import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(() => {
  $w(PRODUCT_PAGE_ID).getProduct()
    .then((product) => {
      let message = JSON.parse(JSON.stringify(product));
      message.KIWI_SHOP_ID = KIWI_SHOP_ID;
      message.message_type = 'load_ks';
      wixData.queryReferenced("Stores/Products", message._id, "collections").then(x => {
          let categories = [];
          for (var i=0; i < x.items.length; i++) { categories.push(x.items[i].name); }
          message.categories = categories;
          wixWindow.postMessage(message);
      });
    })
    .catch((error) => {console.error(error);});
});

Make sure to replace the REPLACE_ME_KIWI_SIZING_SHOP_ID with your Kiwi Sizing shop ID found in your account area at kiwisizing.com. The ID looks something like shop-ad98-fcb556ca2320. Also, replace REPLACE_ME_PRODUCT_PAGE_ID with the ID found on step 2 (typically #productPage1, but depends on your theme). When done, it should look like this:

Now click Save and Publish at the top right of the page:

By default Wix auto-saves changes so you’ll likely only need to click the 2nd (Publish) button. However if auto-save if disabled, you’ll need to click both “Save” and then “Publish”.

Step 4: paste more JS code in site settings and save

Now go back to Wix dashboard (another window, you may keep the Wix editor window open or close it at this point), and select “Settings” from the left menu:

On the next page, scroll down to the “Advanced” section and click on “Custom code”:

Click “Add Code” next to “Body - End”:

Paste the following code in the code area on the popup:

<!-- 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");

function wixImgUrl(imageSRC) {
  let uo = imageSRC;
  if (uo.startsWith("wix:image://v1/")) {
    uo = uo.replace('wix:image://v1/', '');
    uo = uo.substr(0, uo.indexOf('/'));
    uo = "https://static.wixstatic.com/media/" + uo;
  } else {
    uo = imageSRC;
  }
  return uo;
}
document.addEventListener("DOMContentLoaded", function() {
  if (null !== document.querySelector("[data-hook=product-page]")) {
    window.addEventListener('message', function(e) {
      if (e.data.message_type !== undefined && e.data.message_type == 'load_ks') {
        ks.setShopID(e.data.KIWI_SHOP_ID);
        ks.loadSizing({
          productData: {
            productID: e.data._id,
            sku: e.data.sku,
            title: e.data.name,
            images: [wixImgUrl(e.data.mainMedia)],
            categories: e.data.categories,
            brand: e.data.brand
          }
        });
        ks.on('sizing_loaded', function(data) {
          console.log('Kiwi Sizing chart loaded', data);
        });
      }
    });
  }
});
</script>
<!-- End KiwiSizing Integration !-->

Notice the code text area in Wix is small is cannot be expanded, it’s OK if only see few lines.

On the same popup, change the name field to something meaningful e.g. ‘Kiwi Sizing’.

Leave everything else intact and save changes by clicking “Apply”:

After saving, it should display Kiwi code snippet on the previous page:

Step 5: configure size chart injection type and position in your account at kiwisizing.com

Now log in into your KiwiSizing.com account and click “Styles & Settings” at the left menu. At the section General Settings > Display, use the following values

“Inject before” (or “Inject after”)

“raw css selector”

and for the text input field, copy and paste the following code:

[data-hook="product-options"]

This will display Kiwi link before (or after) product attributes in Wix.

Don’t forget to save settings (top right) when done.

Step 6: test the integration

Open your store and navigate to any product detail page. You should see Kiwi Sizing link or button similar to this:

When clicked, it should display the size chart:

Question: I still don't see the size chart!

If you don’t see the link on Wix front-end:

check browser console for log messages and errors. You should see the following line logged on the console:

Kiwi Sizing chart loaded Object [… ]

If you see the line above, it means your JS integration is correct. If not, double-check steps 3 & 4 above and check the browser console for earlier errors.

if JS integration is correct, but you still don’t see the size chart on Wix storefront, make sure that product ID or SKU is properly mapped in your Kiwi Sizing account.

The matching should be exact (e.g. for the screenshot above, product with SKU = test_product must exist in Wix).