How do I show a discount on the product/collection page with the “sale” badge AND in the cart?

[Deno-Silver]

How do I show a discount on the product/collection page with the “sale” badge AND in the cart?

For now, the only options for discounts are:
1. with “compare to price” for each product the discounted price with a sale badge shows only on the product/collection page but not on the cart page.

2. Or with built-on Shopify automatic discounts which show only in the cart but not on the product/collection page.

But there is no option to show both.

I am using Dawn 9.0.0 theme.

[NomtechSolution]

In the Dawn 9.0.0 theme, you can display the "sale" badge on the product/collection page as well as in the cart by making some modifications to the theme's code. Here's how you can achieve this:

1. Open the Dawn theme editor: In your Shopify admin panel, go to "Online Store" and click on "Themes." Find the Dawn 9.0.0 theme and click on the "Customize" button to open the theme editor.

2. Edit the product/collection template: In the theme editor, navigate to the product or collection template where you want to display the "sale" badge. This will depend on whether you want to show the badge on individual product pages or collection pages.

3. Locate the price display section: Look for the section of the template that displays the product price. In Dawn, this is typically found within a block called "product-price" or similar.

4. Add the "sale" badge code: Within the price display section, add the following code to include the "sale" badge markup:

{% if product.compare_at_price > product.price %}
  <span class="sale-badge">Sale</span>
{% endif %}

1. This code checks if the compare at price of the product is greater than the current price, indicating a discount. If so, it adds the "sale" badge to the product.

2. Style the "sale" badge: To ensure the "sale" badge appears visually appealing, you'll need to add CSS styles to your theme. In the theme editor, find the "Edit CSS" or "Additional CSS" option and add the following code:

.sale-badge {
  background-color: #ff0000;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

[CPHAGEN_Nordic]

Hello there.

I am using cascade (I think) on my website: https://cphagen.com/

I am looking for a way to display a SALE sticker when an automatic discount is applied to a collection of products.

Thank you for your help!!!

[HomePlace]

Would this work for the Vantage theme also? "How Do I Show A Discount On The Product/Collection Page With The “Sale” Badge AND In The Cart?" Or if you have any suggestions, it would be really appreciated! Thank you in advance for your help. Tim