Documentation

Everything you need to master ZS Sections

Browse setup guides, settings references, and customization tips for every section in our library.

⌘ K

Welcome to ZS Sections

This documentation covers every section in our library. Use the sidebar to browse by category, or use the search bar to find anything quickly.

⚡

Quick install

Install any section with one click.

🎨

Full customization

Edit colors, fonts, and layout from theme editor.

📱

Mobile-first

Every section is fully responsive by default.

🛡️

Theme-safe

Sections install without breaking your theme.

91 sections documented
Updated regularly
🚀 Get Started

How to install any section

Every section follows the same simple installation flow. Once you've done it once, you'll know how to install all of them.

  1. Browse the library

    Open the ZS Sections app from your Shopify admin sidebar or visit zssections.com.

  2. Click Install on any section

    From a section's detail page, click the green Install button. You can preview the section live before installing.

  3. Choose your target theme

    Select which theme to install into — your live theme, draft theme, or any theme copy.

  4. Add the section to a page

    Open Online Store → Themes → Customize. On any page, click 'Add section' and look for sections prefixed with 'ZS'.

  5. Customize and publish

    Use the theme editor's settings panel to adjust colors, text, and layout. Click Save when ready.

📢 Announcement v1.0

Rotating Announcement Slider

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Geo-targeted Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Multi-message Ticker

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Countdown Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Holiday Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

New Arrival Alert

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Limited Offer Alert

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

App Download Banner

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Email Signup Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Cookie Notice Bar

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Promo Code Reveal Bar

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Dismissible Banner

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Multi-language Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Icon + Text Announcement

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Animated Gradient Bar

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Urgency Flash Bar

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📢 Announcement v1.0

Announcement with CTA button

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Video Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Split Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Slider Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Parallax Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Zoom Effect Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Centered Minimal Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Product Cards

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Countdown

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Reviews

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Background Video Loop

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Floating Elements

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero + Email Capture

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with CTA Buttons

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Fullscreen Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Storytelling Scroll Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Before/After

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Stats Counter

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero with Image Collage

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Dark Mode Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Interactive Hover Hero

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Split Banner 2

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Parallax Banner

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero Video with Feature

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🎯 Hero v1.0

Hero + Action Cards

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Rich Text Block

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Image With Text Overlay

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Image With Text Card

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Multi Column Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Icon List

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Timeline Section

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

FAQ Accordion

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Tabs Content

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Blog Preview

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Video Section

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Team Members

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Mission/Vision Block

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Number Counter

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Comparison Text Block

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Step-by-step Guide

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Expandable Content

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Quote/Testimonial Block

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Content Carousel

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Markdown Content

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Highlight Features Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📄 Content v1.0

Sticky Content Section

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Featured Products

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Product Slider

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Collection Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Product Tabs

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Product Masonry Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Category Tabs Products

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Product List View

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🛍️ Products v1.0

Product Highlight Banner

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⚡ Conversion v1.0

Bundle Offer Block

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⚡ Conversion v1.0

Flash Sale Section

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📦 Upsell & Bundles v1.0

Buy X Get Y

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📦 Upsell & Bundles v1.0

Combo Offer Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
📦 Upsell & Bundles v1.0

Dynamic Bundle Discount

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
💌 Marketing v1.0

Email Popup

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
💌 Marketing v1.0

SMS Capture

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
💌 Marketing v1.0

Spin Wheel Popup

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
✨ Interactive v1.0

Before/After Slider

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
✨ Interactive v1.0

Image Hotspots

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
✨ Interactive v1.0

Product Quiz

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🧭 Navigation v1.0

Mega Menu

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
🧭 Navigation v1.0

Breadcrumb

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Review Slider

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Testimonial Grid

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Video Testimonials

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Instagram Feed

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

TikTok Feed

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Customer Photos Gallery

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Influencer Reviews

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).
⭐ Social Proof v1.0

Customer Logos

Slim banner at the top of your store for promotions, free shipping notices, or important updates.

  1. Add the section

    Search "ZS Announcement Bar" — recommended at the top of every page.

  2. Add announcement messages

    Add multiple blocks for rotating messages.

  3. Set rotation speed

    Choose how often messages change if you have multiple.

  4. Style the bar

    Pick colors that contrast with your header for visibility.

Display
Setting Type Default Description
Background Color color #0F8E5F Bar background color
Text Color color #FFFFFF Color of message text
Font Size range 14px Size of announcement text
Rotation
Setting Type Default Description
Auto-Rotate checkbox true Cycle through messages automatically
Rotation Speed range 5s Seconds between message changes
Repeatable Blocks

Each block has a Message (text) and optional Link URL.

Keep messages under 60 characters so they fit on mobile.
Use high-contrast colors so the bar gets noticed but does not clash.
Link your messages to relevant pages (sales, shipping policy, etc.).

Still need help?

Our team responds to every email within 24 hours.