Using the app

Chart editor

Everything you can put in a chart and every option it has. Open the editor from Size charts by creating a chart or clicking an existing one.

Editor layout

Chart name — for your own reference; shoppers never see it.
Content — the elements that make up the chart, top to bottom. Drag the handle to reorder, or use the up / down arrows. The bin icon removes an element.
Appearance — Use store appearance is on by default. See giving one chart its own look.
Status and Applies to — covered in the Setup guide.
Live preview — updates as you type. Toggle between desktop and mobile, or open the Full-width preview.

Changes aren't live until you click Save in the bar at the top. Leaving with unsaved changes asks you to save or discard them first.

Elements

Click Add element to add one of eight element types. Empty elements — a heading with no text, an image with no file — are left out on your storefront, so a half-finished element never shows as a blank gap.

Table

Rows and columns of measurements. The first row is the header; the first column usually holds the size names. See working with tables and unit conversion below. Style options:

Setting	What it does
Cell alignment	Left, Center or Right.
Cell spacing	Compact, Normal or Relaxed.
Lines	Between rows, Full grid, or None.
Colours	Header background, Header text, Cell text, Alternate rows and Lines. Leave empty to use the chart's colours.
Bold header row	On by default. Turn off for a regular-weight header.
Bold first column	On by default. Turn off for regular-weight size names.
Highlight the first column	Tints the size column so it reads as a label.
Keep the first column in view on scroll	On wide tables, the size column stays put while shoppers scroll sideways — especially useful on phones.
Capitalise the header row and size column	Shows them in capitals.

Heading

A short title to break a chart into sections, such as "How to measure".

Setting	What it does
Alignment	Left, Center or Right.
Size	Small, Medium or Large.
Colour	Leave empty to use the chart's heading colour.

Text

A note about fit, measuring or returns. The toolbar has bold, italic, underline, bulleted and numbered lists, and links. Set Text size to Small, Medium or Large.

Select words and use Text colour or Highlight to colour them. Edit HTML, at the end of the toolbar, lets you edit the markup directly: paragraphs, h3 and h4 headings, bold, italic, underline, lists, links and coloured text are kept. Other tags are removed when you save, but their text stays. The text in Image with text uses the same editor.

Image

A single diagram or photo — for example a how-to-measure illustration.

Setting	What it does
Image	Upload a new image, pick one already in your Shopify Files, or paste an image link (https only). JPG, PNG, WebP or GIF, up to 20 MB.
Alt text	Describes the image for shoppers using screen readers. Always worth filling in.
Width	Original size, Full width, Large, Medium or Small.
Alignment	Left, Center or Right.

Image with text

An image beside explanatory text, such as a diagram with measuring steps.

Setting	What it does
Image position	Left of the text or Right of the text.
Image width	Half or One third of the element.
Vertical alignment	Center or Top.

On phones, the image stacks above the text.

Image gallery

Several images side by side — fabric close-ups, fit photos, or measuring steps.

Setting	What it does
Layout	Grid, or Carousel (swipeable).
Columns	Grid only: Fit automatically, 2, 3 or 4.
Image height	Carousel only: Short, Medium or Tall.

Video

A how-to-measure clip.

Setting	What it does
Source	Upload a video to your Shopify Files (MP4, MOV or WebM, up to 1 GB), or paste a YouTube or Vimeo link.
Playback	Uploaded videos only: Player with controls, or Autoplay silently on a loop, like a GIF.
Title	Read out by screen readers.
Width	Full width, Large, Medium or Small.

Note: Uploaded videos take a moment to process in Shopify before they can play. YouTube videos are embedded in privacy-enhanced mode (youtube-nocookie.com).

Divider

A horizontal line between sections, with an optional label in the middle.

Setting	What it does
Line	Solid, Dashed or Dotted.
Spacing	Small, Medium or Large space around the line.
Thickness	1, 2 or 4 px.
Colour	Leave empty to use the chart's line colour.
Label	Up to 60 characters, e.g. "How to measure". Sits in a gap in the line; leave empty for a plain line.
Label position	Left, Center or Right.

Every element also has Space above and Space below (None, Small, Default or Large) under Style options.

Working with tables

The table editor behaves like a small spreadsheet. A table can have up to 200 rows and 30 columns.

Keyboard and mouse

Setting	What it does
Arrow keys	Move between cells.
Shift + arrow keys	Select a range of cells. You can also click and drag.
Enter	Move down a row (Shift + Enter moves up).
Delete / Backspace	Clear every cell in a selected range.
Ctrl / ⌘ + C, X, V	Copy, cut and paste a range.
Ctrl / ⌘ + Z	Undo the last table change (paste, insert, delete).
Right-click, Shift + F10, or the menu key	Open the table actions menu.
Escape	Collapse a selection back to one cell.

Pasting from Excel or Google Sheets

Copy cells in your spreadsheet, click the cell where the top-left value should go, and paste. The table grows to fit. Pasting a single value over a selection fills every selected cell.

Right-click any cell for:

Undo
Insert row above / below, Duplicate row, Move row up / down, Delete row
Insert column left / right, Move column left / right, Delete column
Swap rows and columns — turns sizes-across-the-top into sizes-down-the-side, or the other way round.
Import CSV… — replaces the table with a CSV file's contents. The first line becomes the header row.
Clear measurements — empties every cell but keeps the header row and size column, so you can reuse the layout.

When several rows are selected, Delete row deletes them all. The Add row and Add column buttons below the table add to the end.

Unit conversion

Enter measurements once and let shoppers switch units. With conversion on, a small switch appears above the table (for example cm | in). Sizes and notes stay exactly as you wrote them.

Setting	What it does
Unit conversion	No conversion, or the unit you entered → the unit to offer: Centimetres → inches, Inches → centimetres, Millimetres → inches, Inches → millimetres, Kilograms → pounds, Pounds → kilograms.
Show first	Which unit shoppers see when the chart opens — the one you entered, or the converted one (e.g. inches for a US audience).
Round converted values to	Whole numbers, 1 decimal place (default), or 2 decimal places.
Switch position	Left, Center or Right above the table.
Columns to convert	Tick the columns that hold measurements. By default every column except the first converts.

What gets converted

Single values (86) and ranges (86-90, 86 – 90, 86/90, 86 to 90).
Decimal commas (86,5) — the converted value keeps the comma.
Values with the unit written in (86 cm → 33.9 in).
A unit in brackets in the header is swapped too: Chest (cm) becomes Chest (in).

Anything that isn't a number — size names like M or XL, notes, empty cells — is left as it is.

Tip: Put the unit in brackets in each header, like Waist (cm), so shoppers always know which unit they're reading.

Giving one chart its own look

By default every chart follows your store-wide Appearance. To style one chart differently — say, a darker look for a streetwear line — turn off Use store appearance in the editor. The chart gets its own copy of the Chart window, Header, Product photos, Background, Table and Text settings, starting from your current store values.

Turn Use store appearance back on to return the chart to the store look. Custom CSS and the close-on-backdrop behaviour always come from the store-wide Appearance page.