How can I change the format to display price before compare?

[BasicallySuper]

Hi, I am trying to switch format it so that the price comes before the compare. I also would like to get rid of the sale icon as well if that’s possible.

I’d also be nice if it could make these changes to the product page and collections.

My product page is https://basicallysuperhuman.com/products/train-like-a-superhero-ebook

Thank you!

[made4Uo]

Hi @BasicallySuper ,

I understand that you want to swap the position of the prices and remove the sale tag. Since your collection, product card and product page share the same code, this should also affect the said sections. You can follow the instructions below

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the base.css file
3. Add the code below at the very end of the file

.price__container .price__sale {
    display: flex;
    flex-direction: row-reverse;
}

span.badge.price__badge-sale.color-accent-1 {
    display: none;
}

The result here:

[BasicallySuper]

Hi @made4Uo ,

It got rid of the sale icon, but it still keep them at the same format as before.

I forgot to mention this, but my theme is Refresh if that helps.

Thank you!

[made4Uo]

Hi @BasicallySuper ,

Sorry about that. For some reason, the base.css does not get specificity. Please try placing the code to the component-price.css under the asset folder.

1. From your Admin page, go to Online store > Themes > click the three dots > Edit code
2. Find the Asset folder, and open the component-price.css file
3. Add the code below at the very end of the file

.price.price--large.price--on-sale .price__sale {
    display: flex;
    flex-direction: row-reverse;
}

[GemPages]

Hello @BasicallySuper ,

You can follow these steps:

1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team