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, enable a WhatsApp chat button, 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 four sub-tabs: General, Logo & Identity, Socials, 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.
Support email also receives your contact-form notifications
Support email doubles as the notification address for your storefront's Contact Us form and footer newsletter sign-up (Marketing → Form Submissions and Marketing → Newsletter). If a row in Form Submissions shows status Failed, the most common cause is that Support email is blank — set it here and new submissions will notify you correctly (past ones aren't retried).
Social links
Go to Online Store → Theme → Look & Feel → Socials. The tab now shows two social-link cards, stacked one above the other — Social Links (new) and Social Handles — plus the WhatsApp Chat Button card described below.
Social Links (new): an ordered, editable list
The Social Links (new) card (2026-09-03) lets you add any number of platforms, including ones outside the curated set below, and control the order and visibility of each one:
| Control | Effect |
|---|---|
| Platform select (per row) | Pick a known platform (Facebook, Instagram, X, YouTube, LinkedIn, TikTok, and others) or Custom |
| Label field | Only shown when Platform is Custom — the text customers see for that link |
| URL field | The link's destination |
| Move up / Move down (arrow icons) | Reorders that row in the list — this is the order links render in your footer |
| Visibility switch | Toggle off to keep a link saved but hidden from the storefront, without deleting it |
| Remove (trash icon) | Deletes that row entirely |
| Add platform | Adds a new row, defaulting to the next platform you haven't already added (or Custom once you've added them all) |
Below the list, the Appearance controls style every link in this list:
| Control | Values | Effect |
|---|---|---|
| Layout | Default / Horizontal / Vertical | Default follows the footer template's own arrangement. Horizontal/Vertical force the row of icons to lay out side-by-side or stacked |
| Icon style | Default / Borderless / Circular / Rounded / Square | Default is a plain icon with no border. The other three wrap each icon in a bordered box shaped circular, rounded-corner, or square |
| Custom border (switch) | Off by default; only enabled once Icon style is not Borderless | Reveals Border style (Solid/Dashed/Dotted), Width (px), Color, and Radius (px) fields for the icon's border box |
| Icon size (px) | Blank = default | Sets each icon's width and height |
| Icon gap (px) | Blank = default | Space between icons |
| Section gap (px) | Blank = default | Saves correctly, but has no visible effect on any of the platform's shipped footer templates today — nothing in the current renderer reads it |
| Alignment | Default / Left / Center / Right | Left/Center/Right forces the whole row's horizontal alignment; Default follows the template |
Leaving a field blank keeps the design's own default
Every Appearance field starts blank/Default and only overrides the design when you explicitly set it — an untouched card doesn't change how your existing footer's social icons look.
Social Handles: the classic fixed-platform fields
Below Social Links (new), the Social Handles card is the original fixed set of six platforms. Add the URL for each one 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.
You don't have to type https:// — and links open in a new tab
You can type just the bare handle or domain (for example instagram.com/yourstore) and the field
adds https:// for you automatically when you save. This also protects you from a broken link: if
a protocol-less URL were saved as-is, the browser would treat it as a path on your own storefront
instead of an external site, so the icon would silently lead nowhere. Every social icon — in the
footer, the mobile navigation menu, the maintenance page, and the About/Contact pages — opens the
link in a new browser tab, so customers never lose their place on your store.
Which card wins if you fill in both?
The two cards edit different saved data, and Social Links (new) takes over the moment you touch it. As long as you've never added a row in Social Links (new), your storefront's footer renders from the classic Social Handles fields exactly as before. The moment you add a row in Social Links (new) and save, that ordered list becomes the one your footer reads from — editing Social Handles afterwards no longer changes what customers see in the footer. Don't fill in both expecting them to merge; pick one card and use it. One edge case to know: if you remove every row you've added (leaving the list empty but saved), the footer shows no social icons at all rather than falling back to Social Handles — delete the whole thing back to never-touched only by clearing it through your browser's undo before saving, or simply keep at least one row.
Why do the footer and the mobile menu show different social links?
As of this write-up, only the storefront footer reads the new Social Links (new) ordered list. The mobile navigation drawer's social icon row still reads the classic Social Handles fields only, regardless of what you've set in Social Links (new). If you've moved off Social Handles entirely, the mobile menu keeps showing whatever was last saved there (or nothing, if it was never filled in) even though the footer is showing your new list correctly. Keep both cards in sync until this is fixed if your storefront's mobile menu also needs to show social icons.
WhatsApp chat button
Go to Online Store → Theme → Look & Feel → Socials (its own tab, alongside General, Logo & Identity, and Loader). Below Social Handles, the WhatsApp Chat Button card controls a floating button that lets customers open a WhatsApp chat straight from your storefront.
Off by default
The button ships disabled for every store, new and existing. Turning it on is a deliberate opt-in — nothing changes on your storefront until you flip the switch on this card and save.
Turn it on
The switch in the card's top-right corner enables the button. While it's off, every field below is greyed out.
Set the WhatsApp number
The WhatsApp number field is where customers' chats land. It starts pre-filled with the WhatsApp number you set in Business details and contact information above — leave it as-is to reuse that number, or type a different one here if you want this button to go to a different line than your general contact number.
Enter the number in international format with the country code, e.g. +911234567890. An invalid
number (missing country code, too short, or a leading zero right after the +) shows an error
under the field and blocks Save until it's fixed.
Write a prefilled message (optional)
The Prefilled message field is the text that's already typed in the chat box when a customer taps the button — for example, "Hi! I'd like to know more about...". Leave it blank and the chat opens with an empty message box.
Choose where it sits
Under Placement, two dropdowns and two number fields position the button:
| Control | Options |
|---|---|
| Horizontal | Left edge / Right edge |
| Vertical | Top / Middle / Bottom |
| Horizontal offset (px) | 0–320, distance from the chosen edge |
| Vertical offset (px) | 0–320, distance from the chosen edge |
A small preview box below the fields shows roughly where the button will sit as you adjust these.
Save
Save persists the toggle, number, message, and placement together with the rest of your branding settings.
What customers see
Once enabled and saved, the button appears as a green circular WhatsApp icon on every page of your
published storefront — it's part of the site chrome, not tied to a specific page or template.
Tapping it opens wa.me in a new browser tab, pre-addressed to your configured number with your
prefilled message (if you set one), so the customer never loses their place on your store.
On mobile, if you also use the floating Cart button and both land in the bottom-right corner, the WhatsApp button automatically stacks above the cart button so they don't overlap.
Not a validated phone number, even after Save
The Save-blocking check above only runs in the admin panel's form — it doesn't stop a bad number
from ever reaching your storefront (for example, if the value was set another way). If the number
saved to your account isn't a real international WhatsApp number, the button still renders, but
tapping it opens a broken or empty wa.me link. Double-check the number is correct, digits only
after the +, with country code.
Why don't customers see the WhatsApp button?
Check these in order:
- The switch on the WhatsApp Chat Button card is off. It's disabled by default — confirm it's switched on and that you saved after turning it on.
- You're looking at the editor preview, not your live storefront. The button intentionally doesn't render inside the branding/theme editor's preview panel — it only appears on your published storefront. Open your actual store URL in a separate tab to check.
- The WhatsApp number field is empty. If neither the widget's own number nor your General tab's WhatsApp number is set, the button has nowhere to send the chat and doesn't render at all.
It shares the corner with the mobile cart button
If you've placed the chat button in the bottom-right corner on mobile and your storefront's floating cart button is also enabled, the chat button automatically stacks above the cart button so the two never overlap. This adjustment only happens on mobile viewports and only for the bottom-right corner — the cart button never appears on desktop or in other corners.
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.