Do some or all of your products come in different sizes? You can help your shoppers decide which size to order by providing a table or chart with details on your product sizes and any recommended corresponding measurements.
Here are the basic steps:
Create a Size Chart:
For each size chart you want to use in your shop, you’ll need to create a separate page by going to Online Store > Pages > “Add a Page”.
This page can include text and/or images, and commonly uses some kind of grid or table to present sizing information.
OPTION 1: Use a single size chart for ALL products:
If you only have one sizing guide that applies to all your merchandise, and you want that size chart to be accessible from each product page, follow these steps:
Go to your theme settings (Online Store > Themes > Customize) and find the Product Page section
Scroll to the very bottom and look for the Size chart dropdown list
Choose the page you’ve just created for your size chart
Result: This will add a “Size chart” link (to that one size chart you just specified) to every product page in your shop.
OPTION 2: Use different size charts for different products:
If you have different size charts for different items, and/or have some products that don’t need a size chart at all, you can specify which ones to use where, using the following method:
Go to your size chart page and make a note of the handle for that page:
Next, go to a product where you want that particular size chart to be used, and add a new tag in the Tags section with the following format:
(where “handle-name” = the handle of the page for a particular size chart; in our example the page handle was "gaiam-size-guide"
Repeat this step for every size chart and every product you have, that you want to use a specific size chart with
Finally, go to theme settings > Product Page > “Size chart” and either remove the selected size chart, or leave the setting empty, without a selected page:
Result: This will add a custom “Size chart” link ONLY to the product pages in your shop that have a ‘meta-size-chart’ tag applied to them; products without this meta tag will not display a size chart link at all.
In the Portland demo shop, there are 2 different size chart pages and therefore 2 different meta tags were created and applied to the apparel products accordingly:
All the men’s products are tagged with “meta-size-chart-manduka-size-guide” so that they display the Manduka men’s sizing chart: See sample page
All the women’s products are tagged with “meta-size-chart-gaiam-size-guide” so they display the Gaiam sizing chart instead: See sample page
Meanwhile, other products that don’t need a size guide (like the yoga blocks) don’t display ANY size chart link on their product page: See sample page
FINAL NOTE: To change the name of the size chart link:
Go to the theme’s language settings (Online Store > “Actions” > Edit Language) and under the “Product” tab, scroll down until you see the text field for “Size chart” then enter your preferred text there + click save