This article covers the settings that dress the whole shop at once: the colours, the fonts and the shape of things.
Open it when the theme is nearly right but the colours are not yours yet.
Before you start
- Editing needs the Customize Store Appearance permission.
- Every change here shows on the page as you make it, and stays in your draft until you publish.
Step 1. Open Colours and fonts
At the bottom of the section list, under Global, choose Colours & fonts. These settings belong to the whole shop, not to one block.
Step 2. Set the colours
Under Colours you get a row for each colour the shop uses: Primary, Secondary, Accent, Background, Surface, Card, Text, Muted text, Border, Success, Warning and Error.
Background, Surface, Card and Border can be cleared to no colour at all. The others always need a colour. Any row goes back to the theme's own colour with Inherit theme inside its colour picker.
Step 3. Choose your fonts
Under Fonts you get four choices: Headings (English), Body (English), Headings (Arabic) and Body (Arabic). The Arabic ones can stay on Auto (follows English).
If you pick a font that has capitals only, the panel warns you, because one font serves your titles, your product names and your prices alike.
Step 4. Tune the typography
Under Typography you set Heading weight, Body weight, Letter spacing, Line height, and whether to use Uppercase headings. They are named steps, not free numbers, so nothing here can break a layout.
Step 5. Round the corners
Corner radius runs from None to Pill, and each option in the list draws its own corner so you can choose by eye.
Step 6. Choose how wide the shop sits
Store layout, just below in the same Global group, offers six ways to hold the page: Full background, Full width, Wide, Boxed, Framed and Narrow, each with a line explaining what it does.
Result
The shop on the page repaints as you choose, in your own colours and fonts, on a computer and on a phone alike. Your customers see it when you publish.