Integration with other Shopify Apps · Kiwi Sizing Developer Docs

NOTE: this guide is ONLY for Shopify shops.

If you are a Shopify app that renders certain layout on product pages (i.e. Tabs, quick views) and want to integrate with Kiwi Sizing so size charts show up within you app's dynamic content, this guide will show you show.

Loading size chart for the product page

You can use our ks global object to inject size chart within your content. You would need to pass in a HTML element for the app to inject into. By default, our app inserts a liquid snippet on to each client shop such that window.KiwiSizing holds the necessary data from the product to load fetch our size charts.

// after your content is injected
const elementToInject = document.getElementById('kiwi-sizing-placeholder');

window.ks.loadSizing({
  productData: window.KiwiSizing.data,
  options: {
    el: elementToInject,
    displayMode: 0, // display size chart inline
  },
  loaded: function(success) {
    // if success == True, means there are size charts successfully loaded for the given product data.

    // This flag is useful to remove the placeholder content (i.e. tabs) in the event when there's no size charts loaded
  },
});

Loading size chart for dynamic product data

If you are a quick view app where you want to load size charts dynamically for products that isn't the current product page, you may pass in Product Data Options for the app to load different size charts given your needs.

// after your content is injected
const elementToInject = document.getElementById('kiwi-sizing-placeholder');
const newProductData = {
  tags: '...',
  type: '...',
  product: '...',
  vendor: '...',
  collections: '...',
};

window.ks.loadSizing({
  productData: newProductData,
  options: {
    el: elementToInject,
    displayMode: 0, // display size chart inline
  },
  loaded: function(success) {
    // ...
  },
});