How To Add Another "Red" Price To The Product Title When The Product Is On Sale?

How To Add Another "Red" Price To The Product Title When The Product Is On Sale?

KimGottwald
Trailblazer
196 0 28

Hello,

can someone tell me how to add this modification to the product when its on sale?

How it looks now:

KimGottwald_0-1698217704630.png

 

How it should look:

KimGottwald_1-1698217704642.png

 

 

Im using the Brooklyn theme: aliudclothing.com

Thank you!

 

Kim

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
8548 1686 1693

Hi @KimGottwald 

Go to your Online store > Themes > Edit code > open product-grid-item.liquid, find this line of code 

{{ product.price | money_without_trailing_zeros }}

Replace it with this code 

<span style="text-decoration: line-through;">
{{ product.compare_at_price | money_without_trailing_zeros }}
</span>
<span style="color: red;">
{{ product.price | money_without_trailing_zeros }}
</span>

Save your file  

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

KimGottwald
Trailblazer
196 0 28

Thank you, sadly also the normal prices are now red, how can I change that?

Dan-From-Ryviu
Shopify Partner
8548 1686 1693

Please update previous code to this 

{% if on_sale %}
  <span style="text-decoration: line-through;">
  {{ product.compare_at_price | money_without_trailing_zeros }}
  </span>
  <span style="color: red;">
  {{ product.price | money_without_trailing_zeros }}
  </span>
{% else %}
  {{ product.price | money_without_trailing_zeros }}
{% endif %}

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

KimGottwald
Trailblazer
196 0 28

Please help.

Dan-From-Ryviu
Shopify Partner
8548 1686 1693

Please update code like this 

            {% if on_sale %}
              <span style="text-decoration: line-through;">
              {{ product.compare_at_price | money_without_trailing_zeros }}
              </span>
              <span style="color: red;">
              {{ product.price | money_without_trailing_zeros }}
              </span>
            {% else %}
              {{ product.price | money_without_trailing_zeros }}
            {% endif %}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.