Solved

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

OLIVERD
Excursionist
44 0 4

Hi guys, 

 

I have a question. 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 have attached an example, which is actually an 'automatic discount' that applied to the cart. I just want to implement this for every product that people add to their cart when it is on sale.

Schermafbeelding 2019-07-05 om 15.22.34.png

 

 

 

 

Besides that, I would like to create a:

- SUB TOTAL: Regular price

- {now I want the same price tag places here with that says: 'SAVE ....'

- TOTAL: Sale price

And then the CHECK OUT button right underneath. 

 

Is there someone that understands my request and wants to help me with this? 

 

Thanks in advance and have an awesome weekend!

 

Oliver

Accepted Solution (1)
BrianAtWork
Shopify Partner
245 59 184

This is an accepted solution.

Hi @OLIVERD,

 

I am doing well, thank you for asking!

 

So, I took a look at your site and made some mockup changes. The only difference between your instructions and the mockup, is that I moved the 'sale tag' next to the line-items. That is how your template was intended to be used based on the way it is coded.

 

How does this look?

 

Screen Shot 2019-07-06 at 1.15.57 PM.png

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

View solution in original post

Replies 63 (63)
QualityPatch
Visitor
2 0 0

Hey, any chance you can help do this on my site? I would love people to see how much they saved when checking out!!

Tommyd2
Excursionist
47 0 6

Hello. 

 

I hope you are well. Are you able to help me implement this on my store please. I am using the dawn theme. Hope to hear from you soon. Not having this is killing my conversion. Thanks. Tom

vinaybaros
Visitor
1 0 0

I need help with my cart in implementing same. Not able to do. Can you help?

giambrons
Visitor
1 0 0

Hi @BrianAtWork ; I'd like to have the same, can you please message me or email me? thank you

mypheme
Visitor
1 0 0

 Hi Brian,

 

Can you please help me too,

 

I'm using Prestige theme, my cart.liquid and cart-template.liquid are as follows:

 

Cart.liquid:

{% include 'elspw_cart' %}
{% section 'cart-template' %}
{% section 'recently-viewed-products' %}
{% render 'nosto-element', id:'cartpage-nosto-1' %}

{% render 'nosto-element', id:'cartpage-nosto-2' %}

{% render 'nosto-element', id:'cartpage-nosto-3' %}

 

Cart-template.liquid:

{%- capture section_settings -%}
{
"type": {{ settings.cart_type | json }},
"itemCount": {{ cart.item_count }},
"drawer": false,
"hasShippingEstimator": {% if section.settings.show_shipping_estimator and cart.item_count > 0 %}true{% else %}false{% endif %}
}
{%- endcapture -%}

<section data-section-id="{{ section.id }}" data-section-type="cart" data-section-settings='{{ section_settings }}'>
{%- if cart.item_count == 0 -%}
<div class="EmptyState">
<div class="Container">
<h1 class="EmptyState__Title Heading u-h5">{{ 'cart.general.empty' | t }}</h1>

{%- if settings.cart_show_free_shipping_threshold -%}
{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}
{%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}

<p class="Text--subdued">{{- 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}</p>
{%- endif -%}

<a href="{{ routes.all_products_collection_url }}" class="EmptyState__Action Button Button--primary">{{ 'cart.general.empty_button' | t }}</a>
</div>
</div>
{%- else -%}
<div class="Container">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ 'cart.general.title' | t }}</h1>

{%- if settings.cart_show_free_shipping_threshold -%}
{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}

