Theme settings
Everything below lives under Customize → Theme settings. Section and block settings are edited on the section itself, in the editor.
Product cards
| Setting | Default | What it does |
|---|---|---|
| Card image ratio | Square |
The shape of a product image on a card. Square suits hardware; Tall, Portrait and Adapt are there if your photography differs. |
| Show vendor | On | Shows the brand above the title. Turn off if you use Vendor for something else. |
| Show rating | On | Shows stars from the reviews.rating metafield. |
| Star colour | #f5a623 |
The filled part of a rating. Defaults to gold rather than body text. |
| Show swatches | On | Colour chips from a variant option — the finish. Chip colours are set here, not in Shopify. |
| Hover image | On | Swaps to the second product image on hover. |
| Quick add | On | Adds the card's add-to-basket button. |
Colours
Four colour schemes, each applied per section. A section's scheme sets its background, text, heading, button, accent and border together, so a section is always internally consistent.
The defaults carry over the original Electro palette: crimson #d10024 on
near-black #15161d, with #2b2d42 body text and a pale grey #fbfbfc for
alternating bands.
Typography
Heading and body typefaces are Shopify font pickers, so anything in Shopify's font library works. Electro ships Montserrat throughout, with headings in sentence case and slightly negative tracking — an editorial setting rather than a promotional one.
Heading case and Heading tracking are separate settings, so you can keep the
typeface and change the register.
Layout
| Setting | Default |
|---|---|
| Page width | 1300px |
| Corner radius | 6px |
| Media radius | 4px |
| Logo width | 150px |
Cart
The cart can be a drawer or a page. The drawer is the default and adds without a page reload; the page is the traditional flow. Both are built from the same markup, so nothing is lost either way.
A note on the HTML edition
The Electro HTML template is a
static build of this same design system — its stylesheet is this theme's
base.css with a token block on top. If you are prototyping before you commit
to Shopify, the two will not drift apart.