How can I relocate the announcement bar to the middle of the page?

Topic summary

A user asks how to move Shopify’s announcement bar from its default header position to the middle of the page as a template section.

Proposed Solution:

  • Navigate to Online Store > Themes > Edit code
  • Open the announcement-bar.liquid file in the Sections folder
  • Replace code at the bottom of the file with provided snippet
  • The announcement bar should then appear as an addable section in the theme editor

Current Status:
Another user reports the solution isn’t working for them—they completed step 2 but the announcement bar still doesn’t appear as an available section in their theme editor. The discussion remains open with this implementation issue unresolved.

Note: The conversation includes code snippets and screenshots that are central to the technical instructions but appear garbled in the source text.

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

is there a way to move the announcement bar from the header section to the middle page? as a template section

any help would be appreciated !

https://wigs-luxury.myshopify.com/?_ab=0&_fd=0&_sc=1

test

1 Like

Hi @hasanali1 ,

You can do this by following the instructions below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Section folder and open the announcement-bar.liquid file
  3. Go all the way down, and replace the code shown in the below with the code provided.
"presets": [
    {
    "name": "Announcement bar"
    }
  ]

When you go to the theme editor, and add a section. You should see the Announcement bar as shown in the image below.

1 Like

Hey guys,

I’ve tried and tried and tried this, but it doesn’t work for me. I didn’t see the first section so couldn’t delete it for step 1. I’ve done step 2. But I don’t have the Announcement Bar available as a section.

Could you help?

https://mycosoul.com/