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!