Skip to main content

The Topbar

The topbar is the thin strip that sits at the very top of your website, above your logo and menu. It is the first thing a visitor sees, so it is the ideal place for a short, reassuring message: your best selling points, a way to reach you, or a single announcement such as a sale or opening hours.

You manage it under Design → Topbar. There is nothing to code and nothing to place by hand: you pick a layout, fill in a couple of fields, and it appears on your live site (as long as your theme uses the topbar). Switch it off and the strip disappears completely, with no empty gap left behind.

Turning it on or off​

At the top of the screen is a single Show topbar switch.

  • On: the bar appears on every page of your website.
  • Off: no strip is shown at all. Your logo and menu simply move up to the top.

You can leave everything else configured and just flip this switch when you want the bar to appear (for example only during a sale).

Choosing a layout​

The topbar comes in two ready-made layouts. Pick the one that fits what you want to say using the Standard and Text buttons. A live preview underneath shows exactly how your choice will look before you save.

Standard: your USPs and contact details​

The Standard layout shows your unique selling points (USPs) on the left and your contact details on the right. It is the best choice for building trust: free shipping, a returns promise, and a phone number, all visible at a glance.

You control two things:

  • How many USPs to show (1, 2 or 3). These come straight from your USPs list, in the order you set there. Keeping the number low keeps the bar short and readable, especially on phones.
  • Which location's details to use. The email address and phone number are pulled from one of your saved locations, so you never type them here and they stay correct everywhere. Choose a specific location, or leave it on First location to use your main one automatically.

Because both the USPs and the contact details are read live, editing your USP list or your location updates the topbar too, with nothing to re-enter.

No USPs yet?

If the bar looks empty in the Standard layout, you probably have not added any USPs. Add them first under USPs, then come back and they will appear here.

Text: a single announcement line​

The Text layout shows one centered line of text across the bar. Use it for a short, timely message such as "Free shipping this week only" or "Closed on public holidays".

You type the message in a small editor. You can:

  • Add basic emphasis and a link (for example linking a sale message to the sale page).
  • Insert an emoji from the quick emoji buttons to make the message stand out.

Keep it to one short sentence. The line is meant to be scannable, not a paragraph.

Colours​

Under Colours you set the bar's background colour and text colour with a colour picker or by typing a hex code (for example #111111). These use your theme's topbar colour, so changing them here also updates that theme setting and keeps your site consistent. Pick a background that stands out a little from the rest of your header, and a text colour with enough contrast to stay easy to read.

Saving and previewing​

Every change is reflected in the live preview at the bottom of the screen straight away, so you can see the result before committing. When you are happy, save, and the bar goes live on your website.

Frequently asked questions​

Why is my topbar not showing on my website?​

Check three things: the Show topbar switch is on, the chosen layout actually has content (at least one USP for Standard, or some text for Text), and your active theme supports the topbar. If the layout is empty, nothing is shown on purpose so you never get a blank strip.

Where do the email and phone in the Standard layout come from?​

From your saved locations under Settings → Locations, not from the topbar screen. Pick which location to use (or let it use your first one). Update the location and the topbar updates with it.

How do I change the selling points in the bar?​

The Standard layout reuses your central USPs list. Edit them there (their text, icon and order) and the topbar follows. On the topbar screen you only choose how many to show.

Can I show both my USPs and an announcement at the same time?​

No, the topbar shows one layout at a time: either the Standard bar (USPs and contact) or the Text bar (one line). Switch between them whenever you like.

It looks crowded on mobile. What can I do?​

Show fewer USPs (set it to 1 or 2) and keep any text message short. A shorter bar always reads better on a small screen.