How to add a title next to the original and sale prices of products on sale in the dawn theme

Technical Q&A
1

Hi I was wondering if there is code to add Text before the pricing on the product pages so it can say something like WAS “original price” then on the second line NOW “Sale price” and to have the sale price as a different colour? We are using the dawn 2.0 theme

Wildbloomsau_0-1665360584199.png
Wildbloomsau_0-1665360584199.png1507×643 113 KB

Wildbloomsau_1-1665360619912.png
Wildbloomsau_1-1665360619912.png1328×541 115 KB

2

Hi,

Can you share your website link? I’m positive that this can be addressed through plain CSS code.

Cheers!

3

Hi,

The link is https://wild-blooms-7915.myshopify.com/ and the password is duteap

Thanks

4

Hi @Wildbloomsau ,

since your original price not visible, therefore CSS is for original price is not their.

Follow below steps to achieve the same.

  1. From Shopify dashboard, go to Online store > Themes > Edit code
  2. In the search box, search for the file named base.scss
  3. Scroll to the very end of this file, and paste this code:
.card-information:before {
    content: "sale price";
    display: inline-block;
    font-size: 12px;
}
.card-information .price {
    display: inline-block;
}
.price__regular .visually-hidden.visually-hidden--inline {
    position: static !important;
    font-size: 14px;
}
1 Like
5

Hi,

Can you share the link of a product page that has both the old price and the new?

As a reference, the below CSS code would add 'Your text:" before the price.

span.price-item.price-item--regular:before {
  content: "Your text: ";
}

GabrielS_0-1665424811253.png
GabrielS_0-1665424811253.png1420×630 126 KB

Cheers!

6

https://wild-blooms-7915.myshopify.com/collections/on-sale

The above page has the collection grid which shows both and here is an individual product page in the link below

https://wild-blooms-7915.myshopify.com/products/peony-spray-large-pink-s4gnb

Thank you so much for your assistance!

7

Hi there,

You can make use of the following CSS code:

span.price-item.price-item--sale.price-item--last:before {
  content: "New price:";
}

The above would add a text before the new price, as in the screenshot below.

GabrielS_0-1665460966248.png
GabrielS_0-1665460966248.png645×588 17.8 KB

To have the same effect applied to different elements it can get pretty tricky, and may require HTML adjustments too. Unless there is someone that can give step-by-step guide on this, I’d suggest to hire a developer - it would be easier and it should be a pretty easy task for someone that knows what is doing.

Cheers!

8

Thanks Gabriel! What part of the CSS would this code be added to as this is exactly what we want :slightly_smiling_face: