Sticky Announcement Bar

Topic summary

A user needed help making an announcement bar sticky on their Shopify store (Trade theme). They already had a functioning sticky header but the announcement bar wouldn’t remain visible during scrolling.

Solutions Provided:

Two community members offered nearly identical CSS-based solutions:

  • Navigate to Online Store → Themes → Edit Code
  • Locate the theme.liquid (or password.liquid) file
  • Insert custom CSS code just before the closing </body> tag
  • Save changes

Both solutions included code snippets and visual examples showing the sticky announcement bar in action.

Outcome:

The issue was resolved — the original poster confirmed one solution worked perfectly. The fixes used CSS positioning to make the announcement bar follow the page on scroll, similar to the existing sticky header behavior.

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

Hi! I’m having a bit of trouble coding a sticky announcement bar for my website. I already have a sticky header which works fine, although the announcement bar won’t follow on scroll. Any assistance would be greatly appreciated!

Theme - Trade

Website: https://wxccqp-af.myshopify.com/

Password: bowgla

2 Likes

Hi @ShopElle

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like

Hey @ShopElle

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find password.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

Thank you so much this solution worked perfectly!

1 Like