Announcement bar

Section

Highlight key updates, promotions, or urgent messages at the top of the site.

Available blocks

Used to share a custom message.

Used to display a discount code.

Used to highlight free shipping offers.

🤔 How to show promotional info (Announcement, CTA button) on the announcement bar?

Want to display promotional messages on the announcement bar? Here's how:

STEP 1:

Under the Announcement bar section, add the Announcement block.

You can add up to 3 Announcement blocks.

STEP 2: Add the announcement

Click on the Announcement block to open its setting panel and customize these:

• Choose an Icon to show on the bar.
• Add Text you want to display.
• (Optional) Enter a Link to which users will be directed when clicking the announcement text.

STEP 3: Add the CTA button

Still in the Announcement block setting panel, customize these:

• In the Button label field, enter the text for a CTA button (e.g., "Shop Now", "Learn More").
• Insert the destination URL for the button.
• Choose the button style: Primary, Secondary, Text link.

STEP 4:

Click "Save".

🤔 How to add a discount code to the announcement bar?

Want to include a discount code in the announcement bar? Here's how:

STEP 1:

Under the Announcement section, add a Promo code block.

STEP 2: Add the promotional message

Click on the Promo code block to open its setting panel and customize these:

• Choose an Icon to show on the bar.
• Enter the promotional message in the Text field.
• Paste a Link that the text should link to.

STEP 3: Add the coupon code

Still in the Promo code block setting panel, customize these:

• Coupon code: Input the discount code you want to show users.
• Customize the coupon color.

⚠️ Note: To make the coupon code available to use, you need to set it up in your Shopify admin. Read Shopify guide for further information.

STEP 4:

Click "Save".

🤔 How to add a countdown timer to the announcement bar?

Want to drive more sales with a countdown timer on your announcement bar? Here's how:

STEP 1:

Click on the Announcement or Promo code block where you want to add a countdown timer.

STEP 2: Enable the countdown timer

To display a countdown timer on the bar, you need to add the {count_down} variable to the Text field.

STEP 3: Set up the countdown timer

Still in the Countdown timer setting group, customize these configs:

• Timezone: Choose the timezone in which the countdown will operate.
• End Date/Time: Specify the date and time when the countdown should conclude. The timer will then show the remaining time from the present to the end date.

STEP 4:

Click "Save".

🤔 How to add a free shipping message to the announcement bar?

Want to show a free shipping message on the announcement bar? Here's how:

STEP 1:

Under the Announcement section, add a Free shipping block.

STEP 2:

Click on the Free shipping block to open its setting panel and customize these:

• Icon: Choose an icon to display next to your free shipping message.
• Default message: Enter the message shown when the cart is empty (Example: "Free Shipping for all orders over $80").
• Progress message: Display a dynamic message when the customer's cart value is below the free shipping threshold. Use {amount_to_fs} to automatically calculate the remaining amount.
• Success message: Set the message that appears when the cart qualifies for free shipping.
• Link: Add a URL that the free shipping message can link to (e.g., shipping policy or promo details).

STEP 3:

Click "Save".

🤔 How to manage the function settings of the whole Announcement bar section?

Want to manage the function settings such as choosing carousel style or enabling region/language selector? Here's how:

STEP 1:

Click on the Announcement bar section to open its setting panel.

STEP 2:

You can customize these settings:

STEP 3:

Click "Save".

🤔 What customization options can you give your Announcement bar?