Setting up the Size Chart app

Why do we need a Size Chart?

Displaying a Size Chart on product pages can help you boost conversion and reduce return rates. 

With accurate size information available on the product page, customers are:

• Less likely to purchase the wrong size, which will result in fewer returns. 
• More likely to make a purchase as they can be confident that the product will fit them well.

So don’t wait up. Enable the Size Chart App and optimize your product pages for higher conversion.

How to create a Size Chart

1. Create a new size chart by clicking the Create Size Chart button.

2. Visibility: Select which product pages to show the size chart. You can display it on all product pages or specific collections or products. 

By default, the size chart will be shown on all product pages. If you want to change this, in the Visibility section, click Select Products to open the selection modal and choose the products that you want. Then click Select Products.

3. Select how you want to create your size chart

• From Image - by uploading an image size chart; 
• Create Table - create a size chart table from scratch;

You can also display a measuring guide near the size chart for any of the options.

Create a Size chart from an image

• Select the From Image option
• Upload the image size chart by clicking in the Add file area. Supported file formats are .png, .webp, .jpeg, .jpg, and .gif. and .jfif.

Create a size chart table

• To create a table from scratch, select the option Create Table. 
• Edit the size chart table using the table editor. You can add columns or rows by right-clicking on the table or by using the editor shortcuts. 
• You can change the style applied globally to all size charts from the Settings tab. Global styles are only visible in the storefront and are not reflected in the table editor.
• You can apply different styles for specific size charts, using advanced features from the table editor. 

Read more about How to create a Size Chart Table

4. Choose if you want to display also a measuring guide near the size chart. Here you can give helpful tips and information for the measuring process. 

If you wish to show the guide, check the option Enable How to Measure Guide.

5. Edit the measuring guide (optional).

If you want to customize the measuring guide, you can edit the information directly in the editor. 

You can change the text and the image shown in the how-to-measure guide. If you want to change the layout, delete the content provided in the editor first.

You can upload your own images in the editor using the Upload Feature. 

You can edit the style of the text using the options provided in the editor.

6. Choose where to display the how-to-measure guide in the Size Chart modal. You can place it below or above the size chart.

7. Publish the Size chart by clicking the Publish button. Make sure you enable the app. 

Now the size chart should be visible on your store’s selected product pages. Don't forget to hard refresh the page to see the Size Chart button.

How are Size Charts Prioritized

Suppose multiple Size Charts target the same products. In that case, the most specific one will have priority over a more general one (e.g., a size chart for a specific product will have priority over a size chart on a collection or all products).

Also, the most recently updated will have priority. So if you have two size charts for the same products, the most recently updated will be displayed on the product page.

How to edit the style of the Size Chart Button

You can edit the style and text of the Size Chart button displayed on the product page.

1. Go to the Settings Tab in the Button Style section. 
2. Choose the icon to display with the Size Chart Button text. If you don’t want any icons, choose the option No icon. 
3. Edit the text of the button if needed. 
4. Choose a color for the button. This setting controls the color of both the text and the icon. 
5. Choose if you want the size chart button text underlined or not. By default, it’s underlined, but you can uncheck this option.

How to edit the Size Chart Table Style

You can change the style of the tables created in the Table Editor.

• Go to Settings Tab
• Go to Table Style section
• Choose one of the layouts available
  • Striped table with horizontal borders (this is the default option)
  • Striped table with vertical borders
  • Simple table

For the striped table, you can choose the striped row background color and the border color. For the simple table, you can change the border color.

For border thickness, you have 3 options:

• Light (0.5px)
• Regular (1px)
• Bold (2px)

Any changes made in this section will only be visible on the storefront and will not be reflected in the size chart table editor. These changes will be applied globally to all created size charts. If you want to style a particular size chart differently, use the advanced option available in the table editor.

How to edit the style of the modal 

1. Go to the Settings Tab in the Modal style section.
2. Choose the background color for the modal.
3. Choose the text color for the modal. Ensure you have enough contrast, so your users can easily read the text.

How to Place the Size Chart Button

The Size Chart button is placed automatically near the Add to cart button on product pages. 

You can change its placement using Vitals editor. You have the option to place the Size Chart button above or below the Add to cart button from there.

If you wish, you can also place it in other locations on the product page using the Vitals Editor or the Shopify Theme Editor (if you have an OS 2.0 compatible theme).