Also known as fitting guides, size guides, or measurement guides, size charts help customers determine which product options will be suitable for them. Providing a clear and user-friendly size chart is essential for minimized returns and reduced customer effort.
First, create the size chart, then use the theme editor to connect it to products in your catalog.
Create the size chart
To create a size chart, you need to add a page to include a measurements table.
Add page
Assemble your size chart in the Pages area of your Online Store.
Select Add page to begin.
Add title
Include a Title for your size chart page, then select Save.
If you need multiple charts for different products, consider naming the pages based on the product, category, or collection. e.g. Womens Jackets Size Guide
Add measurements table
Tables are the most common and effective way to present a size chart. Add a table by selecting Insert table from the Content toolbar.
Add rows and columns
Add more rows and columns with the same selector.
Insert sizing information
Add your measurement ranges and use the styling buttons in Content toolbar to fine-tune their appearance (e.g. align text).
"If your clothing comes in small, medium, and large, for example, provide comparable numerical sizes, such as sizes 8 to 10 for medium. You can also include common measurements, such as length, in inches or centimeters. Also know that “one size fits all” isn’t true; it’s more likely “one size fits most.” Help sales by spelling out which sizes this piece will fit."
- Shopify: Why Your Store Needs a Size Chart
Save the page
Once complete, select Save.
Connect to products
Connect the size guide to your products by customizing the product page with the theme editor.
Customize product page
Open the Themes portion of your Online Store to locate your theme.
Click Customize to open the theme editor.
Open product page template
Use the page selector to open Products, then Default product.
In the left sidebar, click the toggle beside Product information (Turbo and Flex), Product page (Superstore), or Product (Retina, Responsive, Parallax).
Add block
Add a block for the size chart link. Select your theme below to view the recommended block for each theme.
-
-
Select (+) Add block, then Pop-up.
Select page
Open the Pop-up block.
Click Select page then locate the size chart.
-
Select (+) Add block, then Size chart.
Select page
Open the Size chart block.
Click Select page then locate the size chart.
-
Select (+) Add block, then Size chart.
Select page
Open the Size chart block.
Click Select page then locate the size chart.
-
Select (+) Add block, then Size chart.
Select page
Open the Size chart block.
Click Select page then locate the size chart.
-
Select (+) Add block, then Size chart.
Select page
Open the Size chart block.
Click Select page then locate the size chart.
-
Select (+) Add block, then Text.
Connect page
Open the Text block.
Add text for your size chart link (e.g. View size chart).
Use the link button to connect the size chart page link.
Select Open in new tab to keep the current product page open for customers.
Position the block
Use the cursor to drag the block up or down in the sidebar. This changes the link's position on the product page.
Save.
Separate size charts for different products
To have separate charts connected to different products, we recommend using dynamic sources to connect with product metafields or creating dedicated templates for product types.
Dynamic sources
Dynamic sources are great ways to show different content based on a product's metafields.
Insert dynamic block content with metafields
Set up a Page metafield for your products, then connect products to their respective size charts in the Products admin.
Use the Dynamic source feature in the Pop-up, Size chart, or Text block to connect it to the metafield.
Dedicated templates
Create separate templates for products and configure the settings separately.
Create additional templates with the theme editor
For example, use the theme editor to duplicate the Default product template, then label and customize them separately for their size chart content.
Once the new templates are ready, you can assign products individually or in bulk in the Products admin.