Overlay Announcement Bar on Dawn Theme

Store Design
, , , ,

Topic summary

Goal: make Dawn theme’s announcement bar a semi-transparent (about 50%) overlay, and optionally limit it to the homepage while keeping product pages opaque.

Key solutions proposed:

  • Quick CSS via Theme settings: Online Store > Themes > Customize > Theme settings > Custom CSS. Set background-color: rgba(0, 0, 0, 0.5) on #shopify-section-announcement-bar. (RGBA’s last value is the alpha channel controlling transparency.)
  • Overlay approach via code edit: In Assets > base.css, add a rule for the announcement bar (position: absolute; z-index; width/height; background: rgba(0,0,0,0.5)) to create an overlaid bar. A screenshot was provided showing the visual result.

Homepage-only request:

  • Use a Liquid conditional in theme.liquid before : wrap the relevant code with {% if template.name == ‘index’ %} … {% endif %} so the semi-transparent overlay applies only on the homepage, leaving other pages unaffected.

Status: Concrete CSS and Liquid steps were shared; the original poster has not confirmed the final outcome. Discussion appears open.

Summarized with AI on December 15. AI used: gpt-5.
4

To make your announcement bar in the Dawn theme 50% transparent, you can add custom CSS in the theme editor. Try adding the following code to your Online Store > Themes > Customize > Theme settings > Custom CSS section:

css

Copy code

#shopify-section-announcement-bar { background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value for transparency */ }

This will set the background color to black with 50% transparency while keeping your white text visible!