Reduce height of announcement banner on Spotlight theme

Store Design
,

Topic summary

A user working with the Spotlight theme on their Shopify store (outerlayer.com.au) needed to reduce the announcement banner height and font size across all pages, on both desktop and mobile.

Solution provided:

  • Navigate to Edit code in the theme editor
  • Locate the base.css file
  • Add custom CSS at the end of the file:
    • slideshow-component.announcement-bar { height: 35px !important; }
    • p.announcement-bar__message { font-size: 10px !important; }

Outcome:
The solution was confirmed working by the original poster. Two community members (LizHoang and B2Bridge) provided identical CSS solutions with screenshots demonstrating the reduced banner height and smaller text size.

Status: Resolved successfully.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hey there!

I’m using spotlight theme.

My URL is www.outerlayer.com.au

I want to reduce the height of the announcement banner on desktop and mobile on all page****s.

I would also like to reduce the font size of the announcement banner text.

![Screenshot 2025-02-27 at 12.11.01 PM.png|387x458](upload://5lyGsrVWTAqSV2eG36nkX46lWjg.png)

Would really appreciate your help!

Thanks!

2

@LizHoang Is this something you’re able to assist with? :grinning_face_with_smiling_eyes:

3

Hi @Lizzo333

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

slideshow-component.announcement-bar {
    height: 35px !important;
}

p.announcement-bar__message {
    font-size: 10px !important;
}

Result

LizHoang_0-1740621033815.png
LizHoang_0-1740621033815.png438×153 64.6 KB

Best,

Liz

1 Like
4

Hi @Lizzo333
I hope you are well. You can follow our instructions below:

Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

Here is the code for Step 2:

slideshow-component.announcement-bar {
    height: 35px !important;
}
p.announcement-bar__message {
    font-size: 10px !important;
}

Screenshot_3.png
Screenshot_3.png364×792 145 KB

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you :heart_eyes:

1 Like
5

Awesome, thanks @LizHoang ! :grinning_face_with_smiling_eyes:

1 Like
6

Thanks so much for this! :grin: it works