Size guide

Add a size guide to help customers and reduce returns.

What is a size guide?

A size guide 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 customer loyalty and confidence in your brand.

Amara-screenshot2.jpg

Symmetry size guides

The Symmetry theme provides two different methods for creating a size guide:

  • Section - a size guide builder which supports multiple size guide tabs displaying images, text, tables and a unit converter. The size guide can be displayed as a section or as a popup.
  • Page - a quick set up method that displays the content of a standard Shopify page in a popup.

How to decide which method to use

The Section based method for size guides is more versatile as it can be linked to a product or shown independently. It can be displayed In page or in a Popup. The Size guide section provides built‑in styling options for multiple tabs, tables, images and a unit converter, making it easy to create a professional look. If a section size guide is required in several locations, the section can be duplicated. 

The Page based method for a size guide links to the variant picker. Choose a page from the Shopify admin to display in a popup on the product page. If multiple charts are in use and the content changes frequently, this page‑based method may offer a more efficient workflow, as updates can be managed centrally within the Shopify admin page editor.

How to set up a size guide - section method

A size guide link can be shown next to the relevant variant picker on a product page, quick buy or featured product section. When a customer clicks the link, the size guide can open as a popup or scroll the page to the relevant section. 

Alternatively, the Size guide section can be used as a standalone section to hold a size chart or any table based product information. 

The Size guide section supports multiple tabs. Each tab can contain tables, images or text content. Tabs can be used to show different size guides for different product types or to provide additional information about sizing and measuring. This section is available in Symmetry theme versions after 8.2.0. 

Steps

  1. Open the Theme Editor, select Products from the dropdown at the top and choose the template (e.g. Default product).
  2. Select the Variant picker block.
  3. In the Size guide settings, check the Enable size guide setting.
  4. Add the Link text.
  5. Within Variant option name, enter the variant option title which indicates the size of the product. The size guide link will appear alongside this option once set up. Separate multiple variant options names with a comma.
  6. Select Section as the Content source. The size guide link should now be displayed next to the variant option. 
    Size-guide-sym2.png
  7. Add a Size guide section below the current product pages or featured product section.
  8. Choose Associate with a product to link the size guide to the product's variant picker. When using in a Featured product section it is necessary to identify the current Custom product.
  9. Select the design to be In page or As a popup. When the section is shown As a popup it will not be visible on screen until the customer clicks the size guide link next to the variant picker.
  10. Configure the Heading and Footer settings.
  11. Within the size guide section, click Add block to add Tab blocks or edit one of the existing Tab blocks.
  12. Enter a tab name for the tab. If the tab name is empty, the tab will be hidden. 
  13. Add Content and/or Table nested blocks under the Tab block. A Content block is used for text, page content or an image. A Table block will show a table.
  14. Add more Tab blocks with nested Content and Table blocks as required.

Note

When the tab name is empty, the tab will be hidden. To show a size guide Tab only for specific products, use a metafield for the tab name. If the metafield is empty, the tab remains hidden for that product. Ensure the dropdown Current template: Product is selected when linking the product metafield as a dynamic source on the product page.  

How to use the table block in a size guide section

The Size guide section aims to make it easy to create beautiful and responsive tables that are easy for customers to read and understand. 

