Announcement bar
Hello there! We're thrilled to have you here. Let's get started on setting up your Announcement bar. This guide will walk you through each step, so you'll be up and running in no time!
1. Selecting a Preset
First, please choose a preset for your Announcement bar.
2. Adjusting Settings
Next, let's customize the content and action of your Announcement bar.
Bar Content: Here, you can adjust the content displayed on the Announcement bar.
Announcement Message: Please enter the announcement message you'd like to display.
Bar Action: This is where you can select the action of the Announcement bar.
Enable Click on Bar: If enabled, you can customize the Announcement bar as a link. When enabled, additional fields such as Clickable link, Open link new tab, Click Type, and Button Text will be displayed.
Clickable Link: Please enter the link you want to display when the Announcement bar is clicked.
Open Link in New Tab: Check this option to redirect the page to a new tab.
Click Type: You can choose between "Make the bar clickable" and "Insert a clickable button into the bar".
Button Text: Please enter the content to be displayed on the button.
Show Close Button: Enable this to display a close button on the Announcement bar. Clicking the close button on the Announcement bar will hide it for the duration entered in "Close the bar for".
3. Display
Now, let's choose the theme and display position of the Announcement bar.
Select Theme: Please select a display template for the bar.
Position: Please select the display position of the Free shipping bar. You have the following options:
Top of the page (push down content): The bar is displayed at the top of the page, and will not scroll down as the page is scrolled.
Stick at the top of the page (push down content and visible while scrolling): The bar is fixed at the top of the page and will scroll down as the page is scrolled.
Fixed Top (overlap the content and visible while scrolling): The bar is displayed and fixed at the top of the page, overlapping the header. The bar will scroll down as the page is scrolled.
Fixed Bottom (overlap the content and visible while scrolling): The bar is displayed and fixed at the bottom of the page. The bar will scroll up as the page is scrolled.
4. Placement
Next, choose the page to display the bar.
All Pages: Check this option to display the bar on all pages.
Specific Page: Check and select the pages allowed to display the bar.
Advanced Settings: Let's customize some advanced settings.
Style: Here, you can customize the font size, color display on the bar.
Font Family: Please select a font to display for the Free shipping bar.
Font Size: Please select the size of the text.
Font Weight: Please select the boldness of the text.
Padding: Adjust the distance between the bar and the border.
Opacity: Adjust the transparency.
Text Color: Please select the display color for the text.
Bold/Italic Text Color: Please select the display color of bold/italic text on the bar.
Background Color: Please select the display color of the bar's background.
Background Image: Select a background image for the bar. If left empty, no background image will be displayed, or you can upload the background image you desire.
Button Text Color: Please select the display color for the button text.
Button Background Color: Please select the display color for the button background.
Display: Let's customize the bar display.
Show on Devices: Please select the devices on which the bar will be displayed.
Active Date:
Start Date: Please select the date to start displaying the Free shipping bar.
Start Time: Please select the time to start displaying the bar.
End Date: Please select the date to end displaying the Free shipping bar.
End Time: Please select the time to end displaying the bar.
Show on Country:
Show on All Countries: Select this to display the Free shipping bar in the store in all countries.
Show on Selected Countries: Select the countries where you want to display the Free shipping bar in the store.
Show on All Countries Except: Select the countries where you do not want to display the Free shipping bar in the store.
Exclude Page to Show: Check and select the pages where you do not want to display the bar. You can select Custom to enter the URL of the page where you do not want to display.
Custom CSS: Enter CSS to customize the bar to your liking.
You can follow your customizations on the preview screen on the right.
And there you have it! You've successfully set up your Announcement bar. Enjoy, and don't hesitate to reach out if you need any further assistance.
Last updated
