Choose how your website looks
Start from a ready look, then change fonts, corner shapes, product photo shape, the header layout and colours. Anything you leave blank follows your industry template.
What the Theme page is for
Your website starts from an industry template (Settings → Storefront template). The template decides the layout and a default look. The Theme page paints over it: fonts, corners, photo shape, header and colours.
Every box here can be left blank. Blank means "follow the template". You only change what you want to change.
Changes show on your website after you press "Save theme". Two things save straight away: clicking a look under "Start from a look", and "Reset to template".
- You need the "Manage settings" permission. Without it you see "No access to theme settings".
- There is no custom CSS box. Every choice is from a fixed list or a hex colour, so a typo can't break your website.
Give your website a look in 4 steps
- 1
Pick a ready look
Start from a look
Click one of the five cards. Each card says which shops it suits. The look is saved at once and fills the boxes below.
A look replaces every theme choice you saved before. Pick it first, then fine-tune.
- 2
Set your product photo shape
Product photo shape
Pick the shape closest to how you shoot. Tall phone photos? Choose "Tall, for fashion (2:3)" and, under "Which part of the photo to keep", choose "Keep the top".
- 3
Change fonts, corners or colours if you want
Type & shape, Colours
Choose a Font pairing and a Corner radius. Colours take hex codes like #4D1010. Leave any box blank to keep the template's choice.
- 4
Press "Save theme" and check your website
You see "Theme saved." Open your website on a phone and on a computer. If you don't like it, pick another look or press "Reset to template".
The five ready looks
A look only fills the boxes on this page. Everything stays editable afterwards.
- Editorial luxe: serif headlines, hard corners, no shadow. Apparel, jewellery, decor.
- Clean commerce: neutral sans, soft corners, gentle depth. The safe default for most stores.
- Warm market: friendly humanist type and rounded cards. Grocery, food, local retail.
- Trade utility: dense, high-contrast, square photos. Industrial, building, pharma, B2B.
- Classic heritage: bookish serif on warm paper. Ayurveda, crafts, heritage brands.
Blank means "follow the template" A box that shows "Template default" (or an empty colour box) uses your industry template's value. To go back to the template for one box, clear it and save. To go back for everything, press "Reset to template".
Product photos: shape and crop
"Product photo shape" is the frame every product photo sits in on cards and lists: Square (1:1), Portrait (4:5), Portrait (3:4), Tall, for fashion (2:3), Phone photo (9:16) or Wide (16:9).
When a photo doesn't fit the frame, cards trim it. "Keep the middle" or "Keep the top" decides which part stays. Keep the top keeps faces and necklines.
Product pages always show the whole photo. Only cards and lists are trimmed.
Header layout
Marketplace (the default): a search bar always in view, the delivery location and a Categories menu. It suits large catalogues.
Editorial: your store name in the heading font, Home · Catalog · Contact links, and search, account and cart as icons. It is the boutique look.
With the Editorial header, "Store name size (editorial header)" and "Store name colour" under Fine details change the name. A logo keeps its own size.
What each choice means
Every choice can stay on "Template default".
- Font pairing
- A heading font and a body font that go together: Platform default, Editorial serif, Modern sans, Classic serif or Warm humanist.e.g. Editorial serif for a saree boutique.
- Corner radius
- How round buttons, cards and boxes are, from none (square) to xl (very round).e.g. none for a sharp, luxury look.
- Content width
- How wide the page content gets on a big screen: narrow, boutique, default or wide.e.g. boutique gives a 1100px column.
- Card depth
- The shadow under cards: flat, soft or lifted.e.g. flat for a clean, printed look.
- Header layout
- Marketplace (search bar, Categories menu) or Editorial (store name, simple links, icons).e.g. Editorial for a small boutique.
- Product photo shape
- The frame for product photos on cards and lists.e.g. Tall, for fashion (2:3) for kurtas shot on a phone.
- Which part of the photo to keep
- Which part survives when cards trim a photo to fit.e.g. Keep the top for models' faces.
- Section heading colour
- Home section titles like "New arrivals" in your Brand colour or in Ink (text colour).e.g. Ink for a calm look.
- Product card title font
- "display" uses the heading font on product names; "body" uses the normal text font.e.g. display with Editorial serif.
- Text on primary
- The text colour on top of a primary-coloured button. Use white on dark colours.e.g. #FFFFFF
- Page background
- The colour behind every page.e.g. #FBF7F2 for warm paper.
Undo everything: Reset to template
"Reset to template" removes every choice on this page in one go. You see "Theme reset — your industry template's look is back." Your logo and Branding colours are not touched.
There is no undo for a reset. If you liked a ready look, you can simply pick it again.
Read next
Common questions
- I clicked a look by mistake. Can I get my old theme back?
- No. A look saves at once and replaces your old choices. Pick the look you want, or press "Reset to template" and set your boxes again.
- Why do my product photos look cut off on the home page?
- Cards trim photos to the "Product photo shape". Pick the shape closest to your photos, and choose "Keep the top" if heads or necklines get cut. Product pages always show the whole photo.
- I set a colour on Branding and another here. Which one shows?
- The Theme page's "Primary / buttons" colour wins. Leave it blank here to use the Branding colour.
- Can I add my own font?
- Not yet. Pick one of the font pairings. Each one is a heading and body font that work well together.
- Can I paste my own CSS?
- No. Every choice is from a fixed list or a hex colour, so nothing you type can break the website.
- What does "Template default" mean?
- That box follows your industry template. Change it only if you want something different.
- My colour isn't saving.
- Type a hex code with the #, for example #4D1010. Names like "maroon" are not accepted.
- Does changing the theme change my products or prices?
- No. A theme only changes how pages look. Products, prices, stock and orders stay the same.
- I'm moving from Shopify. Can I match my old look?
- Start with a look, then use the Fine details block. Its choices (hero height, card title size, button style and so on) are made for matching a Shopify Dawn store.