Note: The following guide on setting up a size guide on product pages may require you to update your theme to the latest version. Our themes are continuously improved to provide better functionality and performance, so some features discussed here might not be available in older versions. We recommend ensuring your theme is up-to-date to take full advantage of these enhancements. If you need assistance with updating your theme, please refer to our theme update guide or contact our support team.
Introduction
A size guide (or size chart) contains measurement guidance to help customers choose the best-fitting size. This handy tool can give people more confidence to make a purchase and helps reduce potential returns.
Size guides are common in online clothing stores but could be used for any products where size may affect the sale. For example, furniture or sports equipment. They are normally formatted in a table but it's completely up to you how you present your size guide.
You can display a link to a size guide on any product page, which will open up a modal when clicked. This means your customers won't need to navigate off the page to find their measurements.
Example size guide:
Tip: This size guide link is a versatile tool that isn't limited to showing sizes. A link can be displayed next to any variant type and used to communicate additional product information, such as return instructions, color references, terms and conditions, or materials. Utilize this feature in any way that benefits your customers!
In this guide, we'll look at:
- How to add a size guide page to your store
- How to link the size guide page to your product pages
- How to display multiple size guides
1. Adding a size guide page to your store
In order to display a size guide on your product pages, you will first need to create one. This is done by adding a new page to your store and entering the measurements. Here's how:
Step 1: Within your Shopify admin, click Online store then continue to Pages.
Step 2: Click Add page. This will open a new page, where you can enter a title and the sizing information.
Step 3: Enter a Title (e.g. Clothing Size Guide). This will be displayed at the top of the page.
Step 4: Enter the sizing information in the Content area.
Tip: You can create your size guide in the Content area using a few different methods:
- Add the measurements as basic text
- Use the table tool to create an organized size chart (click here for an example)
- Create the table in a different software then paste it into the content area
- Create images for your charts then upload the images into the content area
Step 5: Click Save. Your new page is now live! Next, you will need to add a link to it on your product pages.
To learn more about setting up new Pages, click here to read Shopify's official help guide.
2. Linking your size guide to your product pages
Once you have created your size guide page, you must link it to a product page template. To do this:
Step 1: Within your Theme Editor, go to the Product template you wish to add a size guide to.
Step 2: Click on the Product form section. You will see dedicated options for the Size guide near the top of these settings.
Step 3: Click the Size guide page field. Use the dropdown menus to navigate to the size guide page you created and select it. (Your page will be located in the Pages category.)
Step 4: Enter a Size guide message (e.g. What's my size?). This is the text your customers will click to open the size guide.
Step 5: Most stores will use this feature to display a size guide. If this is your intention, then leave Size written inside the Show on a specific variant option field and Save your changes to finish.
Step 6 (optional): If you wish to use this feature for different purposes - perhaps to provide information for non-clothing products - then you can customize the message and enter a different variant type in the Show on a specific variant option field (e.g. Color, Material, Style, etc.). Doing this will display the link against the variant you entered.
Example of a possible material variant guide:
Now that your size guide is set up, your page will display inside a modal when the link is clicked!
3. Adding multiple size guides
You can easily add multiple size guides, or other reference guides, and display them against different products on your store. There are a couple of methods for achieving this, but the simplest way involves linking pages to different product templates.
Step 1: Follow the above steps to add a new page to your store and enter the size measurements or other product information into the page's Content area.
Example:
Step 2: Create a new product template for the items that will use the new size guide. You can't include products that use an existing size guide.
Example:
To learn more about adding templates, click here to read Shopify's official help guide.
Step 3: Follow the above steps to link the size guide to the template.
Step 4: Add a message and ensure the variant option is correct.
Example:
Step 5: Assign products to the new product template. You can do this by going into each product and scrolling down to Theme template.
The final result - you will have tailored size/information guides on different product pages.
Example: