Place Announcement Bar Below Header

Store Design
, , , , , , , ,

Topic summary

A user seeks to reposition their announcement bar below the header on a Shopify store using the Stiletto theme. Standard drag-and-drop customization doesn’t work due to custom header coding.

Solutions Offered:

  • Multiple users suggest using the theme customizer’s drag-and-drop interface to reorder sections
  • One user provides CSS code to adjust the announcement bar’s order property, which successfully resolves the initial positioning issue
  • A reference to a similar solved discussion is shared

Current Issue:
After implementing the CSS fix, a new problem emerges: when scrolling, header elements and icons appear behind the announcement bar, creating a layering/z-index conflict.

Status: The discussion remains ongoing. Users request the custom code or store access to diagnose the scrolling overlap issue and provide a complete solution.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello, folks!

I want to place the announcement bar below the header on my website, but I don’t see such an option.

Is there any solution to this issue?

My theme is Stiletto and my website is: https://4svxm0n5yawy71pb-60150284501.shopifypreview.com

Thanks in advance, folks!

2

Hello,** @martujv **I just point out through circle, you can drag and drop after header, easily it will be comes after header
Before

image.png
image.png299×147 5.82 KB

After

image.png
image.png310×135 4.2 KB


Thanks!

3

Hi @martujv

First, change the position here, then add this code in Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl

.shopify-section-group-header-group.announcement-bar__outer-wrapper {
    order: 0 !important;
}

Result:

image_720.png
image_720.png720×270 44.9 KB

image_720.png
image_720.png720×353 42.8 KB

I hope this helps

Best,

Daisy

1 Like
4

Hi @martujv

Go to theme Customization just drag and drop and up or down

example

Hasan112_0-1735913880426.png
Hasan112_0-1735913880426.png1537×258 18.8 KB

If its helpful , please Like and Accept as solution Thanks

5

Hi there! @martujv What theme do you use?, as that could be a factor. In the meantime, try the steps in the reply marked as a solution here https://community.shopify.com/c/shopify-discussions/adding-an-announcement-bar-under-the-header-on-top-of-the/m-p/2290738

6

Hey, I wish it was this easy, it’s the first thing I tried but since I have some custom coding in my header it doesn’t work. Thanks for the reply anyways!

7

It doesn’t work since I have custom coding in my header and dragging won’t help. Thanks for the reply anyways!

8

It’s Stiletto! I tried the code but didn’t change anything, sadly. Thanks for the reply anyways!

9

It worked! Thanks!!

10

However, I noticed that now while scrolling up, the header and its icons are behind the announcement bar:

IMG_2060.jpg
IMG_2060.jpg1170×275 12.5 KB

Is there any way to fix this?

11

@martujv , You can share your code

12

Hi @martujv

You need to add the code so we can see how it works on your store, then we will continue checking it

Best,

Daisy