Appearance and the Master Template
The Appearance page is the master template — one set of styling decisions that every chart follows. Change it once and all your charts update on their next page load. (“Master template — used by 42 charts.”)
A live preview on the page reflects every change as you make it — no saving needed to see the effect.
Where shoppers open the chart
Section titled “Where shoppers open the chart”Pick one of four trigger styles:
| Trigger | Where it appears |
|---|---|
| Next to size label (default) | On the same line as “Size” — falls back to an inline link |
| Inline link | Under the size options |
| Floating button | Corner of the page |
| Expandable row | Opens in place |
The link never disappears: if your theme doesn’t expose a size label the app can attach to, the link stays under the size options instead — there is no state where shoppers lose access to the chart.
Placement for custom themes
Section titled “Placement for custom themes”On most themes, placement is automatic. For heavily customised themes:
- Enter a CSS selector where the trigger should be inserted (e.g.
.product-form__variants). - Choose where relative to that element: After / Before / Inside at the end / Inside at the start.
- Click Test again — the app tests the selector against your published storefront and reports how many elements matched (or none).
As a last resort for headless or fully custom setups, copy the snippet and drop it into your theme where you want the chart:
<div data-sizechart data-product="{{ product.id }}"></div>Colours and type
Section titled “Colours and type”Five colour pickers — Text, Background, Header row, Lines, Accent — and typography:
- Font — use your theme’s font (default) or pick one.
- Table text size — 11–17 px.
Table and popup
Section titled “Table and popup”- Table style — horizontal lines, striped rows, full grid, or no lines.
- Corner radius — 0–20 px.
- Popup width — 360–820 px.
- Keep the size column visible while scrolling — on a phone the table scrolls sideways while the size stays pinned on the left. On by default; strongly recommended for wide tables.
| Setting | Options |
|---|---|
| Default unit system | Metric — cm, kg / Imperial (US) — in, lb |
| How the other system shows | A switch above the table, or both inline: 86–91 cm (34–36 in) |
| Pick system by market | US market sees inches first; everywhere else centimetres — with per-market overrides |
| Inches as fractions | Show 33½" instead of 33.5" |
| Decimal places | 0, 1, or 2 |
| Unit symbol | In the column header / next to every number / hidden |
Market overrides
Section titled “Market overrides”With Pick the system from the shopper’s market enabled, add overrides per market (by ISO country code) — e.g. US → Imperial, CA → Imperial, DE → Metric. The storefront picks the system at render time based on the shopper’s selected market, so it costs no JavaScript and no page reload.
What shoppers can do
Section titled “What shoppers can do”Feature toggles for the storefront widget:
- Hover a size to see its row — hovering “M” shows the M row instantly.
- Switch size system — US/UK/EU/JP pills inside the chart, whichever systems the chart carries.
- Fit scale — a runs small → true to size → runs large indicator.
- Find my size — the recommender: shoppers enter measurements and get a size plus the reason (see How the recommender works).
- Select the recommended size for the shopper — tapping the recommendation picks that size in the theme’s variant picker; the shopper still reviews and adds to cart themselves.
- Record the recommendation on the order — saves the suggestion as a line-item property so returns can be compared against what was suggested. Off by default.
Custom CSS
Section titled “Custom CSS”Add custom CSS scoped to the widget — it applies to every chart and cannot leak into your theme. Invalid CSS is rejected with the reason, so you can fix it inline.
Reset to default restores the stock styling. Confirm carefully: reset also clears your custom CSS (you’ll be asked).