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 | Tall (2:3) |
The shape of a cover on a card. Portrait suits books; Square and Adapt are there if your catalogue is mixed. |
| Show vendor | On | Shows the author under 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 | Off | Colour chips from a variant option. Off for books, where format is text. |
| 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 ABC Book palette: red #ff1616, navy
#1f2b7b, blush #fdf5f3 and a deep navy #232f55 for the header and footer
bands.
Typography
Heading and body typefaces are Shopify font pickers, so anything in Shopify's font library works. ABC Book ships Playfair Display over Roboto, 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 ABC Book 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.