Solved

How to make a sticky price while scrolling in Dawn theme

xjj0124
Tourist
5 0 2

My product has a large number of custom options. When scrolling down to the lower options, the upper price moves off the screen. How can I fix it at the top? You know, like the sticky header.

 

I found an example website:METALLIC Blackout Motorized Zebra Blinds | Go Smart Blinds

Accepted Solution (1)
Danishshopdev
Shopify Partner
163 17 20

This is an accepted solution.

Hello @xjj0124 ,

add this code in your css file at the end,

 

If you want to scroll and sticky the price on mobile and desktop too, then use this code,

div#price-template--21852144599343__main {
    position: -webkit-sticky;
    position: sticky;
    top: 9.5em;
    padding-top: 12px;
    margin-top: 0 !important;
    background: white;
    z-index: 9;
    font-size: .9rem;
    min-height: 50px;
    min-width: 50%;
}

 

and if you want to use this sticky price on desktop only then use this code below,

 

@media (min-width:200px) and (max-width:768px) {
    div#price-template--21852144599343__main {
        position: -webkit-sticky;
        position: sticky;
        top: 9.5em;
        padding-top: 12px;
        margin-top: 0 !important;
        background: white;
        z-index: 9;
        font-size: .9rem;
        min-height: 50px;
        min-width: 50%;
    }
}

 

 If this worked please do like and accept as solution.

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website

View solution in original post

Replies 9 (9)

Danishshopdev
Shopify Partner
163 17 20

Please share url of the website

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
Danishshopdev
Shopify Partner
163 17 20

This is an accepted solution.

Hello @xjj0124 ,

add this code in your css file at the end,

 

If you want to scroll and sticky the price on mobile and desktop too, then use this code,

div#price-template--21852144599343__main {
    position: -webkit-sticky;
    position: sticky;
    top: 9.5em;
    padding-top: 12px;
    margin-top: 0 !important;
    background: white;
    z-index: 9;
    font-size: .9rem;
    min-height: 50px;
    min-width: 50%;
}

 

and if you want to use this sticky price on desktop only then use this code below,

 

@media (min-width:200px) and (max-width:768px) {
    div#price-template--21852144599343__main {
        position: -webkit-sticky;
        position: sticky;
        top: 9.5em;
        padding-top: 12px;
        margin-top: 0 !important;
        background: white;
        z-index: 9;
        font-size: .9rem;
        min-height: 50px;
        min-width: 50%;
    }
}

 

 If this worked please do like and accept as solution.

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
xjj0124
Tourist
5 0 2

It worked! Thank you so much and merry Christmas!

xjj0124
Tourist
5 0 2

Hey Sir, sorry for bother you again, after I add your code, it works fantastic in the desktop, but on the phone page, there is a gap between the header and the price...

Danishshopdev
Shopify Partner
163 17 20

did you paste the first code or second one?

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
xjj0124
Tourist
5 0 2

I believe the issue was caused by the announcement bar being sticky on desktop but not on mobile. So, I've disabled the announcement bar to resolve the problem. Thanks again for your help!

Danishshopdev
Shopify Partner
163 17 20

Okay. no problem

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
rvanderspuy
Visitor
1 0 0

Hi Dani, thanks for this but I'm not sure exactly where to use the code? We also use the Dawn theme. Is it in the "Custom CSS" section in Online store > Themes > Customize > Theme settings > Custom CSS? Or in the edit code section on the theme itself?