How to make a sticky price while scrolling in Dawn theme

[xjj0124]

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

[Danishshopdev]

Please share url of the website

[xjj0124]

Cassette Cordless Roller Blinds – My Store (df27e9-3.myshopify.com) pwd:lolyoh

[Danishshopdev · 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.

[xjj0124]

It worked! Thank you so much and merry Christmas!

[xjj0124]

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]

did you paste the first code or second one?

[xjj0124]

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]

Okay. no problem

[rvanderspuy]

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?

[StarCat]

The code needs to be added to the theme code, file: assets/base.css

Add it at the very bottom so you can easily find it again if you need to.

Depending on the product template you have, you may also need to edit the name of the div:

div#price-template--21852144599343__main

 this should be div#whatever-your-price-template-is-called

If you don't know what it's called, you can find out by right clicking your product page, going to the Inspect tool and finding the price element. Make sure you are looking for the div that holds the price, not the price itself.

For example, in my product template (Dawn, modified template) the price div is called "div#price-template--17700298293445__main".

I also adjusted some of the other css settings to match my template and get the look how I wanted. If you're new to css I recommend looking up a resource website like W3Schools or freeCodeCamp. There are many, those are just two I use occasionally.

Best of luck!