How to make a sticky price while scrolling in Dawn theme

Store Design
,
4

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.

2 Likes