Each chart in Kiwi Sizing can be configured to display three types of display settings, each with its own impact on user experience. However, it's essential to consider that long layouts might not always be ideal, as not all customers are willing to scroll down the modal.

These layout display settings can be configured only on the size chart level, meaning you'll need to set these settings for each sizing chart you have.

How to Access Display Settings

Go to the Kiwi app dashboard and click on "Edit" next to your desired size chart.
Click on "More actions" at the top, then select "Advanced Settings." A pop-up menu will appear from the right side of the screen.
Scroll down to find the "Size Chart Setup" section:

Display Both Layout and Recommender

This is the default setting, where both the layout and recommender will be visible in the modal.

Size chart modal on a product page with Size Chart Calculator and Size Chart tabs above the table

Display Only Recommender:

This setting will show only the recommender in the modal.

Size chart modal showing only the recommender with Bröst, Axelbredd, Midjebredd fields

Display Only layout:

This setting displays only the size chart layout. It will also show all elements of the layout you added above or below the sizing table, following the exact order you set. This includes tabs, accordions, pictures, videos, etc. You can also incorporate the recommender within the layout using the recommender layout block.

Size chart layout blocks: table, text, video, recommender, with Add layout block button

Best Practices for Layout

We recommend placing the most important elements at the top of the modal, whether it's the sizing table, recommender, or a video demonstrating how to take measurements correctly. The choice ultimately depends on your specific needs!

Using Code Snippets for Layouts

You can also combine these layouts with code snippets for more advanced configurations:

data-layout-type

0 is display both,
1 is display recommender only,
2 is display layout only

For example, if you deploy the following snippet:

<!-- START KiwiSizing code !-->

<div id="KiwiSizingChart"

 data-layout-type="0"

 data-display-mode="0"

 data-recommender-display-mode="0">

</div>

<!-- END KiwiSizing code !-->

This will load both the inline size chart and the inline sizing recommender, making it an excellent choice for collapsible tabs and accordions.

If you have any further questions or need assistance, feel free to reach out to us!

Understanding Size Chart Layout and Display Settings in the Kiwi App