📢 Announcement banner

Make announcements, run promotions, or highlight store updates with attention-grabbing banners.

To get started: Go to Create Banner → Select Announcement Banner.

👉 First time creating a banner? Follow this quick step-by-step guide to learn how to create and publish your first banner.

At the Components > Elements section, you’ll find the Banner type option with 3 types to choose from. Each type has its own behavior and settings:

1. Single Banner

A simple, static banner – perfect for short, clear messages.

How to set it up:

• Go to Components > Elements > Banner type → select Single banner

• Below, you’ll see 3 tabs for editing:

1.1. Edit Content

• Write your banner message here.

• Use the rich text toolbar to format (bold, underline, emojis, links, images...). Note: Highlight the text you want to format, then click the toolbar to edit.

• Select font style.

• Optionally tick “Adjust font size for mobile” for better mobile viewing.

1.2. Add Call to action

• Add a CTA button (e.g. “Shop Now”) to encourage clicks.

• Customize the button’s text, link, color, and style.

1.3 Adjust other elements

• Enable or disable the Close (X) button.

• Add a coupon code if needed. Note: Make sure to create the discount code in your Shopify admin first, then enter the exact code here to display it on the banner.

2. Running Banner

How to set it up:

• Select Running banner

• Edit each tabs:

2.1. Content

Manage multiple announcement items.

• Click “Add announcement” to add text or image blocks.

• Click each block to edit its content.

• Drag and drop to reorder or delete items.

• Rich text formatting and font options available as with Single Banner.

2.2. Adjust other elements

• Add a link to make the entire banner clickable.

• Optionally enable a close button to let visitors dismiss the banner.

2.3 Change scroll direction or speed Go to Styles > Animations to adjust direction (left/right) and speed.

3. Rotating Banner

How to set it up:

• Select Rotating banner

• Edit each tabs:

3.1. Content

• Click “Add announcement” to create slides.

• Each slide can have text, icon, link.

• Click to edit content, drag to reorder.

• Font and formatting options are also available.

3.2. Adjust others elements

• Add a link to make the entire banner clickable.

• Enable navigation arrows if you want visitors to manually switch slides.

3.3. Change slide effect and timing Visit Styles > Animations to adjust transition effect, delay, and loop speed.

• To change speed or transition effect → Go to Styles → Animations

💡 Tips:

• Preview your banner on desktop and mobile to make sure it fits well

• Combine with targeting settings to show banners on specific pages or devices

💬 If you have any related questions, please contact us via Live chat or [email protected] for further assistance.