Announcement bar

Layout, content and available controls for Announcement bar.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Sticky behavior: Choose the presentation or source that fits this component.Options: None · Sticky on scroll up · Always sticky
Columns desktop: Adjust within the range offered by the theme editor.
Columns mobile: Adjust within the range offered by the theme editor.
Desktop spacing: Adjust within the range offered by the theme editor.
Mobile spacing: Adjust within the range offered by the theme editor.
Show separator between blocks: Enable or disable this option and preview the result.
Section width: Choose the presentation or source that fits this component.Options: Page · Full
Show social icons: Uses links from Theme settings → Social media. Empty links are hidden.
Social icon sizeConditional: Adjust within the range offered by the theme editor.
Social icon spacingConditional: Adjust within the range offered by the theme editor.
Show country / region selector: Appears when Shopify Markets has more than one available country.
Show currency beside countryConditional: Enable or disable this option and preview the result.
Show language selector: Appears when more than one language is published.
Selector text sizeConditional: Adjust within the range offered by the theme editor.
Show side utilities on mobile / tabletConditional: Places utilities below the announcement on smaller screens.
Space between side utilities and announcementConditional: Adjust within the range offered by the theme editor.
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Legacy color sourceConditional: Preserved for saved sections.Options: Use color scheme · Custom colors
Color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Background gradient (optional)Conditional: If set, overrides the solid background color above.
TextConditional: Choose a local color when the relevant custom source is enabled.
LinkConditional: Choose a local color when the relevant custom source is enabled.
Border / dividerConditional: Choose a local color when the relevant custom source is enabled.
Divider thickness: Adjust within the range offered by the theme editor.
Line styleConditional: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted
Line colorConditional: Choose a local color when the relevant custom source is enabled.
Enable mobile slider: Enable or disable this option and preview the result.
Enable desktop slider: Enable or disable this option and preview the result.
TypeConditional: Choose the presentation or source that fits this component.Options: Infinite · Slide
Enable autoplayConditional: Enable or disable this option and preview the result.
Autoplay speedConditional: Adjust within the range offered by the theme editor.
Product pages to hide the section on: Enter product handles separated by commas (e.g. product-1, product-2)
Display the section on specific product pages only: Enable or disable this option and preview the result.
Specific product pages to display onConditional: Enter product handles separated by commas
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.