How to show the 'sale price' discount on cart page?

[Alohaem]

Hi everyone,

Hi guys,

I would like to add a price tag that says how much people save when they add a product to their cart that’s on sale. I just want to implement this for every product that people add to their cart when it is on sale. I’m using the Sense theme. Any help would be greatly appreciated, I’ve been looking for days now!

[DaisyVo]

Hi @Alohaem ,

Can you share with me your store URL?

Normally, the price tag will be shown directly, not sure why it does not show on your end.

May I ask if there are any products that have discount?

Look forward to your response.

Best,

Daisy

[Dan-From-Ryviu]

Hi @Alohaem

You can replace the original code of main-cart-items.liquid file with this code.

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- unless settings.cart_type == 'drawer' -%}
  
{%- endunless -%}

{% schema %}
{
  "name": "t:sections.main-cart-items.name",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Here is the code of save tag so you can customize after adding

[Alohaem]

Hi @DaisyVo ,

Thank you for your quick answer. There’s a misunderstanding here. I meant I want to show the Sale price comparison in cart page. I linked an example down below of what I’m trying to achieve.

How To Show Sale Price Comparison In Cart

[Alohaem]

Hi @Dan-From-Ryviu ,

Thank you for your quick answer. There’s a misunderstanding here. I meant I want to show the Sale price comparison in cart page. I linked an example down below of what I’m trying to achieve.

How To Show Sale Price Comparison In Cart

[Dan-From-Ryviu]

Do you mean Final Sale price tag?

[Alohaem]

The final sale price is already displayed on the cart page (see the first picture linked below). What I’d like to show on the cart page is the original price crossed out, the amount the customer is saving due to the sale discount, and then the final sale price (see the second picture)

.