Discounted price on the product page in Dawn

Store Design
1

Hi, I am trying to display a fixed discount on the dawn theme.
Editing main-product.liquid with this code:

{%- when 'price' -%}

            
              {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
            
              ~~{{ current_variant.price | money }}~~
               **{{ product.price | times: 0.80  | money }}**

Screen Shot 2022-07-11 at 2.04.05 PM.png
Screen Shot 2022-07-11 at 2.04.05 PM.png1006×1032 48.4 KB

this is works, but how do I make original price strikethrough and discounted price next to it ($395 $316)?

2

Hi @User1233 ,

You do not need to edit the code for this. Just place a compare price on your product

3

@made4Uo
The problem with “compare at price” is that I have to manually go thru each item and adjust the prices. Also, another problem with “compare at price” is that the discount is not displayed in the checkout or on the receipt.

4

@User1233 ,

You are right. If your way works for you, here is the code to place a strikethrough on original price.

  1. Go to Admin > Online store > Themes > Actions > Edit code
  2. Go to Asset folder, and open the base.css file
  3. Add the code below.
.price--large span {
    text-decoration: line-through;
}
5

@made4Uo

thanks! that worked, but how do I put the discounted price next to the original price?
like this: $395 $316

6

hi @User1233 ,

Can you provide your website? If you are hesitant on sharing to everyone, just send me a private message

7

@made4Uo

The current website is on the old Brooklyn theme:
https://diamondshoaljewelers.com/collections/luminox/products/leatherback-sea-turtle-giant-0320-series

I am trying to transition to the new Online Store 2.0 Dawn theme