Section #87 - Announcement Bar
Section description
Features Breakdown: Announcement Bar Slider This section is a modern, rotating announcement bar designed to replace the static "Top Bar" of your theme. It supports multiple messages (slides) that autoplay or can be navigated manually, perfect for highlighting shipping offers, sales, or guarantees.
1. Slider & Layout
-
Slides per View: Control how many announcements appear at once on Desktop (1 to 4). On Mobile, it always shows 1 slide for readability.
-
Separators: Option to show a vertical line between slides on Desktop (useful when showing multiple messages side-by-side).
-
Autoplay: Toggle automatic sliding and set the speed (in seconds).
2. Content Blocks (Announcements)
-
Flexible Items: Add unlimited announcement blocks.
-
Block Settings: Each block contains:
-
Text: The message (e.g., "Free Shipping over $50").
-
Icon: Built-in SVG library (Shipping, Return, Check, Star, Tag, Gift, Alert) or a Custom Image upload.
-
Link: Make the entire announcement clickable.
-
Overrides: Set a specific Background Color, Text Color, or Icon Color for just that block (great for highlighting a "Sale" message in red).
-
3. Typography & Icons
-
Font Control: Use the global Theme Font or force a specific Custom Font.
-
Sizing: Independent sliders for Text Size and Icon Size for both Mobile and Desktop.
-
Spacing: Adjust the gap between the Icon and the Text.
4. Navigation (Arrows)
-
Visibility: Show/Hide navigation arrows independently on Mobile and Desktop.
-
Styling: Customize Arrow Size, Icon Size, Background Color, Icon Color, and Border.
5. Styling & Colors
-
Global Colors: Set the default Background (supports Gradients), Text, Icon, and Border colors for the whole bar.
-
Borders: Add top and bottom borders with adjustable thickness to separate the bar from the header.
6. Spacing & Visibility
-
Container: Choose between Full Width or a constrained Max-Width.
-
Padding: Fine-tune Top/Bottom padding and side padding (Custom or Theme).
-
Device Targeting: Options to hide the section on Mobile Only or Desktop Only.
Compatibility
- This section is compatible with any Shopify Theme.
- Once bought you can use as you want in all your shops.
- This section is Mobile & Desktop friendly
- This section is made with 100% Pure liquid code ( the same as Shopify native sections ). It won't slow down your store.
How to install
Nos produits sont fabriqués localement et dans le monde entier. Nous sélectionnons soigneusement nos partenaires de fabrication pour garantir que nos produits sont de haute qualité et d’un juste rapport qualité-prix.
You may also like
- Access to all sections
- Compatible with all Shopify themes
- Use in all your stores
- New sections every week