Size guide

Add a size guide to help customers find the right product 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 your customers' loyalty and confidence in your brand. In Beautify, size guides can be linked directly from your size variant picker or created as a standalone section. 

Size-guide-beautify.png

Beautify size guides

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

  • Section - create multiple size guide tabs which can display images, text, tables and a unit converter. The size guide can be launched directly from the size variant picker and displayed as a section or in a popup.
  • Page - a quick set up method that displays the content of a standard Shopify page in a popup linked to the size variant picker. 

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

The Size guide section can be used to show a size guide link can be shown next to the relevant variant picker on a product page or featured product section. When a customer clicks the link, the size guide can either open as a popup or the page will scroll to the relevant size guide section further down the page. 

Alternatively, use it 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 size guide section is available in Beautify theme versions after 1.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 option 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-link.png
  7. Add a Size guide section to the current page in the Theme Editor. It should be added below the current product or featured product section.
  8. In the Size guide section, choose Associate with a product to link the size guide to the product's variant picker. (When using with a Featured product it is necessary to identify the current Custom product.)
  9. Select the Size guide section 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 Size guide footer settings.
  11. Set the Style by choosing a Color scheme for a popup size guide, or a Color scheme, Section background and section width if using the In page option. 
  12. Within the size guide section, there are nested blocks. Click Add block to add Tab blocks or edit one of the existing tab blocks available.
  13. Enter a Tab name for the tab. If the Tab name is empty, the tab will be hidden. 
  14. 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.
  15. 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 for a given product, the tab remains hidden for that product. Ensure the dropdown Current template: Product is selected when linking the product metafield as a dynamic source. 
 

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 the 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 the 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.
    Metric-Imperial-Converter.png
  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 in order to create more table rows and columns as required. 

Note

For a clearly legible layout where rows are alternating colors, select Show alternating row highlight in the main Size guide section settings. 
Monosnap Video 2026-03-12 16.2.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. 

How to show different tabs for different products

If the Tab name has no content, 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 using the Connect dynamic source icon. 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 tab title. The metafield should be a Product metafield of type Single line text
  3. In the Shopify admin, go to Products, edit the product where you wish to show this size guide tab and scroll down to find the newly created page reference metafield. Add the desired Tab name.
  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 Section is the chosen type. 
  6. In the Size guide section, select the Tab and click on the dynamic source picker, or Connect dynamic source icon, to use a metafield for the Tab name. 
  7. Ensure the dropdown Template: Product is selected to show the list of available product metafields. 
    Size guide tab heading dynamic source
  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 many products.

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. Use it for a separate size chart page or it's also 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 and do not select Associate with a product.

Cherish size chart page

How to set up a size guide - page method

The page size guide will display as a popup when the customer clicks on the size guide link next to the size variant picker. It simply displays the content of the chosen page. 

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-link.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.
    page-size-chart-metafield.png
  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. 
  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?

In Beautify theme versions after 1.2.0, it's possible to add multiple variant options to the Variant option name field. 
In earlier theme versions, each product template is linked to one 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 Beautify theme versions after 1.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 Beautify theme versions after 1.2.0.

Add a size guide to help customers and reduce returns.
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