Announcement Bar

The Announcement Bar is a simple but powerful, dual purpose section that helps you highlight your USP’s, build trust and credibility and highlight any promotions, discounts, or important store updates at the very top of your site.

Here’s how to set it up properly:

Adding The Section To Your Store

1. Open your theme editor
2. Click on “Add Section”
3. Find and add the “Announcement Bar” Section from the block library

Styling The Section

The Announcement Bar lets you style and customize a top-of-site banner for your brand! It’s perfect for showcasing promotions, key updates, or trust-building messages in a visually engaging way.

Use the settings below to style the block to your preferences and create your desired look.

You can also use the Announcement Bar section in a static or as a scrolling banner to highlight your value proposition and any current promotions you are running, right at the top of your page. By default, it comes with a single static text placeholder.

Below is a list of all the general settings found on all sections built inside Surge Theme.

• Background Color
  
  

  • Set the backdrop of the gallery. Transparent blends with the page background.
    
    

  • Use a subtle solid color if you want images to stand out more.
    
    

• Font Family
  
  

  • Default: Use your global theme fonts to style the section.
    
    

  • Custom: Allows you to select an alternative font to style this section
    
    

  • Example: Montserrat is a clean and legible font for modern looking stores.
    
    

• Title Color / Subtitle Color / Verified Text Color / Body Text Color
  
  

  • Titles: Sets the colour of the blocks main headline
    
    

  • Subtitles & Body Text: Sets the colour of the subtitle and card copy
    
    

  • Verified Text: sets the colour of the “Verified Customer” tagline.
    
    

• Section Width
  
  

  • Full Width: Block spans the entire width of the screen.
    
    

  • Contained: Adds side margins for a neat look.
    
    

• Padding (Desktop & Mobile)
  
  Controls spacing around the gallery elements both horizontal and vertical
  
  

  • Example: Desktop Horizontal = 70px (wide margins).
    
    

  • Mobile Horizontal = 15px (compact for small screens).
    
    

• Display On
  
  Choose where to show the section. Default: All Devices.

• Static Text

        Add your static announcement texts.

• Link For Static Text

       Link your announcement texts to any pages e.g. Collections,             Products, Pages, Blogs etc.

• Custom CSS

      Add custom styles to this section only.

? Best Practice: Use bold, easy-to-read fonts. Avoid small sizes that may be hard to read on mobile.

Update: