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. 

According to a study by the Baymard Institute, 35.3% of online shoppers have abandoned a purchase because of a lack of size information.

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

You can create multiple Size Charts and display them on specific products, collections, or all product pages.

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

Select how you want to create your size chart: 

• From Image - by uploading an image size chart; 
• From Scratch - create a size chart table from scratch;
• From Template - create a size chart table starting from a template.

Currently, you can only create a Size Chart from an image; the other two options will be released in the next couple of months (April - May 2023).

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

2. In the Size Chart page, 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. Upload the image size chart by clicking in the Upload Image area. Supported file formats are .png, .webp, .jpeg, .jpg, and .gif.

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, keep the option enabled. If you want to display only the image, uncheck 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 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). 

Important note: If you want to place the Size Chart button right above or below the Add to cart button, use Vitals Editor, as you cannot do this from the Shopify Editor.