<p class="SectionHeader__Description Text--subdued">
{%- if cart.total_price >= threshold_in_cents -%}
{{- 'cart.general.free_shipping' | t -}}
{%- else -%}
{%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
{{- 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}
{%- endif -%}
</p>
{%- endif -%}
</div>
</header>

<div class="PageContent">
<form action="{{ routes.cart_url }}" method="POST" class="Cart Cart--expanded" novalidate>
<input type="hidden" name="attributes[collection_mobile_items_per_row]" value="">
<input type="hidden" name="attributes[collection_desktop_items_per_row]" value="">

{% render 'cart-items' %}

<footer class="Cart__Footer">
{%- if settings.cart_enable_notes -%}
<div class="Cart__NoteContainer">
<span class="Cart__NoteButton">{{ 'cart.general.add_note' | t }}</span>
<textarea class="Cart__Note Form__Textarea" name="note" id="cart-note" rows="4" placeholder="{{ 'cart.general.note_placeholder' | t }}">{{ cart.note }}</textarea>
</div>
{%- endif -%}

<div class="Cart__Recap">
{%- capture shipping_and_taxes_notice -%}{{ 'cart.general.shipping_and_taxes_notice' | t }}{%- endcapture -%}

{%- if cart.cart_level_discount_applications != blank -%}
{%- for discount_application in cart.cart_level_discount_applications -%}
<p class="Cart__Discount Heading u-h6">{{ 'cart.general.discount' | t }} ({{ discount_application.title }}): -<span>{{ discount_application.total_allocated_amount | money_without_trailing_zeros }}</span></p>
{%- endfor -%}
{%- endif -%}

<p class="Cart__Total Heading u-h6">{{ 'cart.general.total' | t }}: <span>{{ cart.total_price | money_without_trailing_zeros }}</span></p>

{%- if shipping_and_taxes_notice != blank -%}
<p class="Cart__Taxes Text--subdued">{{ shipping_and_taxes_notice }}</p>
{%- endif -%}

<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>
</div>
</footer>

</form>

{%- if section.settings.show_shipping_estimator -%}
<div class="Section Section--spacingExtraLarge">
<div class="Panel">
<h2 class="Panel__Title Heading u-h2">{{ 'cart.shipping_estimator.title' | t }}</h2>

<div class="Panel__Content">
<div class="ShippingEstimator">
<div class="ShippingEstimator__Form">
<div class="ShippingEstimator__Country Form__Select Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}
<select name="country" title="{{ 'cart.shipping_estimator.country' | t }}" data-default="{% if customer %}{{ customer.default_address.country }}{% elsif section.settings.shipping_estimator_default_country != '' %}{{ section.settings.shipping_estimator_default_country }}{% endif %}">{{ all_country_option_tags }}</select>
</div>

<div class="ShippingEstimator__Province Form__Select Select Select--primary" style="display: none">
{%- render 'icon' with 'select-arrow' -%}
<select name="province" title="{{ 'cart.shipping_estimator.province' | t }}"></select>
</div>

<input type="text" class="ShippingEstimator__Zip Form__Input" name="zip" placeholder="{{ 'cart.shipping_estimator.zip_code' | t }}">

<button type="button" class="ShippingEstimator__Submit Button Button--primary">{{ 'cart.shipping_estimator.estimate' | t }}</button>
</div>

<div class="ShippingEstimator__Error Alert Alert--error" style="display: none"></div>
<div class="ShippingEstimator__Results">
<div class="ShippingEstimator__ResultsInner"></div>
</div>
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
</section>

{% schema %}
{
"name": "Cart page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_shipping_estimator",
"label": "Show shipping rates calculator",
"default": true
},
{
"type": "text",
"id": "shipping_estimator_default_country",
"label": "Default country to use",
"info": "If your customer is logged-in, the country in his default shipping address will be selected.",
"default": "United States"
}
]
}
{% endschema %}

Hurratul
Visitor
3 0 0

I am also using DEBUT theme. Can you help me with the code please ?

Mike717
Shopify Partner
3 0 0

Hi! I tried implementing your solution on the Dawn theme but it doesn't work. Can you help me out?

 

First of all there is no theme.scss only theme.liquid, and I pasted that initial code at the very bottom after /body
/html

Secondly, I don't have cart-template.liquid

 

I only have 

main-cart-footer.liquid

main-cart-items.liquid

component-cart-items.css

component-cart-css


I tried in each one and it doesn't work.

Would your solution work for the Dawn theme and am I doing something wrong?

Thanks!

QualityPatch
Visitor
2 0 0

I’m gonna be totally honest, I have no clue what your talking about ha. I just launched a template site and added crap to the store… I would love to help you figure it out but you are not speaking my language ha. 🥴

Mike717
Shopify Partner
3 0 0
I added your script to my "Dawn" theme in shopify and it doesn't work.

Was wondering if it works only for some themes and not others.

Thank you!

TheBoatGalley
Tourist
5 0 6

@BrianAtWork seems to no longer active here. I am using Dawn, and I'd like to do this on my store.

 

Anyone got code that will work with Dawn version 5.0, or is there a developer who could do this? 

Tommyd2
Excursionist
47 0 6
I used an app in the end. 4.99usd approx a month all-in-1 discount in cart.
Does the discount codes and breaks down the amount saved.
TheBoatGalley
Tourist
5 0 6

Thanks! I've looked at that and it doesn't show the discount PER PRODUCT just the total. That's my backup if I can't do it this way, but I'd really prefer it the way it's done here.

Belle9
Visitor
1 0 0

Hi! Did you get a solution for this? I'd like to do the exact same thing.

Tommyd2
Excursionist
47 0 6
No I just used an app "all in 1 discount on cart" it's not bad price and
works well.