Re: How to make a sticky price while scrolling in Dawn theme

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.

banned

View solution in original post

Replies 9 (9)

Danishshopdev
Shopify Partner
163 17 20

Please share url of the website

banned
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.

banned
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?

banned
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

banned
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?