Making the template yours
Set your colors once, put your logo where it belongs, and keep every page, email, and shared link looking like the same business.
Overview
Every template arrives already designed. The type is paired, the spacing is set, and the colors were chosen to work together — so the quickest route to a site that looks like yours is usually a small number of deliberate changes rather than a rebuild.
Three things carry your brand, and they're set in three different places. Colors are a site-wide setting. Logos and the favicon are files, uploaded or designed for you. And the look your emails carry is set separately again. This guide covers all three: where each one lives, and how far each one reaches.
Colors, logos, and the favicon all live in one place — open Sites, choose your site, then open Brand & SEO under Site. Changing them needs Owner or Admin access; Editors and Contributors work in the editor instead, where section colors are still theirs to set.
Setting your brand colors
Brand colors recolor the whole site at once, instead of section by section. You'll find them on Brand & SEO, in the Brand colors card below Logos.
They reach further than the pages you build. Your shop and product pages, the journal, search results, the checkout confirmation, and the order-tracking page your customers are emailed are all drawn by the platform rather than by you — and every one of them follows your brand colors too.
Each row works the same way: a round swatch that opens a color picker, a hex field beside it if you already know the color you want, and a Reset link that appears once you've changed something. Below the three, a live preview of your real home page re-tints as you pick, before anything is saved. There are three colors:
- Accent (buttons & links) — the color that does the work: buttons, links, highlights, and the small flourishes a template uses to draw the eye. If you change one thing, change this.
- Page background — the paper your pages sit on. Most templates use a soft off-white rather than pure white; that warmth is usually worth keeping.
- Text — headings and body copy. Small moves work best here, nudging warm or cool to sit with your accent rather than swapping black for something bright.
Leave a color unset to keep the template's own — an empty slot isn't a gap to fill, and changing the accent alone is often all a site needs. Saving applies to the live site immediately: brand colors are a setting rather than a page edit, so there's nothing to publish.
Coloring a single section
Brand colors move the whole site. The editor moves one section.
Select any section in the editor and its fields include a Background row — a handful of swatches drawn from your template's own palette, with a striped swatch at the start meaning “theme default”. It's how you get a dark band between two light ones, or lift one section off the page.
The two settings meet with one rule worth remembering: a section you've colored by hand keeps that color, and a later change to your brand colors won't move it.
This is the answer to “I changed my brand color and one band stayed the same.” Select that section, set its Background back to the striped swatch, and it follows the site again. Unlike brand colors, a section color is a page edit — it needs publishing before visitors see it, and publishing is per page.
Logos and the favicon
Two logo slots and a favicon sit on the same Brand & SEO page — the logos in their own card, the favicon under SEO.
The slots are named for the artwork, not the background, which is the easy one to get backwards. The light logo is your pale or white artwork, the one that shows against dark; the dark logo is the other way round. Most sites want both, because templates swap between them depending on what sits behind the header.
Upload artwork you already have, or have the AI logo designer draw one from scratch and assign it here in a click.
- Light logo — light or white artwork, shown on dark backgrounds.
- Dark logo — dark artwork, shown on light backgrounds.
- Favicon — the small square in a browser tab, in bookmarks, and on a phone home screen. Square, and simple enough to read at about the size of a full stop.
Your logos aren't only for the site header. They're used at the top of the emails your site sends — and once Stripe is connected on a Store plan, your dark logo, favicon, and accent color are passed to Stripe so the payment page carries your brand instead of Stripe's defaults. Leave a slot empty and your template sets your site's name as a wordmark instead, which looks deliberate rather than unfinished.
Type and fonts
Type is part of the template rather than a setting. Each one ships with a heading font and a body font chosen to work together, then sized and spaced across every block and every screen width — and there's no font picker to override them.
That's worth treating as a choosing decision rather than a limitation. If a template's typography isn't right for you, another one will be, and every template is included on every plan. Browse them with the type in mind and you'll spend far less time fighting it later.
There is one place you do pick a font: email. The Design panel on Email notifications carries a heading font list — serif faces like Playfair Display and Cormorant, sans faces like Montserrat and Raleway — and newsletter campaigns offer the same choice.
The same is true of layout and spacing. What you change on a page is its words, its images, its colors, and which sections appear — not the design system underneath. It's the reason a Tropic Arts site is hard to make look broken.
Letting AI suggest a palette
If you built your home page with the AI website builder, it proposes three color palettes when it's finished — named sets of accent, background, and text, chosen for the business you described. They appear as chips under the chat, alongside an “Original theme colors” chip that puts the template back.
Clicking a chip only previews it: the preview beside the chat re-tints so you can judge the palette on your own page, with your own words in it. Nothing is saved until you press Apply colors.
The AI editor keeps the same controls within reach afterwards — three brand-color circles sit above the chat, and clicking one opens the picker on that slot.
A palette applied here is the same setting as the Brand colors card, so anything you accept can be adjusted or reset in Brand & SEO later. Nothing about it is one-way.
Emails that look like your site
The email your site sends is designed once and shared by all of it. Open your site's settings, choose Email notifications, and open the Design panel.
Design sets the heading font, the background and accent colors, whether there's a colored top bar, and how your logo sits — left or centred, and how large. It applies to every automatic email on that page (order confirmations, shipping updates, refunds, cancellations), to the replies you send from Inbox, and to your cookie banner, which takes its accent and background from the same place so you aren't setting colors twice.
Each individual email also picks a template — Classic, Branded, or Minimal — and the preview beside it is the real thing, rendered with your own logo and colors.
Email colors are set separately from your site's brand colors; they aren't copied across, so it's worth pasting the same hex values into both. Logos are the exception — the emails pick those up from Brand & SEO on their own. Newsletter campaigns are designed one at a time inside the campaign: a layout, a heading typeface, background and accent colors, and up to three images the layout arranges for you.
A brand checklist
Setting a site up from scratch, this is the short version — half an hour of work that carries the whole site.
- Set your accent color first, and watch the live preview before you save. If your background and text still look right against it, leave them alone.
- Upload both logo versions, light and dark, so the header is right whichever way your template runs.
- Set a favicon. Without one, every tab a visitor keeps open shows a blank page icon.
- Add a 1200×630 social share image, so your link looks deliberate the first time somebody posts it.
- Open Email notifications, match the Design colors to your site, and send yourself a test order confirmation.
- Walk your own site on a phone, top to bottom. Section colors are the most common thing to look wrong, and the quickest to put right.
Then leave it alone. The most common way a good site goes wrong is a second round of colors added later, section by section, until nothing quite matches.
Frequently asked questions
That section has a background color set on it by hand, and a hand-set color always beats the site-wide one. Open the editor, select the section, and set its Background back to the striped “theme default” swatch — then it follows your brand colors like everything else. Publish that page afterwards, since it's a page edit rather than a setting.
Not on the site itself. Type is part of the template — a heading font and a body font, paired and sized across every block — and there's no picker to override it. If the typography isn't right for you, another template will suit better, and every template is included on every plan. Email is the exception: the Design panel on Email notifications has a heading font list, and campaigns offer the same choice.
Yes. Every template is wired for them, so the Brand colors card is there whichever one you started from. What differs is where each color lands, because templates use color differently — which is exactly why the live preview under the pickers is worth a look before you save.
No. Leave the others blank and they keep the template's own. Changing the accent alone is the most common version of this, and often the best-looking one — the background and text a designer chose are usually already right for the accent you're adding.
Press Reset on each row you've changed, or clear the hex field. An empty slot means “use the template's color”, so clearing all three returns the site to exactly how it shipped.
The slots are named for the artwork, not the background. Light logo means your pale or white version, the one that shows against a dark header; dark logo is your dark artwork for light backgrounds. It's the easy one to get backwards — if your logo vanishes in the header, you've probably swapped them.
In your site's header, at the top of the emails your site sends, and — once you're selling on a Store plan with Stripe connected — on the payment page, where your dark logo, favicon, and accent color replace Stripe's defaults. The favicon covers browser tabs, bookmarks, and phone home screens.
No. Brand colors are a site setting, so saving puts them live straight away. Section colors set in the editor are page edits, so those do need publishing — and publishing is per page, so a section color you changed on three pages needs all three published.
Your logos, yes — the emails pick those up from Brand & SEO without being asked. The colors, no: an email's background and accent are set in the Design panel on Email notifications and start from a neutral default. Paste the same hex values in and the whole conversation looks like one business.
Twice over. The Brand colors card renders your real home page underneath the pickers and re-tints it as you choose, before you save. And in the AI builder, a palette chip previews on your page and saves nothing until you press Apply colors.
Owners and Admins. Brand colors, logos, and the favicon are site settings, and Editors and Contributors don't have settings access — they work in the editor, where per-section colors are still theirs to set.
Leave the slots empty. Templates fall back to your site's name set as a wordmark in the template's own type, which looks intentional rather than unfinished. When you're ready, the AI logo designer draws one by chatting and finishes with a dark version and a matching favicon.