Create a banner

Build a banner from a starter template and publish it to your storefront.

This is the whole path, from an empty Banners page to a bar a shopper can see.

The app embed has to be on, or nothing the app builds will render on your storefront. See Turn on the app embed.

1

Open Banners and start one

In the app menu, click Banners, then Create banner.

If this is your first one, the page shows Create your first banner with the same button in the middle.

The Banners page before you have made one.

2

Pick a starting point

A dialog opens with ten starters, grouped by what they're for. Click one on the left and the preview on the right shows the bar as it will sit on a page.

Group	Starters
Sale and urgency	Flash sale, Black Friday, Selling fast, Sticky footer
Discount code	Discount code, Welcome offer
Shipping	Free shipping, Shipping cutoff
Announcement	Announcement, New arrivals

Under the preview, small labels say what's inside — Text, Countdown, Button — and where it sits.

Prefer to build from nothing? Choose Start from blank at the foot of the list.

Click Use this template.

Every starter can be changed afterwards — nothing in it is fixed.

3

Name it

The builder opens. At the top left, replace the name with something you'll recognise in the list — "Black Friday top bar", not "Banner 3".

The counter beside the field shows how much room is left.

4

Write what the bar says

The Content panel lists the elements in the bar. Click one and its settings open in the column on the right.

• Click Text to change the message

• Click Countdown to set the end date

• Click Button to change the label and where it goes

• Drag the handle at the left of a row to reorder

• Add element puts a new one at the end

See Bar content and elements for what each element can do.

Pick an element on the left, change it on the right.

5

Style it

Open the Design panel — the brush icon in the rail.

Set the background, the text and accent colours, how much room the bar takes, and whether shoppers can close it. See Design a banner.

6

Choose where it goes

Open the Placement panel — the third icon in the rail.

• Top of the page pushes the page down; Bottom of the page pins it to the foot of the screen

• Stay on screen keeps it in view as the shopper scrolls

• Conditions decide which pages get it — leave it on All pages to show it everywhere

• Devices limits it to desktop or mobile

• Schedule turns it on and off by itself

See Where a banner appears.

7

Check the preview

The middle of the builder shows the bar on a stand-in storefront page. The two icons at the top switch between the desktop and mobile widths — worth a look, because a bar that reads well on a laptop can be cramped on a phone.

8

Set it Active and save

Beside the name, switch from Draft to Active, then click Save.

Draft saves the banner without showing it to anyone. Active is what puts it on the storefront.

A banner has to be Active before a shopper can see it.

9

Look at your storefront

Open your shop in a new tab and reload. The bar should be at the top or foot of the page.

Not there? Work through Countdown not showing — the same checks apply to banners.

If the button needs a link

A button set to Open a link needs a URL before the banner can be saved as Active. The starters come with /collections/all already filled in, so change it to wherever you want shoppers to land.

Next steps

• Bar content and elements

• Design a banner

• Animation and groups

• Where a banner appears