How to: Switch Order of Pricing [and] Smaller Pricing on Mobile

Store Design
, ,
1

There are 2 things I need help with. I have Dawn 15.3.0 Theme. Site is: iLovetoGolf.com

  1. I want the sale price to be on the left & the one crossed out on the right. [Photo Below]

Image 6-20-25 at 17.38 2.png
Image 6-20-25 at 17.38 2.png680×719 306 KB

  1. I would like the sizing on mobile to be smaller than on the desktop version, as it takes up too much space. [Photo Below]

Image 6-20-25 at 17.38.png
Image 6-20-25 at 17.38.png469×623 137 KB

2

Hello @ilovetogolf

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

.card .card__information .card-information .price--on-sale .price__sale
{
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: center;
}
@media screen and (max-width: 479px)
{
    .card .card__information .card-information .price--on-sale   .price__sale
{
        gap: 0;
        align-items: baseline;
        justify-content: flex-end;
        flex-direction: column-reverse;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.