How To Show Discount & Selling Price Breakdown On Cart Page?

[jolicare]

Hi, Shopify pros,

Need a little help here.

There are some small changes that require coding on the theme that we want to do on our cart page.

Theme: Dawn
Link (cart page): www.jolicare.com/cart

Problem:

Currently, we can only show the pricing breakdown for Selling price > Discount price (with the help of an app ‘DiscountYard’)

However, there would be no slashes/breakdowns for selling_price vs compare_at_price. (Without discounts)

Ideal Outcome:
I’ve prepared some illustrations of the changes that we wanna make.
https://www.canva.com/design/DAFGMBVOt4s/gN1WvocVml6lBL38O8n3wQ/view#1

Basically, we wanted to show the pricing breakdown (slashing the prices) on the cart page between:
Compare at price > Selling Price > Discounted price

So that there would be price breakdowns even if customers don’t apply discount code, and there’s a difference between selling_price vs compare_at_prices.

We also want to show the consequential subtotals.

---

*I’ve also tried to look for theme code sections “cart-template.liquid” & “cart.liquid” as referred to in this post here.
https://community.shopify.com/c/shopify-design/how-to-show-the-sale-price-discount-on-cart-page/m-p/535344

Probably because of a different theme, I couldn’t find it.

Appreciate it if anyone can provide a solution to this.

Thank you, thank you in advance!

Warmest Regards
Caleb

* @BrianAtWork *thanks for the reference from previous posts that shed new possibilities for our team.

[Shop_Lovers]

Hi,

Apply your solution in “main-cart-items.liquid” file.

Thanks

[jolicare]

Hi, @Shop_Lovers

Thanks for the response.

However, could you also help to detail the necessary editing that needs to be made?
(Sorry, total beginner here)

Here’s the copy of the code from main-cart-items.liquid

Thanks so much

{{ '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 }}
{{ 'component-loading-overlay.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": "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 %}

[Shop_Lovers]

Hi,

Replace your code with below code, but take backup before adding my 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 }}
{{ 'component-loading-overlay.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": "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 %}

Thanks

Hit Like and Accept as Solution

[jolicare]

Hi @Shop_Lovers

Thanks so much for helping out! Appreciate it.

I’ve pasted your codes, the (compart_at_price vs selling_price) pricing breakdowns worked for a while before I believe the app “DiscountYard” kicked in to revert it back to its original. (selling_price vs discounted_price).

Here are screenshots:
1 - When the page first loaded

2 - When the app DiscountYard loaded

3 - When a discount code is applied

How should we rectify it, please?

Thanks!

[Shop_Lovers]

Hi @jolicare

You need to reach to app support because they changed the price when code applied or app loads.

Thanks