Some users might want to use Kiwi code snippets instead of classic UI injection, especially those who are tech-savvy. The main advantage of snippets is that you can deploy them in multiple places on your product or non-product pages, into collapsible tabs, or anywhere else that makes sense to you. Still, there is a difference between the snippets Kiwi has.
Classic/Ordinary snippet
This snippet is meant to be placed on the product page. It loads the main container, which nests the Size Chart/Button container and/or Recommender Chart/Button container, depending on your configuration or preferences. You can place it anywhere on the page, including the tabs or even other tables already present.
The screenshot above shows the position of the Size Chart container and the area it uses on the page. To load Kiwi on the page, place the following code:
The screenshot above shows the position of the Size Chart container with the area it uses on the page. To load Kiwi on the page, simply place the following code:
<div id="KiwiSizingChart"></div>
This will load the chart container in the specified location on the page code. Furthermore, this snippet can be customized as per the following table:
Attribute | Values |
data-display-mode | 0 is inline, 1 is link modal, 2 is button modal |
data-link-text | any string |
data-modal-header-text | any string |
data-modal-sub-header-text | any string |
data-layout-type | 0 is display both, 1 is display recommender only, 2 is display layout only |
data-recommender-display-mode | 0 is inline, 1 is link modal, 2 is button modal |
data-recommender-has-result-text | any string (use {result} to reference recommended size) |
data-recommender-no-result-text | any string |
data-recommender-no-input-text | any string |
For example, if you need an inline table on the page or a collapsible tab, just paste the following code:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-display-mode="0">
</div>
<!-- END KiwiSizing code !-->
If you wish to deploy the recommender only, you can use:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-recommender-display-mode="0">
</div>
<!-- END KiwiSizing code !-->
This snippet does not have a sizing ID, and you can only use it on product pages that match the particular chart(s). If you have a corresponding chart and recommender with the product page you placed it on, it will load them.
Embedded Snippet
This snippet is meant to be used on non-product pages. For example, if you wish to bring the size chart to dedicated sizing pages, you will use this snippet.
This snippet has a sizing ID, which means you will load the exact chart from which you created the snippet.
To take embedded snippets from the chart, open the Sizing Dashboard and click on the chart you want to bring to the page(s). Inside the editor, above the layout, find the “More actions” menu, click on it, and it will bring up a dropdown list. Click on the “Get embed size chart snippet” option.
A new menu will show up, allowing you to configure the chart display.
You will notice several sections in this menu. The first one is a warning stating that this snippet is not meant to be placed on product pages. Below, you will see the display configuration. In most cases, if you have a dedicated sizing page, you will most likely use an inline display (for the chart, the recommender, or both) that loads the table over the page using the available space.
The screenshot above shows a dedicated size guide page where the Kiwi recommender is loaded with embedded snippets in inline display mode.
If you open the browser console, you will notice an embedded snippet with the sizing ID and calculator (recommender ID) in the background.
You will also see attributes and values that can be configured, as mentioned in the table above.
Summary
Snippets are pieces of Kiwi code used to load size charts and recommenders on your product pages and non-product pages.
Embedded snippets can be used to bring size charts and recommenders to any page of your store.
Ordinary snippets will load all charts that are matched to the product, while embedded snippets will load the exact chart that was taken per your display configuration.
FAQs
Q: Can I still use embedded snippets on the product page?
A: Yes, you can bring embedded snippets onto the product page. However, please note that this is not encouraged unless you really know what you are doing.