Using the app
Appearance
The Appearance page styles every chart in your store at once, so they all match your brand. A live preview on the page shows each change as you make it.
Click Save in the bar at the top to apply your changes. Every active chart on your storefront updates straight away — there's no need to re-save charts one by one. Want one chart to look different? See giving one chart its own look.
Chart window
| Setting | What it does |
|---|---|
| Width | Narrow (best for three or four columns), Medium (default), Wide (room for wide tables without sideways scrolling), or Extra wide (best with product photos beside the chart). |
| Corner radius | 0–24 px. Default 8 px. |
| Padding | 0–48 px. Default 24 px. The space between the chart's edge and its content. |
Header
The bar at the top of the popup or drawer.
| Setting | What it does |
|---|---|
| Show the product name | Heads the popup with the name of the product it was opened from. When hidden, screen readers still announce it. |
| Header background | Leave empty to use the chart background. |
| Title colour | Leave empty to use the text colour. |
| Title alignment | Left or Center. |
| Close button | Plain ✕, or ✕ in a filled circle. |
| Icon colour | The ✕ itself. Leave empty to use the title colour. |
| Circle colour | For the filled-circle style. |
Product photos
| Setting | What it does |
|---|---|
| Show product photos beside the chart | Shows the product's own photos next to the chart, with arrows to browse them. On larger screens they show in the popup only — drawers are too narrow. Pair it with the Extra wide window. |
| Also show them on phones | Photos stack above the chart on phones, in the popup and in drawers alike. Off, phones show only the chart. |
Background
| Setting | What it does |
|---|---|
| Background colour | The chart's surface. Default white. |
| Text colour | Body text — change it along with a dark background so the chart stays readable. |
| Background image | An image behind the whole chart. |
| Image fit | Fill the chart, Fit whole image, or Repeat (tile). |
| Image position | Centre, Top or Bottom. |
| Overlay | 0–90%. Fades the image with the background colour so text stays readable. 0% shows the image as-is. |
Table
| Setting | What it does |
|---|---|
| Column header background | Default light grey. |
| Column header text | Default near-black. |
| Grid lines | The colour of lines between rows and cells. |
| Alternate row shading | Tints every other row so wide tables are easier to read across. |
Individual tables can override these colours in the editor under Style options.
Text
| Setting | What it does |
|---|---|
| Heading colour | Headings in the chart, plus accents such as the active unit in the unit switch and keyboard focus outlines. |
| Base size | 11–20 px. Default 14 px. Headings and text scale from this. |
Behaviour
| Setting | What it does |
|---|---|
| Close when clicking outside | On by default. Turn off so the chart only closes with the close button. Escape always works. |
Custom CSS
For anything the options above don't cover. The CSS is added wherever a chart appears. Start your selectors with .plug-sc so they only touch the size chart and not the rest of your theme.
Useful class names:
| Setting | What it does |
|---|---|
| .plug-sc__trigger | The Size chart link or button. |
| .plug-sc__dialog | The popup or drawer window. |
| .plug-sc__heading | The title at the top of the popup. |
| .plug-sc__table | Every measurement table. |
| .plug-sc__units | The unit switch above a table. |
| .plug-sc__float | The floating button. |
| .plug-sc__inline | A chart shown inline on the page. |
/* Smaller table text on the storefront */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* Hide the floating button on phones */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}Reset
Restore defaults puts every option back to its default in the form. Nothing changes on your store until you click Save.