This is one of the most-asked questions in the Shopify community — people build a custom announcement bar, get it looking right, and then realize it scrolls away with the rest of the page instead of staying pinned like the header does.
The fix normally means finding your theme's CSS file, locating the right selector, and adding a position: sticky rule without breaking anything else on the page. With Claude connected via ShopMCP, you just describe what you want.
The exact prompt
Copy this into Claude
"Make my announcement bar sticky so it stays visible at the top of the page when customers scroll down, the same way my header does."
Claude finds your announcement bar section, adds the correct sticky positioning, and publishes it to your live theme — usually in under 10 seconds.
What happens behind the scenes
- Claude reads your theme's header and announcement bar files to find the right CSS selector
- It adds
position: sticky; top: 0; z-index rules scoped to just that bar, so nothing else on your page is affected
- It checks whether your header is also sticky, and adjusts the stacking order so they don't overlap
- The change publishes directly to your live theme
Before any theme change: duplicate your live theme first (Shopify Admin → Themes → ••• → Duplicate). Takes 10 seconds and gives you an instant rollback if anything looks off.
Want Claude connected to your own store?
ShopMCP does this kind of edit — and hundreds of others — directly from a conversation.
Install ShopMCP