Size chart generator for Shopify product pages

A size chart generator turns your measurements into a table shoppers can read on a product page. Pick a template, type your sizes and measurements, choose centimetres, inches or both, then copy HTML for a Shopify product description or page, or download a PNG or CSV. The tool doesn’t supply measurements: every number should come from your own products.

How do you use this size chart maker?

1. Start from a template: tops, trousers, dresses, shoes, kids’ clothing, rings or a blank chart. Templates set up columns and size rows; the tops, trousers and dresses templates can also add made-up example values, labelled as such.
2. Edit the table. Rename headings, add, remove and reorder rows and columns, or paste a block of cells from a spreadsheet. Tick Measurement for columns of numbers that carry a unit.
3. Type your values. Numbers are read in the Measurements are entered in unit unless a cell names its own (34 1/2 in). Numbers (86), ranges (86–91 or 86-91), fractions (34½), values such as <60 or 110+, and two-unit cells such as 86 cm (33.9 in) convert. Other text, such as “One size”, stays as typed and is flagged when the chart shows another unit.
4. Choose units and a style, then copy the HTML or download the file you need.

How does the inch and centimetre conversion work?

An inch is exactly 25.4 mm (NIST), so the tool multiplies or divides by 2.54. By default, converted values are rounded to 0.1 cm or 0.1 inch, a change of at most 0.05 inch (about 1.3 mm); you can pick ¼ or ½ inch instead, or two decimals for rings. Range ends and bounds such as <60 or 110+ round the same way, so neighbouring sizes still line up. Numbers already in the shown unit stay as typed.

Convert entries rewrites the table in the other unit. Converting back may not return your original numbers, so keep your source measurements.

Inches or centimetres for an international store?

Use the unit your shoppers measure in. If they use both, choose Both: each cell shows your unit first and the conversion in brackets, such as 86 cm (33.9 in). When you show one unit, it goes in each measurement heading, such as “Chest (cm)”.

How do you measure for a size chart?

• Decide whether the chart lists body measurements (the shopper) or garment measurements (the item laid flat), and say which in the note below the chart.
• Measure finished stock rather than copying another brand’s chart.
• Use a flexible tape, measure each size at the same points, and check more than one piece per size when you can.

Our guide to adding a size chart in Shopify shows where to take common measurements and which suit each product type.

How do you add the size chart to Shopify?

• Product description: in your Shopify admin, go to Products and open the product. The Description field uses the rich text editor (product details). Click Show HTML, paste the code and click Save (rich text editor).
• A page: go to Online Store > Pages and click Add page. Enter a title, paste the code into the content’s HTML view, keep Visible selected and click Save (creating pages).
• A metafield: Shopify describes its rich text metafield type as supporting headings, lists, links, bold and italics, and doesn’t list tables (metafield data types). For a chart per product type, Shopify’s pop-up size chart tutorial uses a Page metafield that points each product to a chart page, shown in a Pop-up block in themes that support dynamic sources.

Shopify’s editor filters pasted HTML and corrects formatting automatically (rich text editor), so after saving, reopen the HTML view to check the caption, header cells and styles, then view the page on a phone. A “How do I find my size?” answer on your FAQ page can link to the chart.

Is a size chart image accessible?

A PNG suits places that can’t hold a table, such as social posts, but it’s an image of text. WCAG success criterion 1.4.5 (level AA) asks for real text rather than images of text where the technology allows, so people can resize and restyle it (Understanding Images of Text).

On your store, use the HTML table. Its caption works like a heading for the table (W3C caption tutorial), and its header cells are marked as th and scoped to their column or row, so screen readers can announce them (W3C tables tutorial, tables with two headers). If you upload the PNG as a product image, give it alt text naming it as the size chart (adding alt text).

What are the limitations?

• Templates hold no standard measurements, and the tool can’t tell you which size a measurement belongs to.
• One chart at a time, with up to 40 rows, 10 columns and 60 characters per cell.
• Other text doesn’t convert, and a two-unit cell uses its first value. A cell can say “mm”, but charts show centimetres or inches.
• The chart is saved only in this browser.