To embed Kiwi Size Chart & Recommender into a collapsible or accordion tab on your product page, you can use the following code snippets. These snippets allow you to display either the size chart, the recommender, or both, depending on your needs.
How to Embed the Size Chart in a Tab
Access the product you want to edit in Shopify.
Under the product description, click on the HTML Editor button to open the HTML view of your product description.
After the line that contains
<div id="KiwiSizingChart"></div>, paste the following snippet to embed the size chart in inline display mode:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-display-mode="0">
</div>
<!-- END KiwiSizing code !-->
When the tab is opened, the size chart will appear in inline display mode.
How to Embed Both Size Chart and Recommender
To display both the size chart and recommender within the tab, use this updated snippet:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-display-mode="0"
data-recommender-display-mode=”0”>
</div>
<!-- END KiwiSizing code !-->
This snippet will show both the size chart and the recommender, and they will appear in the order specified in the code.
How to Embed Only the Recommender
If you wish to display just the recommender, insert this snippet:
<!-- START KiwiSizing code !-->
<div id="KiwiSizingChart"
data-recommender-display-mode=”0”>
</div>
<!-- END KiwiSizing code !-->
Display Modes Available:
0for inline display1for modal link display2for button display
Example Output on the Product Page
Use these snippets based on your preference for how the size chart and recommender should be displayed. Once the code is deployed within the tab's body, the size chart and/or recommender will be dynamically loaded when the tab is opened.
Feel free to experiment with different display modes to find the setup that best suits your store!