Skip to main content

How To Add the Size Chart and/or Size Recommender into Collapsible/Accordion Tabs?

  • Updated

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

  1. Access the product you want to edit in Shopify.

  2. Under the product description, click on the HTML Editor button to open the HTML view of your product description.

  3. 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:

  • 0 for inline display
  • 1 for modal link display
  • 2 for 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!

Related articles