How to Add a Size Chart to Shopify Product Pages

The question every clothing shopper asks

Which size do I pick? If the product page cannot answer that, the shopper guesses, emails you, orders two sizes, or leaves. A clear size chart is one of the cheapest ways to answer it, and on Shopify you can add one without an app.

This guide covers the decisions that make a chart useful. To build one from your own measurements, the Shopify size chart generator lays out the table, converts between centimetres and inches, and writes the HTML for a Custom Liquid block.

Body measurements or garment measurements

These are two different tables, and mixing them up is the most common size chart mistake.

• Body measurements tell the shopper which size to choose: if your chest is this, pick that size. They are easy to use because shoppers can measure themselves.
• Garment measurements describe the item laid flat. They tell the shopper how it will fit and are better for anyone comparing with a piece they already own.

Either works. What does not work is a chart that leaves the shopper guessing which one it is. Say it in a note under the table, along with how to measure.

Use your own numbers

Sizes are not standard between brands, and a generic chart copied from elsewhere will be wrong for your cut. Take the figures from your pattern specs or measure finished samples of each size. Ranges such as 86-90 usually read better than single values for body measurements, because people rarely sit exactly on a number.

Centimetres, inches, or both

If you sell internationally, some shoppers think in centimetres and some in inches. A unit switch lets each pick. Type the chart in the unit you measured in, so those figures stay exact, and let the other be a rounded translation. For choosing a size, rounding to a whole centimetre or a tenth of an inch is plenty.

Cells that are not measurements, such as S/M or One size, cannot be converted and should read the same in both units.

In the page or behind a link

A chart visible in the page answers the question without a tap, which suits products where fit decides the sale. A chart behind a Size chart link, opening a popup or a side drawer, keeps long product pages shorter. If you use a link, put it right beside the size selector, where the question comes up, not at the bottom of the description.

Either way, check it on a phone. A chart with many columns should scroll sideways inside its own box rather than squashing the numbers together.

One chart per product template

In an Online Store 2.0 theme, a Custom Liquid block belongs to a product template, and every product assigned to that template shows the same block. So tops and trousers need two templates, each with its own chart, and each product assigned to the right one in the admin.

1. In the theme editor, open the product template, or create a new one for this product type.
2. Add a Custom Liquid block to the product information area and position it.
3. Paste the chart and save.
4. Assign the right products to the template from each product page in your admin.

Consistent variant naming makes all of this easier to manage as the catalogue grows; the SKU generator is a quick way to keep sizes coded the same way across products.

Say how it fits

A table cannot say that a style runs small or is cut loose. One short line such as "Relaxed fit, size down for a closer fit" answers the question most charts leave open. If a product is out of the ordinary, say so in the description too, and keep your returns terms easy to find; the refund policy generator can help if they are not written yet.

Next step

Measure one product type properly, decide between body and garment measurements, and build the chart with the size chart generator. Add it to that product template, check it on a phone, then repeat for the next product type.

A size chart helps shoppers who have already chosen a product. For the visitors still browsing, Nudgesmart builds on-site popups from ready-made templates grouped by industry, fashion included.