Size chart

Display a size chart inside a collapsible block or as a popup on the size option

A size chart is an essential feature for stores selling apparel or any products where customers need to choose the correct size. It helps reduce uncertainty, improves the shopping experience, and can significantly lower return rates.

In Shoshin, there are currently two ways to display a size chart (table or image). You can use either method or enable both for maximum visibility.

Method 1: Size chart inside a Collapse block

The first approach is to display the size chart within a Collapse block on the product page.

1. Add a Collapse block to your Product Main section.

2. Configure the usual collapse settings (see the Collapse documentation for details).

3. Select a page that contains your size chart content. This page will be used as the source for the size chart table or image.

This method works well when you want the size chart to appear as part of the product page content.

Method 2: Size chart pop-up on the Size option

The second approach displays a Size chart link directly next to the size option selector. This method has an additional advantage: the size chart button will only appear for products that actually have a size option.

To enable this:

1. Open the Options block in your Product Main section.

2. Locate the Size guide settings group.

3. Configure the following options:

   • Size guide – option name – Used to identify the size option. This value must match the option name exactly (for example, Size). Leave it empty to hide the size guide link.

   • Size guide – page – Select the page that contains your size chart. The content will be displayed in a modal pop-up.

Creating the size guide page

To create the page that contains your size chart:

1. From your Shopify admin, go to Online Store → Pages.

2. Create a new page.

3. Add your size chart content to the page. This can be a table, an image, or a combination of both.

4. Save the page and select it in the relevant size guide settings.

Below is the code that we have on our demo page.

<div class="table-responsive">
  <table class="table">
    <caption>Some optional information here for the size chart&nbsp;</caption>
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">Bust</th>
        <th scope="col">Waist</th>
        <th scope="col">Hip</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">S</th>
        <td>34" - 35"</td>
        <td>27" - 28"</td>
        <td>37" - 38"</td>
      </tr>
      <tr>
        <th scope="row">M</th>
        <td>36" - 37"</td>
        <td>29" - 30"</td>
        <td>39" - 40"</td>
      </tr>
      <tr>
        <th scope="row">L</th>
        <td>38" - 39"</td>
        <td>31" - 32"</td>
        <td>41" - 42"</td>
      </tr>
    </tbody>
  </table>
</div>

It shows the following page.

	Bust	Waist	Hip
S	34" - 35"	27" - 28"	37" - 38"
M	36" - 37"	29" - 30"	39" - 40"
L	38" - 39"	31" - 32"	41" - 42"

Different size charts per product

At the moment, there is no built-in way to assign different size charts to specific products. Support for this use case is planned for a future update.

If your store requires different size guides depending on the product, please contact us and we’ll help you find the most suitable workaround until this feature is released.