Please update the code
Topic summary
Goal: Make a custom announcement bar with a countdown timer stick to the top in the Shrine theme using CSS sticky positioning.
Progress and fixes:
- Initial CSS in base.css didn’t work. Moving the rules to Theme settings > Custom CSS partially worked (free shipping bar sticky, countdown not).
- Encountered “Online store editor cannot be published.” The workaround was to place the CSS in theme.liquid after the , which allowed saving and made the sticky behavior work.
- Updated CSS targeted the header group using the :has(#countdown-banner) selector, set position: sticky, adjusted top offsets, and added a mobile media query to align with the sticky header heights.
Browser-specific issue:
- On Safari (macOS), a small gap appeared between the countdown banner and the announcement bar. After another CSS update, that gap was removed, but a new gap appeared between the announcement bar and the header. The poster then adjusted their CSS and resolved it locally.
Outcome:
- Sticky announcement bar and countdown working, including cross-browser spacing. No further open issues; resolved by combining updated selectors, offset tuning, and relocating CSS to theme.liquid for publishing.