Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Set up announcement bar
  • Change color scheme
  • Choose rotation style
  • Customize slideshow style
  • Change scroll duration and direction
  • Add announcements

Was this helpful?

  1. Header

Announcement bar

Last updated 6 months ago

Was this helpful?

The Announcement bar displays rotating announcements at the top of every page. Let customers know about current promotions, new products, or other need-to-know updates with links to more info.

  • Add up to 3 announcements with links

  • Display announcements as rotating slideshow or scrolling text

  • Change announcement bar colors

  • Enable sticky bar to keep announcments visible

Set up announcement bar


  • Show announcements on all pages or homepage only

  • Enable sticky bar to keep visible when scrolling

  • Change the text size of announcements

Click Announcement bar section to find settings

Setting
Description
Options

Show on homepage only

Choose to show announcement bar only on the home page or on all pages.

Default: Enabled

Enable sticky announcement bar

When enabled, the bar remains visible at the top of the screen when scrolling down the page.

Never Default Desktop Mobile Both

Text size

Adjust the size of the section text from small to large.

Small Medium Default Large

Change color scheme


Choose rotation style


The announcements have two rotation styles. The Slideshow style rotates announcements vertically. The Scrolling text style scrolls announcement text across the screen continuously.

Click Announcement bar section to find settings

Setting
Description
Options

Style

Display announcements as rotating slides or as a scrolling ticker.

Slideshow Default Scrolling text

Customize slideshow style


Click Announcement bar section to find settings

Setting
Description
Options

Auto-rotate announcements

When unchecked, visitors can click to view the next announcements.

Change every

Display each message between 4 to 15 seconds before rotating.

4 - 15 sec

Default: 4

Change scroll duration and direction


Click Announcement bar section to find settings

Setting
Description
Options

Scroll duration

Set the number of seconds it takes for announcements to scroll from beginning to end.

5 - 45 sec

Default: 10

Scroll direction

Choose to scroll content towards the left or right.

Left Default Right

Add announcements


Add up to 3 announcements with rich text and alternate text for mobile screens.

Click the arrow next to the Header section, then click (+) Add Announcement. Click an announcement block to add text.

Click Announcement block to find settings

Setting
Description
Options

Text

Enter a text as a storewide message. We recommend between 4 and 8 words.

Default: "Free worldwide shipping..."

Text on mobile

Enter alternate text to display on mobile.

Select a set of colors to apply to the bar background and text. You can add and define different color schemes in Theme settings > Colors. .

Learn more