Fix Countdown Timer in Prestige Theme

Topic summary

Goal: Keep a countdown timer fixed (sticky) while scrolling in the Shopify Prestige theme.

Proposed fix (accepted): Add custom CSS in theme.liquid (Online Store > Edit Code > theme.liquid) just above the closing tag to:

  • Add padding to the header: padding-top: 80px !important; (prevents overlap when making the timer fixed)
  • Fix the timer bar’s section: position: fixed !important; width: 100% !important; z-index: 10 !important; (keeps it anchored on scroll, full width, above other content)
  • Target used: section ID similar to sections–22687056101640__countdown_condensed_yrj8Kz.

Outcome: The store owner confirmed the solution worked (“perfect”). The helper offered further assistance. No further issues were raised.

Notes:

  • “Fixed” positions an element so it stays visible while scrolling; “z-index” controls stacking order.
  • Screenshots were shared to show before/after positioning but are not required to apply the fix.

Status: Resolved; no open questions.

Summarized with AI on December 10. AI used: gpt-5.

Hello,

can anyone help me to fixed the Position of the Countdown Timer If I am scroll down..

2 Likes

Hey @MS2333

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.header {
    padding-top: 80px !important;
}
section#shopify-section-sections--22687056101640__countdown_condensed_yrj8Kz {
    position: fixed !important;
    width: 100% !important;
    z-index: 10 !important;
}
</style>

RESULT:

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like

perfect, thank you that worked

1 Like

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.