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. The editor has a single Theme section select next to the page title; choosing an option switches the form below it. In order, the options are General, Logo & Identity, Socials, Theme, Page Layouts, Advanced, Loader and Storefront Mode. The editor opens on General. 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.
Open branding from the sidebar
On the new admin sidebar (v2), open the Online store group and choose Store branding. It opens the Theme editor
directly on Logo & Identity (the address ends in ?section=branding), so you land on the logo, favicon and brand
colour controls below without clicking through. The Theme item in the same group opens the editor without choosing a
section, and only one of the two is highlighted at a time: Store branding while you are on Logo & Identity, Theme
otherwise. In the command palette, searching for logo, favicon, brand colours or identity finds Store branding.
Choosing a Look & Feel option from the Theme section select (General, Logo & Identity, Socials, Theme, Loader or
Storefront Mode) updates the address to match, so a section you are on can be bookmarked or shared; Page Layouts and
Advanced switch the form without changing the section value.
Store branding opens the wrong section, or the old address does not work
The old /store-branding address now redirects to the Theme editor. Use the sidebar item (or add ?section=branding
to the Theme address) to land on Logo & Identity. The section name must be exactly one the editor knows; an unrecognised
value is ignored and the editor opens on its default section.
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.
Favicon or dark logo not sticking after Save?
The Dark logo and Favicon are saved together with the main logo, and the saved values now persist across a reload. Saving one asset does not clear the others: if you only change the favicon, your logo and dark logo stay as they were. If a favicon looks unchanged in the browser tab after a successful save, reload the storefront and clear the browser's cached tab icon, as browsers cache favicons aggressively.
Use the store-wide logo and name in the Header
The current Store Editor points its Header Brand block back to these store-wide values instead of asking you to maintain a second copy. Go to Online Store → Theme → Page Layouts → Header → Main Bar, then select Edit logo on the Brand block.
- Under Content, Logo display chooses Current design, Image, Brand name, or Image and brand name. Link sets where the brand opens for customers, and Tagline supplies optional copy.
- The current name is read-only here. Change in Site-wide → General opens the store-wide Store name field; when it is blank, the Header panel says No store name set.
- Under Design, the desktop/mobile Logo size inputs (16 to 240 px) are enabled once the header has a logo to draw: an image set on the header, an unsaved logo in the Header Navbar draft, or the logo uploaded under Site-wide → Branding. With none of these they stay disabled.
- Under Behaviour, Show tagline can hide the tagline without clearing its text.
The canvas reflects the draft while you work. Select the top-bar Save action to persist it; if the action changes to Retry, your edits are still present and the save needs to be sent again.
Logo size is disabled in the Header
Use Site-wide → Branding to upload the logo image first. If you only set a store name under Site-wide → General, choose Brand name as the Header's Logo display; there is no image to resize yet.
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 Body 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.
Loader tab: the pinned selected-loader panel
Go to Online Store → Theme → Look & Feel → Loader. Pick a loader from the categories list (Loader categories); the card at the top shows the loader you have Selected, with its settings strip beneath it.
When you scroll the preset list far enough that this top card leaves the screen, a copy of the same card and settings strip is pinned at the top of the scrolling area, so you can keep changing the loader's settings while you browse presets. The pinned panel sits inside the editor's own scroll pane, so it follows that pane rather than the browser window and no longer overlaps the left rail or the bottom save bar, which stay fixed. Scroll back up and the pinned copy disappears. Nothing is saved until you use the save bar.
The pinned loader panel is missing or overlaps something
It only appears after the top Selected card has scrolled out of view inside the editor pane. If it does not show, scroll the preset list down; if you see an old overlapping layout after an update, reload the admin panel.
Loader tab: upload your own loader
Instead of a preset, you can show your own animation while your storefront loads.
Open the Custom Loader card
Go to Online Store → Theme → Look & Feel → Loader and find the Custom Loader card (badge Upload your own). It shows the accepted formats as chips: SVG (500 KB), Lottie (1 MB), GIF (1 MB) and PNG (1 MB).
Upload the file
Drop the file on Drop your loader file here, or select browse files. Only SVG, Lottie JSON, GIF and PNG files are accepted. An SVG over 500 KB, or a Lottie JSON, GIF or PNG over 1 MB, is refused with a message such as GIF files must be under 1 MB. An unsupported type shows Unsupported file type. Use SVG, Lottie JSON, GIF, or PNG. The server also checks the file itself: a file renamed to a different type, an SVG that contains scripts, or a Lottie file that is not valid JSON is refused with Custom loader upload failed. Please try again.
Confirm and save
On success the toast reads Custom loader saved successfully, the loader type switches to your custom file, and the top card shows it as Uploaded loader with its file name, size and type. Use Replace to upload a different file or Remove to delete it. Then use the save bar to save the theme.
Your custom loader is stored separately from your store logo. Uploading, replacing or removing a loader does not change the logo shown in your storefront header, or the logo under Logo & Identity.
Logo changed after an earlier loader upload
Before this fix, a custom loader upload could overwrite the store logo, because it was saved through the logo upload. If your logo was replaced by a loader file on an earlier upload, upload the logo again under Logo & Identity. It is not restored automatically.
My custom loader does not show on the storefront
Check that the loader type on the Loader tab is the custom one (the top card says Uploaded loader), then save the theme and reload the storefront. A file that fails the server check is not saved, so the previous loader stays in place. Re-export the file at a smaller size and upload it again.
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.
- The customer is on the Login or Register page of a store that offers Google sign-in. On those two pages the chat button steps aside on purpose (the floating cart button does too), so it never covers the Continue with Google button near the bottom of the screen. It comes back as soon as the customer leaves the page, for example after signing in or browsing on. Stores that do not offer Google sign-in keep the chat button on Login and Register, and the Forgot password page is not affected. To check, open a product or the homepage rather than the sign-in pages.
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. The floating cart button is also hidden on the Cart page itself, so on that page it does not cover the order summary.
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.