Size chart is a table of measurements that you build in the theme editor, with no HTML: one block for the column labels and one block for each size. Beside or below the table, it can show how to measure, with an image.
Put it on a size guide page, and the product page can open the same chart in a drawer, so customers check their size without leaving the product.
Where to find it
Masthead's size guide page template already includes this section, twice: once for tops and once for bottoms. See Page templates for how to create the page. To add it elsewhere, click Add section in the theme editor and choose Size chart.
Build the table
The table is made from two kinds of block:
- Select the Column labels block and type the names of your columns, separated by commas. The first column is the size. For example:
Size, Chest, Waist, Hips. - Select a Row block and type that size's values in Values, separated by commas, in the same order as the labels. Start with the size. For example:
S, 86 to 90, 68 to 72, 92 to 96. - Click Add block and choose Row for each further size. Drag rows to reorder them.
Each row needs as many values as there are column labels. To leave a cell empty, keep its comma and type nothing between: S, 86 to 90, , 92 to 96.
On phones, a table too wide for the screen scrolls sideways inside its own frame, with the size column staying readable. The page itself never scrolls sideways.
How to measure
Under the heading How to measure, add an Image, such as a figure drawing that shows where to measure, a heading and a short list of instructions. Position places this part Beside the table or Below the table. On mobile it is always below.
To leave it out, remove the image and empty the heading and text.
More than one chart
Add the section once for each chart, for example Tops, Bottoms and Shoes, and give each its own Heading. All the charts on a page are shown together in the product page drawer.
Open it from the product page
The product page's Size chart block adds a link, labeled "Size guide" by default, that opens your charts in a drawer.
- Create your size guide page. Page templates shows how.
- In the theme editor, open a product page and select the Size chart block under Product information.
- Choose your page in Size chart page.
Product pages has more on the block.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Show editorial numbering on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Intro text | Formatted text. | A line or two above the table, for example whether measurements are of the body or the garment. |
| Units note | Text. | A short note under the table, such as the unit the measurements are in. |
| How to measure | ||
| Image | Image. | Optional. For example, a figure drawing that shows where to measure. |
| Heading | Text. | The heading of the how to measure part. |
| Text | Formatted text. | The instructions. A list works well, with one line for each measurement. |
| Position | Beside the table or Below the table. Default: Beside the table. | Places the how to measure part beside the table or below it. On mobile it is always below. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Blocks
This section is built from 2 kinds of block. Click Add block under the section to add one, and drag blocks to reorder them. The section holds up to 40 blocks.
This block can be added once: Column labels. The others can be added more than once.
Column labels
The table's column labels. The first one names the size column.
| Setting | Options | What it does |
|---|---|---|
| Column labels | Text. | The column labels, separated by commas. The first column is the size. |
Row
One size and its measurements.
| Setting | Options | What it does |
|---|---|---|
| Values | Text. | This row's values, separated by commas, in the same order as the column labels. Start with the size. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| How to measure image | 1200 x 1500 px (portrait) | A simple line drawing on a plain background reads best. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Say whether measurements are of the body or of the garment. Customers assume different things.
- Give ranges, such as 86 to 90, when a size fits a range.
- Keep to one unit per chart, and name it in Units note. For centimeters and inches, add a second chart.