Colours and fonts are most of the work. Ten minutes here makes the site look like your restaurant rather than like a theme.
How colours work here #
In the editor: Theme settings → Colors
You do not pick a colour for every single thing. You set up a small number
of colour schemes, and then each band on a page is told which
scheme to use. Four come ready:
| Scheme | What it is for |
|---|---|
| Dark | The main ground of the site — a deep green-black. |
| Forest | A slightly different dark, used for every other band so two dark sections never run into each other. |
| Cream | Cards. A dish photograph needs something light underneath it. |
| Accent | A loud band. Use it once on a page, at most. |
Inside each scheme you choose four things that matter — background, text,
accent, and button — and the theme works the rest out from them.
You cannot break this
Every colour the theme works out for itself is checked for readability
before it is used. If you pick a pale orange that would leave your text
hard to read, the theme quietly uses something legible instead. You are
free to experiment.
A quick way to make it yours #
Change the Accent colour in all four schemes to the
colour of your brand. This is the single change that does the most — it is the price, the links, the small labels, and the icons.If your restaurant is bright rather than dark, swap the
Dark scheme’s background to your light colour and its text
to something dark. Do the same for Forest, one shade
apart.Leave Cream light either way. Food photographs sit
better on a warm light card than on a dark one.
Example
A seafood restaurant with a pale blue identity: set Dark’s background to
a deep navy and its text to off-white; set Forest’s background one shade
deeper; set the accent in all four schemes to their brass-yellow. Ten
minutes, and nothing else needs touching.
Fonts #
In the editor: Theme settings → Typography
There are two: a Display font for headings, and a
Body font for everything you read in a paragraph. Shopify’s
font list is free to use and already licensed.
- Pick a display font with some character — it is your headings, your
dish names, and your prices. - Pick a body font that is plain and easy. Character in body text becomes
tiring by the third line. - The two size sliders scale everything up or down together. If your
dish names feel small on a phone, nudge Heading size up by
five and look again.
Corners and spacing #
In the editor: Theme settings → Layout
Three corner-roundness sliders — for cards, images and input boxes — and a
Section spacing slider that sets how much air sits between
bands. Sharper corners read as more formal; rounder as more casual. Change
them together rather than one at a time.
