Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
- Creating a Size Chart
- Using a Single Size Chart for All Products
- Creating Different Size Charts for Different Products
- Mobile Layout
Using the Size Chart Feature
The Turbo theme includes a 'Size Chart' feature that you can enable in your 'product form' on the Product page. If you are selling product that come in different sizes, this feature can help your customers decide which size to order by providing a table or chart with details on your product sizes and any recommended corresponding measurements.
Once you've added your 'Size Chart' a 'Size Guide' link will appear to the right of your product price on the Product page. You can change the name of this link in your 'Language Files'. From your Shopify Admin, head into Online Store > Themes > Actions > Edit Languages. Once you're in the Language Files, click into the 'Products' tab and scroll down to Product > Size Chart, then enter your preferred text there and click save.
Create a Single Size Chart
To create a Size Chart, you'll need to add a new 'Page' to your shop where the size chart will live! Head into your Shopify Admin > Online Store > Pages > Add Page.
This page can include text and/or images, and commonly uses some kind of grid or table to present sizing information.
Using 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, once you've created the actual 'size chart' you can enable it on your Product pages by heading into Customize (your Theme Editor) > Theme Settings > Product Grid > Size Chart.
This will add a 'Size Chart' link (to that one size chart you've just created) to every product page in your shop.
Create Different Size Charts for Different Products
If you have different size charts for different products, and/or have some products that don’t need a size chart at all, you can specify which ones to use and where, with this alternative method.
Head into 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:
meta-size-chart-handle-name
(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.
After you've done that, head into Customize (your Theme Editor) > Theme Settings > Product Grid > 'Size chart' and either remove the selected size chart, or leave the setting empty, without a selected page.
This method 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.
Mobile layout
When viewed on a mobile device, the 'Size Chart' will function the same as desktop. When clicked, a popup expands to take up your mobile screen.
