Customising your storefront

Your storefront should look like your brand, not a generic template. Everything that controls its appearance — your store name, web address, logo, hero image, colours, and fonts — lives in one place, and every change goes live on your storefront the moment you save. No developer, no rebuild, no waiting.

You can fill it all in by hand, or paste your existing website and let Zillo set up your colours, fonts, and logo for you.

Where to set this

Open Settings → Branding. A live preview sits beside the form, so you can see each change before you commit to it.

Let AI set up your brand

If you already have a website or an Instagram presence, the fastest way to a polished store is to let Zillo do the first pass.

1. Click "Set up with AI" at the top of Settings → Branding.
2. Paste your website URL, an Instagram handle, or a short description of your brand.
3. Review the result. Zillo suggests your colours, fonts, and logo. Everything lands in the form below — nothing is saved yet.
4. Tweak anything you like, then Save. You stay in full control of the final look.

Your store name and web address

Two fields at the top of the page shape how customers find and recognise you:

• Store name — shown in your storefront header and on every email your store sends. This is customer-facing, so use the name your buyers know you by.
• Store URL — the address of your store, e.g. your-store.zillo.app. Use lowercase letters, numbers, and hyphens. If you change it later, your old address keeps working — Zillo redirects it automatically so saved links and bookmarks don't break.

Colours

Zillo gives you five colour controls. Use the colour picker or type a hex code (like #1a73e8) into each:

• Primary colour — your main brand colour. Used for buy buttons, headings, and key accents. This is the one customers will associate with you, so start here.
• Primary text colour — the colour of text that sits on top of your primary colour (for example, the label on a buy button). Pick something with strong contrast so buttons stay readable.
• Accent colour — used for hover states and subtle highlights.
• Page background — your storefront page background. Leave it empty to keep Zillo's default soft gradient.
• Page text colour — the default colour for body text.

Fonts

You can set two fonts independently, both chosen from the full Google Fonts catalogue (thousands of families, searchable in the picker):

• Heading font — applied to headings on your storefront. If you leave it unset, your body font is used for headings too.
• Body font — applied to the rest of your text.

Your storefront loads whichever fonts you choose automatically — there's nothing to install.

Logo and hero image

• Logo — sits in your storefront header. A PNG or SVG works best. Aim for a wide image around 800 × 200 px (a 4
  ratio) so it sits cleanly in the header without being cropped.
• Hero image — the large banner above your products on your store's landing page. A wide image around 2000 × 667 px (a 3
  ratio) looks best. Use a strong, on-brand photo — it's the first thing visitors see.

What gets your branding (and what doesn't)

Your branding applies to your customer-facing storefront only — product pages, the cart, checkout, and the emails your store sends.

Preview before you go public

Keep your store in draft while you iterate on the look. You and your team can view it at its normal address; the public sees a "Page not found". When you're happy, switch it to published.

Next steps