BSS: Banner & Pop-up
  • About us
  • How to create a Banner?
    • πŸ“’ How to create a Single Announcement Banner?
    • πŸƒ How do you create a Running/Scrolling/Marquee Banner?
    • πŸ”„ How to create a Rotating/Carousel Banner?
    • ⏳ How to create a Countdown Timer Banner?
    • 🚚 How to use the Free shipping banner?
    • πŸ’° How to use the Discount banner?
    • πŸ“© How to use the Email Signup banner?
    • 🌍 How to Create a Multilingual Banner?
  • How to create a Window Popup?
  • How to create a Sale Pop-up?
  • FAQs?
    • How to Design Window Popups for Desktop and Mobile (Best Practices)
    • What’s the difference between Countdown Timer and Schedule Time?
    • How to Upload and Optimize Background Banner Images
    • How to Setup Conditions for a Banner?
    • How to Setup Conditions for a Sales Pop-up?
    • How to use a Custom position for a Banner?
    • How to Translate Banner Content?
      • Manual Translation
      • Automatic Translation with LangShop
    • How to Add Languages to Your Shopify Store?
    • How to provide the store's collaborator code?
    • How to approve our support request?
  • Contact us
Powered by GitBook
On this page

Was this helpful?

  1. How to create a Banner?

πŸ”„ How to create a Rotating/Carousel Banner?

PreviousπŸƒ How do you create a Running/Scrolling/Marquee Banner?Next⏳ How to create a Countdown Timer Banner?

Last updated 24 days ago

Was this helpful?

What is a Rotating Announcement Banner?

A rotating announcement banner is a type of announcement banner that contains multiple repeating messages. The messages change sequentially on the banner, similar to a slideshow.

Create a Rotating Announcement Banner

Step 1: From the app’s dashboard, select the Banner module β†’ Click the Create Banner button.

Step 2: Choose the Announcement Banner option in the select banner type modal β†’ Click the Select button.

Step 3: Design your banner.

You will see the banner creation interface in a max modal. Here, you will design your banner in the Design tab.

  • In the collapsible Banner type section, select Rotating Banner.

  • Content Settings: Here, you will set up the content that will be displayed on your banner, such as text and actions.

You can enter multiple messages, which will display one after another on the banner. At any given time, only one message will be visible. Click Add Announcement to add more messages.

Select Entire Banner Clickable to make the entire banner clickable. Add the URL where you want to direct users when they interact with the banner.

Selecting Open in New Tab means that clicking on the banner/link/button will open the link in a new tab.

If you check Add Close Button to Dismiss Banner, a close button (an "X") will appear in the top-right corner of the banner. Clicking this button will close the banner, but it will reappear when the page is reloaded.

Show arrow icon to display arrow icons on both sides of the banner. Buyers can click these arrows to view the previous or next message.

  • Position Settings: Choose where the banner will be displayed on your online store.

The banner can appear at the Top of Page, Bottom of Page, or in a Custom Position.

You can also select which devices will display the banner.

  • Style: Customize the banner’s colors, fonts, and other design elements.

You can style the text with various font options.

Choose the background style: Color, Gradient, or Image.

Use Background Padding to adjust the banner’s height, and Background Opacity to set the transparency level.

Additionally, use the Speed option to change the time each message is displayed.

Step 4: Set conditions for the banner.

In the banner creation interface (max modal) β†’ Click the Conditions tab.

Here, you can set various conditions for your banner, including display conditions, customer conditions, product page conditions, scheduling, and country-specific conditions.

Step 5: Preview the banner.

You can preview how your banner will appear in the Preview area on the right.

Select different devices to check if the banner displays correctly.

Step 6: Finally, click Save to save your banner and check the results on your storefront.

For more details, see the article:

For more details, see the article:

How to use a Custom position for Banner?
How to Setup Conditions for a Banner?
Rotating banner
Select banner type modal
Design tab
Banner type
Multiple messages
Action type
Position
Text styles
Animation type and Speed
Conditions tab