Store Branding: Logo, Colors, Fonts & Contact Info
Upload your logo and favicon, set your brand colours and fonts, fill in your business and contact details, add social links, and preview it all before you save.
Your brand identity — logo, colours, fonts, and contact details — is the style guide every page of your store follows automatically. You set it once in one place and it carries through your header, footer, invoices, and emails.
Screen: Online Store → Theme → Look & Feel. The tab opens on three sub-tabs: General, Logo & Identity, and Loader. This page covers General and Logo & Identity — your store-wide theme (colour scale, spacing, corner radius, motion) lives in the separate Themes top-level tab, covered in The Theme Hub.
Logo and favicon
Go to Online Store → Theme → Look & Feel → Logo & Identity.
| Asset | What it's for | Recommended size | Formats | Max size |
|---|---|---|---|---|
| Main logo | Shown in your header and on emails | 400×100px | PNG, SVG, WebP | 5MB |
| Dark logo | Alternate version for dark backgrounds and dark-themed sections | 400×100px | PNG, SVG, WebP | 5MB |
| Favicon | The small icon in the browser tab | 32×32px or 180×180px | PNG, ICO | 1MB |
Upload a file, and a preview thumbnail appears immediately next to the uploader. Uploading a new file replaces the old one — there's no separate "remove" step needed if you're just swapping the image.
Invalid or oversized files are rejected
Files are validated for type and size before upload. An unsupported format (anything other than PNG, JPG, SVG, or WebP for logos; PNG or ICO for the favicon) or a file over the size limit is rejected with an error, and your previous logo stays in place.
Brand colours and fonts
Still in Logo & Identity, the Brand Colors section has three colour pickers:
- Primary — your main brand colour, used for buttons, links, and primary actions.
- Secondary — used for secondary elements.
- Accent — used for highlights and calls to action.
Each picker accepts a HEX value directly (e.g. #6366f1) or you can use the colour swatch. Changes
reflect in the branding preview immediately — nothing applies to your live store until you save.
Below the colour pickers, the Typography section lets you choose your primary font from a curated list of Google Fonts (Inter, Roboto, Open Sans, Playfair Display, Montserrat, Lato, and more). A live preview updates as you select a font so you can see how your headings and body text will actually look.
Starter presets are faster than picking each token by hand
If you'd rather start from a complete look than set colours and fonts individually, use the Theme sub-tab's starter presets, which set colours, fonts, spacing, and corner rounding all at once. See The Theme Hub.
Business details and contact information
Go to Online Store → Theme → Look & Feel → General.
| Field | Notes |
|---|---|
| Store name | Required — the name customers see |
| Legal name | Optional — used on invoices where a registered legal entity name differs from your store name |
| Tagline | Optional, a short slogan |
| Brand description | Optional, a longer description |
| Support email | Validated for correct email format |
| Support phone | Include your country code |
| WhatsApp number | Optional — shown as a contact option where relevant |
| Website URL | Optional |
| Address (line 1, line 2, city, state, postal code, country) | Full mailing address |
| Business hours | Either a day-by-day schedule with open/close times and a timezone, or a single free-text line — plus a closed toggle for full days off |
| Tax ID / GST / VRN | Used on invoices |
Support email, phone, WhatsApp number, and your address feed through to your storefront's Contact page, your footer, and your invoices — you don't need to re-enter them anywhere else.
Social links
Go to Online Store → Theme → Look & Feel → Logo & Identity → Social Handles. Add the URL for each platform you're active on:
| Platform | Field |
|---|---|
https://facebook.com/yourstore | |
https://instagram.com/yourstore | |
| X (Twitter) | https://x.com/yourstore |
| YouTube | https://youtube.com/@yourstore |
https://linkedin.com/company/yourstore | |
| TikTok | https://tiktok.com/@yourstore |
Leave any platform blank if you're not on it — the counter next to the section header shows how many of the available platforms you've filled in. Filled-in links feed the social icons in your footer automatically; you don't set them again in the Footer editor.
Branding preview
The branding screens include a live preview panel showing a mock navbar, hero, and footer rendered with your current draft — logo, colours, fonts, and social icons all reflected instantly. A viewport toggle switches the preview between desktop and mobile so you can check both before saving.
Draft vs. live
The preview always reflects your unsaved draft. Your storefront keeps showing the last saved version until you press Save — so you can experiment freely and discard changes if you change your mind.