Steps

  1. Within a Tab block under the Size guide section, add a Table block.
  2. Add a Table name if required.
  3. Select Sticky row name if the table has many columns and you wish the left hand row to remain visible as the customer scrolls. 
  4. Select Show unit converter to show a unit converter at the top of the table and use the settings to manage the most appropriate units for your store. In order for the unit converter to operate, ensure that the table data contains the initial unit (e.g. 1.5cm or > 6" or 5cm - 10 cm). The unit converter can support number ranges.
  5. Set key aspects of the table cell formatting such as size, alignment and whether data should wrap and columns should be evenly sized. 
  6. Add blocks to the Table block to add rows to your table. Use the Row is table header setting to determine whether the row is a header where the content will be shown in bold. 
  7. Set the Row name which will appear in the first column. Fill in the data for as many additional columns as required (Column 1, Column 2, Column 3)
  8. Continue to add more blocks to create more table rows and columns as required. 

Note

For a more legible layout where rows are alternating colors, select Show alternating row highlight in the main Size guide section settings. 
Another-size-chart.gif

How to use the content block in a size guide section

Add one or multiple content blocks to the size guide section tabs. Content blocks can contain text and an image, such as a measuring guide. Settings are provided to customize the image size and position to ensure the layout works well on different screen sizes.

Steps

  1. Within a Tab block under the Size guide section, add a Content block.
  2. Show content from a Page if desired.
  3. Add text using the Content box.
  4. Add an Image and set the Image position and Image size on desktop.
  5. Choose whether to Show image on smaller screens. Set the Image size and position for mobile.
  6. Add other content blocks to the current Tab block or more Tab blocks as needed. 
Size-guide-images.jpg

How to use the size guide section without linking to a product

The Size guide section is more versatile than its name suggests. It can be added anywhere in your storefront to present tables or tabbed content in a clean, responsive layout. It’s ideal for technical specifications, ingredient lists, nutritional details, material breakdowns, compatibility charts, or product feature comparisons.

To use the Size guide section in other contexts, add the section to a page and choose to show it In page. Do not select Associate with a product.

Sym-size-guide-info-table.png

How to set up a size guide - page method

The page size guide will be displayed as a popup when the customer clicks on the size guide link next to the size variant picker. 

Steps

  1. Open the Shopify admin area and navigate to Online store > Pages > Add page.
  2. Create a page with a title such as "Size guide".
  3. Add the size guide information directly in to the page Content area. 
  4. Ensure the Page is set to Visible and click Save.
  5. Go back into the Theme Editor, select Products from the dropdown at the top and choose the template e.g. Default product.
  6. Select the Variant picker block.
  7. In the Size guide settings, check the Enable size guide setting.
  8. Add the Link text. 
  9. Within Variant option name, enter the variant option title which indicates the size of the product. The size guide link will appear alongside this option once it is set up.
  10. In the Size guide settings, select Page as the Content source.
  11. Click Select page and choose the Page containing size guide.
  12. The size guide link should now be displayed next to the variant option. Size-guide-sym2.png

Note

Consider the layout of your size guide page. A table with many columns may be hard to read on small screens. Images can be used as a size chart and will provide a consistent display on different devices. We strongly advise checking your size guide content to ensure it is legible on different screen sizes. 

How to set up unique size guide pages using metafields

By creating a page reference product metafield, it's possible to link different size guide pages to different products. Learn more about creating metafields in Shopify's metafield guide. 

Steps

  1. Open the Shopify admin and go to Settings > Metafields and Metaobjects.
  2. Click on Products to create a new product metafield for your Size guide page link. The metafield should be a Product metafield of type Page Reference.
  3. 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 guide for that product and Save. 
  4. Open the Theme Editor, and select Products from the template dropdown at the top and choose your desired product template - usually default. 
  5. Select the Variant picker block, ensure the size guide settings are configured and Page is the chosen type. 
  6. Next to Page containing size guide select the Connect dynamic source icon.
  7. Ensure the dropdown Template: Product is selected to show the list of available product metafields. 
    Size-guide-sym.gif
  8. Select the metafield for the product template which links to your size chart page.

Note

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

FAQs

Can I link size guides to different variant options?

Yes, Theme versions after 8.2.0 can support multiple variant option names. 

In earlier theme versions, each product template is linked to one variant option name in the size guide 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 guide 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 a Size guide section be used with a Featured product section?

Yes, use the Custom product setting in the Size guide section to link the size guide to the featured product section. The Size guide section is available in theme versions after 8.2.0.

Can a Size guide section be used as a standalone section that is not linked to a product?

Yes, the Size guide section can be used on any page. Deselect the setting Associate with a product and choose In page to use the section as a standalone section. The section can be used to create any type of table or tab content, for example nutritional information, it does not have to be used as a size guide. The Size guide section is available in Symmetry theme versions after 8.2.0.

Is there a video guide to explain the section size guide?

Yes, we have a video guide for the size guide section and for many features in the Symmetry theme on the Clean Canvas Youtube channel.

Bring your business ideas to life with Shopify

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!

Contact us