Size chart – User Guides

Learn how to add a handy size chart to your store.

What is a size chart?

A size chart provides a quick and easy way for customers to see which product size will best suit their needs before purchasing an item. This can help reduce the number of returns and increase your customers' loyalty and confidence in your brand.

Images are for illustrative purposes. The exact layout may vary by theme.

How to create a page to store your size chart information

Steps

Open the Shopify admin area and navigate to Online store > Pages > Add page.
Create a page with a title such as "Size chart".
Add the size chart information directly in to the page Content area. An image can be the simplest solution for display on all screen sizes.
Ensure the Page is set to Visible and click Save.

Note

We strongly advise creating size charts using images rather than tables for the best results. Using an image will ensure no formatting issues occur on devices with smaller screens.

How to activate your size chart

Steps

Open the Theme Editor, select Products from the dropdown at the top and choose the template e.g. Default product.
Select the Variant picker block.
In the Size chart settings, check the Enable size chart setting.
Click Select page and choose the page which contains your size chart.
Within Option name, enter the variant option title which indicates the size of the product. The size chart will appear alongside this option once set up.
The size guide link should now be displayed next to the variant option. Click the link text to open your size chart.

How to set up unique size charts for products using metafields

By creating a page reference product metafield, it's possible to setup unique size charts for products. Learn more about creating metafields in Shopify's metafield guide.

Steps

Open the Shopify admin and go to Settings > Custom data.
Click on Products to create a new product metafield for your Size Chart page link. The metafield should be a Product metafield of type Page Reference.
In the Shopify admin, go to Products, edit a product and scroll down to find the newly created page reference metafield. Select a page that contains the size chart for that product and Save.
Open the Theme Editor, and select Products from the template dropdown at the top and choose your desired product template.
Select the Variant picker block
In the Size chart settings, check the Enable size chart setting.
Within Option name, enter the variant option title or label (e.g. Size, Dimensions). Once all the steps are complete a link to the size chart page will be shown next to this variant option selector.
Next to Page containing the size chart select the Connect dynamic source icon.
Ensure the dropdown Current template: Product is selected to show the list of available product metafields.
Select the size chart page from the list of metafields for the product template.

Note

The Bulk Editor is a helpful tool to quickly update metafields and other attributes across all your products.

FAQs

Can I link size charts to different variant options?

Each product template is linked to one variant option name in the size chart settings of the variant picker block. If it is necessary to link to a different variant option name for some products, then an alternative product template should be used. The product page and size chart settings are specific to each product template. Create alternative product templates and assign them to your products for different combinations of settings and layouts.

Can I change the name 'Size guide' on the product page?

This can be achieved by accessing your theme’s Language Editor. In the search bar at the top of the editor, you can search the default text by typing Size Guide. Type in your desired text, save your changes, refresh the page, and your storefront should reflect your newly added custom text.

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!