Where to put the size chart on a Shopify product page

A size chart only helps if customers see it at the right moment. On a Shopify product page, that moment is when they're choosing a size, a few pixels away from the size selector and the Add to cart button.

This guide covers where the size chart should go, every way to put it there, and how to check it works on phones.

The best place for a size chart

Put the size chart link right next to the size options, or just above Add to cart. That's where the customer is deciding, so they don't have to scroll or leave the page to check a measurement.

Places that don't work as well:

• The product description. Customers often skip long descriptions, and a table inside one rarely fits a phone screen.
• The footer or a separate page. It takes the customer away from the product, and many won't come back.
• Below the reviews. By the time a customer gets there, they've usually picked a size already.

Option 1: Your theme's pop-up block (free)

Most recent Shopify themes, including Dawn and other free Online Store 2.0 themes, have a Pop-up block that opens a Shopify page in a window. Add it in the theme editor (Online Store → Themes → Customize), in the product information section, and drag it just under the variant picker.

It works for a single size chart for the whole store. For different charts on different products, a proper table and a cm/in switch, you'll need an app. The full steps are in how to add a size chart to Shopify.

Option 2: A size chart app (Jotly)

With Jotly, you choose where the size chart button appears from the app's Settings page, and it shows on every product that has a size chart. These are the options:

Flexible button placement is included in Jotly's free plan.

Which option suits your theme?

• Online Store 2.0 themes (Dawn and most themes released since 2021): every option works. Add anywhere in your product page gives you the most control: you drag the Jotly block to exactly where you want it in the theme editor.
• Older (vintage) themes that don't support app blocks: use next to the size label, above or below Add to cart, or floating. If none of them sits right, contact Jotly support and we'll help with a custom position.

Set it up

1. In Jotly, open Settings and click Enable App Embed, then Save in the theme editor. You only do this once.
2. Back in Jotly's Settings, pick a placement and click Save.
3. If you chose Add anywhere in your product page, click Add Block, drag the Jotly block onto the product page (just above Add to cart is a good spot) and Save in the theme editor.
4. Open a product that has a size chart on your store and check the button.

The step-by-step walkthrough, with a video, is in how to enable Jotly in your live theme. Each placement also has its own help article: above Add to cart, below Add to cart, anywhere on the page, floating and custom selector.

Make the button and the pop-up clear

• Button text. Use words customers look for, like "Size chart" or "Size guide". If you sell in several languages, add a translation of the button text for each one. Customers in a language without a translation see your default text. See how to translate the button text.
• Match your store. Change the button's colours and borders so it fits your theme, or remove the underline from the button text.
• Pop-up title. By default the size chart pop-up shows the product's title. You can show the chart's name, your own text, or no title. See how to change the pop-up title.

Check it on a phone

Most customers will open your size chart on a phone, so always test it there.

• On mobile, the Jotly size chart opens from the bottom of the screen by default. You can change it to open at the top or in the centre under Popup settings. See how to change the position on mobile.
• Make sure the table fits without sideways scrolling, and that the cm/in switch is easy to tap.

Need more than one size chart on a page?

Some products need two charts, for example a jacket and trousers sold as a set. On the Enterprise plan, Jotly can show up to three extra size charts on the same product page, each in its own spot. Our support team turns it on for you on request. See how to show multiple size charts on a product page.

Frequently asked questions

Where should the size chart go on a Shopify product page?

Next to the size options, or just above the Add to cart button. That's where customers choose their size, so they can check the chart without scrolling or leaving the page.

Can I put the size chart next to the size selector?

Yes. Jotly's next to the size label placement puts the button beside the size options (Essentials plan and above). On Online Store 2.0 themes you can also drag the Jotly app block to sit right under the variant picker.

My theme doesn't support app blocks. What can I do?

Use one of the other placements: next to the size label, above or below Add to cart, or a floating button. If none of them fits, Jotly's support team can set up a custom position for you.

Why isn't my size chart button showing?

Check that the Jotly app embed is turned on in your live theme, that you clicked Save in both Jotly and the theme editor, and that the product has a size chart assigned to it. If you chose above or below Add to cart, the page needs a visible Add to cart button.

Can the size chart show on the page instead of in a pop-up?

On the Enterprise plan, extra size charts can be shown directly on the product page instead of behind a button. The main size chart opens in a pop-up.