Xboost

How to create your first announcement bar

Overview

An announcement bar is a strip of text at the top or bottom of your store, for example "Free shipping over $50" or a sale with a coupon code. This guide walks you through creating and publishing your first bar. You pick a template, then set three steps: Placement, Content and Design.

Before you start

Steps

1. Start a new announcement bar

  1. Open XB: Announcement Bar from Apps in your Shopify admin.
  2. Click Create announcement bar on the dashboard or on the Announcement bars page.
  3. On Select announcement type, click Create an offer on the Announcement Bar card.

Select announcement type page with the Announcement Bar card and its Create an offer button

The other cards on this page belong to other XBoost apps. Their Start free buttons open those apps on the Shopify App Store.

2. Pick a template

  1. Optional: pick a Color theme at the top right. The sun and moon icons switch between light and dark versions.
  2. Click the template you like.

Select template page with eight bar templates and the Color theme picker

You can change the content, colors and background in the next steps. The bar opens in the editor as a Draft with a name like "Announcement 3".

3. Name the bar

Click Edit offer name and type a name you will recognize, for example "Spring sale bar". Shoppers do not see this name.

4. Choose where the bar shows (Placement)

The editor opens on the Placement step. The right side shows a Desktop Preview and a Mobile Preview that update as you change settings.

Editor on the Placement step with the bar name, the Placement, Content and Design steps, and the live previews

For a first bar, keep the defaults: Every Page, Top of page, All countries, and both Desktop and Mobile. Click Next.

For all options, see How to choose where and when a bar shows.

5. Write your message (Content)

  1. Under Announcement Bar Content Tier, click a message to open it.
  2. Change the Title to your own text.
  3. Optional: add a Coupon code and a button under Call to Action.
  4. Click Next.

Content step with the announcement type, settings and the list of messages

For all options, see How to add messages, coupons and buttons.

6. Adjust the look (Design)

Change colors, text size and background if you want. The template values are a good start. See How to customize the bar design.

Design step with General Settings, Text Size and Background settings

7. Publish the bar

Click Publish. The status changes from Draft to Active, and the app shows "Announcement bar published!".

Announcement bar published dialog with the Close and Open preview mode buttons

Click Open preview mode to see the bar on your store, or Close to stay in the editor.

If you are not ready to publish, click Save in the bar at the top of the page. The bar stays a Draft and does not show on your store.

8. Check your store

Open your online store. The bar shows on desktop and mobile.

The published announcement bar at the top of the store on desktop

The published announcement bar on mobile

On the dashboard, go back to the Setup guide and click Everything is great if the bar looks right, or Contact support if you need help.

Troubleshooting

  • Save or Publish does nothing. Go back to the Placement step and check the targeting. For example, if Product Page is selected with Specific products, select at least one product, or choose another option.
  • The bar does not show on the store. See Why is my announcement bar not showing?