How to Add size chart to product pages in Shopify

  • by
featured add size chart pic

If you’re selling a brand that sells a product with different sizes that require customers to know their size before they make a purchase, you can add a custom size chart to your product page. In this tutorial, you will know how you can add custom size charts to your Shopify store.

Follow these steps:

  1. From your Shopify admin, go to Online store >> Pages.
  2. Click Add Page.
  3. Enter Size Chart page title, and set page Visibility to Visible
add page title pic
  1. In the Content box, create a table that contains your size chart information. Customize the table to look the way you want it to:
table sample pic
  1. Click Save.

Here your size chart page is ready to use you can add this page to the store’s navigation menu or footer menu or may include it in the product’s description

Adding Size chart to the theme

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
edit code

  1. In the Snippets directory, click Add a new snippet.
  2. Name your snippet size-chart, and click Create snippet:
  3. Copy the following into your size-chart snippet:

If you are using the theme Simple replace from .trigger-pop-up to right above </style> with this code:

If you are using the theme Minimal add the following code above the closing </style> tag:

Add the size chart snippet into your theme.liquid

  1. In the Layout directory, click to open your theme.liquid file.
  2. Find the closing </body> tag. Right above the closing </body> tag, paste the following code:

Add a Size chart button

  1. In the Sections directory, click to open your product-template.liquid file or product.liquid file if you do not have a product-template.liquid file.
  2. Paste the following code above the Add to cart button:

The Add to cart button typically will start with something like <button type="submit" name="add"

Setting up a size chart specific to a vendor or product type

If you selected a size chart specific to a vendor or product type, you will need to make a size chart for each vendor or product type. The process is the same as making a chart for the whole shop, except you need to put the vendor or product type at the beginning of the size chart page title and handle. For example, if you have a vendor called Great Owls, your size chart page would be named Great Owls Size Chart, and the handle of the page would be great-owls-size-chart:

demo linked

If your size chart is for a product type, you might have a chart for product type shoes. You would then call your size chart page Shoes Size Chart, and the handle would be shoes-size-chart .


Leave a Reply

Your email address will not be published.