The Notice Bar will be triggered via an AJAX request when a customer adds a product to the cart.
It’s highly customizable, meaning you can choose the screen position where it will be displayed. You also have full control over the Notice Bar design.
Let’s quickly go through options for better understanding.
To use the functionality, enable the bar first.
Here you can choose the position on the screen where the Notice Bar will be displayed.
Notice Bar will be animated from the side of the screen to the selected position.
- Top Left
- Top Right
- Bottom Left
- Bottom Right
You can fine-tune the Notice Bar position with the margins. Depending on the selected position, you’ll be able to set the vertical and horizontal margins.
You can enter the value of margins with any valid CSS units of measure. The most common units of measure are PX, EM, REM, %, VW, and VH, although there are several more available in CSS.
Notice Bar can be set to be hidden automatically. After successfully adding a product to the cart, it will pop up and be visible for 5 seconds, after which it will fade out to the end of the screen.
The Notice Bar has a close button so the user can dismiss it.
Inherit Progress Bar Settings
If enabled, Notice Bar will display a copy of a Progress Bar that you have set. Just make sure that Progress Bar is enabled.
Your Notice Bar doesn’t necessarily need to look identical to the Progress Bar. You can style it as you wish, change colors, show different messages, or omit animated progress bar and show it in a simpler form.
You can omit Title or Description and it won’t be displayed in Notice Bar, also if you set the progress bar height to 0, progress bar won’t be visible.
This gives you the possibility of various design options. Still, if you have relatively complicated design or layout ideas, you are able to style it as you wish with a couple of lines of CSS, or contact our support team for more help on this matter.