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

Solved
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)

Accepted Solutions
BrianAtWork
Shopify Partner
245 59 168

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 61 (61)
sarhov
Shopify Expert
489 85 167

@OLIVERD 

 

For this you need custom coding to be made in your theme.

I have implemented something similar for this site.

https://www.coupleschoices.com/

it is about 1 hour work for an experienced developer.

Author: Hovhannes Sargsyan (aka sarhov)
Email: shopify@sarhov.com
Website: https://sarhov.com
Try Shopify free for 14 days,

BrianAtWork
Shopify Partner
245 59 168

Hey @OLIVERD,

 

I may be able to help you. What theme are you using?

 

Also, would you mind copying/pasting the contents of your cart.liquid and cart-template.liquid theme files here?

 

Here's how to access your theme files.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
    - The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right.
    - When you click a file in the directory on the left, it opens in the code editor.

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

OLIVERD
Excursionist
44 0 4

Hi Brian, 

 

Thanks for the reply, how are you? 

Here I pasted my cart-template.liquid. I do see your previous work, it looks great! However, I would like the 'SUBTOTAL' to be the lowest one (the 3rd one) and then the regular price on top and scratched and in the middle the lil pricetag with the discount amount. The sale price is the only price in color and the regular price and subtotal are just in black (#3838383). 

Let me know what you can do for me now and what my options are! 

My website it: www.derrins.com, just in case you want to grab a look!

------------------------------------------------------------------------------------------------------------------------------

<div class="page-width" data-section-id="{{ section.id }}" data-section-type="cart-template">

{% if cart.item_count > 0 %}
<div class="cart-header">
<h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
<a href="/collections/all" class="text-link text-link--accent">
</a>
</div>

{% include 'banana-stand-cart-top-container' %}

<div id="bold-cart-msg"></div>
<form action="/cart" method="post" novalidate class="cart">
<table>
<thead class="cart__row">
<th colspan="2" scope="col">{{ 'cart.label.product' | t }}</th>
<th class="text-right" scope="col">{{ 'cart.label.price' | t }}</th>
<th class="text-center small--hide" scope="col">{{ 'cart.label.quantity' | t }}</th>
<th class="text-right small--hide" scope="col">{{ 'cart.label.total' | t }}</th>
</thead>
<tbody>
{% for item in cart.items %}
<tr class="cart__row border-bottom line{{ forloop.index }}{% if forloop.first %} border-top{% endif %}">
<td class="cart__image-wrapper">
<div>
{% include 'hs-image-utils' with image: item %}<img alt="{{ item.title | escape }}" class="cart__image hs-id-150c81f0 lazyload hs-lazyload" data-item-url="{{ item.url }}" data-sizes="auto" data-src="{{ hs_data_src }}" data-widths="{{ hs_data_widths }}" src="{{ item | img_url: '95x95', scale: 2 }}"/>
</div>
</td>
<td class="cart__meta small--text-left">
<div class="list-view-item__title">
<a href="{{ item.url }}" class="cart__product-title">
{{ item.product.title }}
{% if item.quantity > 1 %}
<span class="medium-up--hide"><span class="visually-hidden">{{ 'cart.label.quantity' | t }}</span>(x{{ item.quantity }})</span>
{% endif %}
</a>
</div>

{% unless item.variant.title contains 'Default' %}
<div class="cart__meta-text">
{% for option in item.product.options %}
{{ option }}: {{ item.variant.options[forloop.index0] }}<br/>
{% endfor %}
</div>
{% endunless %}

{% comment %}
Optional, loop through custom product line items if available

Line item properties come in as having two parts. The first part will be passed with the default form,
but p.last is the actual custom property and may be blank. If it is, don't show it.

For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...
{% endcomment %}
{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
<div class="cart__meta-text">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:

{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}

<p class="cart__remove small--hide">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.general.remove' | t }} {{ item.product.title }}">{{ 'cart.general.remove' | t }}</a>
</p>
</td>
<td class="cart__price-wrapper text-right">
{%- if item.original_price != item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}

{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
{%- include 'icon-saletag' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}

<div class="cart__edit medium-up--hide">
<button type="button" class="btn btn--secondary btn--small js-edit-toggle cart__edit--active" data-target="line{{ forloop.index }}" aria-label="{{ 'cart.general.edit' | t }} {{ item.product.title }}" aria-expanded="false">
<span class="cart__edit-text--edit">{{ 'cart.general.edit' | t }}</span>
<span class="cart__edit-text--cancel">{{ 'cart.general.cancel' | t }}</span>
</button>
</div>
</td>
<td class="text-right small--hide">
<div class="cart__qty">
<label for="updates_large_{{ item.key }}" class="cart__qty-label">{{ 'cart.label.quantity' | t }}</label>
<input class="cart__qty-input" type="number" name="updates[]" id="updates_large_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">
</div>
</td>
<td class="text-right small--hide">
{%- if item.original_line_price != item.final_line_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_line_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_line_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_line_price | money }}
{%- endif -%}
</td>
</tr>
<tr class="medium-up--hide cart__update-wrapper">
<td colspan="3" class="text-right">
<div class="cart__update-controls">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0"
class="text-link text-link--accent medium-up--hide cart__update-control cart__update-control--remove"
aria-label="{{ 'cart.general.remove' | t }} {{ item.product.title }}">
{{ 'cart.general.remove' | t }}
</a>
<div class="cart__qty cart__update-control">
<label for="updates_{{ item.key }}"
class="cart__qty-label">
{{ 'cart.label.quantity' | t }}
</label>
<input class="cart__qty-input" type="number" id="updates_{{ item.key }}"
value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-item="{{ forloop.index }}">
</div>
<button type="submit" name="update" class="btn btn--small medium-up--hide cart__update-control"
aria-label="{{ 'cart.general.update' | t }} {{ item.product.title }}">
{{ 'cart.general.update' | t }}
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>

<div class="cart__footer">
<div class="grid">
{% if section.settings.cart_notes_enable %}
<div class="grid__item medium-up--one-half cart-note">
<label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="CartSpecialInstructions" class="cart-note__input">{{ cart.note }}</textarea>
</div>
{% endif %}
<div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">

{%- if cart.cart_level_discount_applications != blank -%}
<div class="order-discount-card-wrapper">
{%- for discount_application in cart.cart_level_discount_applications -%}
<span class="order-discount order-discount--title order-discount--cart">
{%- include 'icon-saletag' -%}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
</span>
<span class="order-discount order-discount--cart order-discount--cart-total">-{{ discount_application.total_allocated_amount | money }}</span>
{%- endfor -%}
</div>
{%- endif -%}

<div class="cart-subtotal">
<h2><span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span></h2>
<h2><span class="cart-subtotal__price">{{ cart.total_price | money }}</span></h2>
</div>

{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
<div class="cart__submit-controls">
<input type="submit" name="update"
class="btn btn--secondary small--hide cart__submit-control"
value="{{ 'cart.general.update' | t }}">
<input type="submit" name="checkout"
class="btn btn--small-wide cart__submit cart__submit-control"
value="{{ 'cart.general.checkout' | t }}">
</div>

{% if additional_checkout_buttons %}
{% endif %}
</div>
</div>
</div>
</form>
{% else %}
<div class="empty-page-content text-center">
<h1>{{ 'cart.general.title' | t }}</h1>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<div class="cookie-message">
<p>{{ 'cart.general.cookies_required' | t }}</p>
</div>
<a href="/" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</div>
{% endif %}
</div>

 

{% schema %}
{
"name": {
"de": "Warenkorb-Seite",
"en": "Cart page",
"es": "Página de carrito",
"fr": "Page du panier",
"it": "Pagina del carrello",
"ja": "カートページ",
"nl": "Winkelwagenpagina",
"pt-BR": "Página do carrinho",
"zh-CN": "购物车页面",
"zh-TW": "購物車頁面"
},
"settings": [
{
"type": "checkbox",
"id": "cart_notes_enable",
"label": {
"de": "Warenkorb-Notifikationen erlauben",
"en": "Enable cart notes",
"es": "Habilitar notas de carrito",
"fr": "Activer les notes de panier",
"it": "Abilita note carrello",
"ja": "カートメモを有効にする",
"nl": "Notities voor winkelwagen inschakelen",
"pt-BR": "Ativar observações sobre o carrinho",
"zh-CN": "启用购物车备注",
"zh-TW": "啟用購物車備註"
},
"default": false
}
]
}
{% endschema %}

------------------------------------------------------------------------------------------------------------------------------

 

Let me know if you have any further questions for me! 

Have an awesome weekend! 

 

Oliver

OLIVERD
Excursionist
44 0 4

Thanks for the reply! Great, I will keep it in mind, thank you!

BrianAtWork
Shopify Partner
245 59 168

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

OLIVERD
Excursionist
44 0 4
That looks amazing! Exactly what I wanted!! I just want to edit the size of the three lines below to H3, theyre probably H1 or H2 now, but i think its a bit too large. How can I implement this?
BrianAtWork
Shopify Partner
245 59 168

@OLIVERD I'm glad you like it! I've written the code and pasted it here for your convenience. You will need to edit two theme files to implement this.

 

Disclaimer: I don't have direct access to your theme, so these changes could not be properly tested.

 

[STEP 1] – Before you customize your theme:

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

 

[STEP 2] – Edit your 'theme.scss.liquid' theme file located in the Assets directory:

 

Add this code to the bottom of the file, below all other code:

 

.cart-subtotal__title,
.cart-subtotal__price {
  font-size: 0.76em !important;
}

.cart-subtotal__title--accent,
.cart-subtotal__price--accent {
  color: {{ settings.color_primary }} !important;
}

 

[STEP 3] – Edit your 'cart-template.liquid' theme file located in the Sections directory:

 

Replace the entire file contents with this code:

 

{%- assign totalCompareAtPrice = 0 -%}
{%- assign totalSavings = 0 -%}
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="cart-template">

{% if cart.item_count > 0 %}
<div class="cart-header">
<h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
<a href="/collections/all" class="text-link text-link--accent">
</a>
</div>

{% include 'banana-stand-cart-top-container' %}

<div id="bold-cart-msg"></div>
<form action="/cart" method="post" novalidate class="cart">
<table>
<thead class="cart__row">
<th colspan="2" scope="col">{{ 'cart.label.product' | t }}</th>
<th class="text-right" scope="col">{{ 'cart.label.price' | t }}</th>
<th class="text-center small--hide" scope="col">{{ 'cart.label.quantity' | t }}</th>
<th class="text-right small--hide" scope="col">{{ 'cart.label.total' | t }}</th>
</thead>
<tbody>
{% for item in cart.items %}
<tr class="cart__row border-bottom line{{ forloop.index }}{% if forloop.first %} border-top{% endif %}">
<td class="cart__image-wrapper">
<div>
{% include 'hs-image-utils' with image: item %}<img alt="{{ item.title | escape }}" class="cart__image hs-id-150c81f0 lazyload hs-lazyload" data-item-url="{{ item.url }}" data-sizes="auto" data-src="{{ hs_data_src }}" data-widths="{{ hs_data_widths }}" src="{{ item | img_url: '95x95', scale: 2 }}"/>
</div>
</td>
<td class="cart__meta small--text-left">
<div class="list-view-item__title">
<a href="{{ item.url }}" class="cart__product-title">
{{ item.product.title }}
{% if item.quantity > 1 %}
<span class="medium-up--hide"><span class="visually-hidden">{{ 'cart.label.quantity' | t }}</span>(x{{ item.quantity }})</span>
{% endif %}
</a>
</div>

{% unless item.variant.title contains 'Default' %}
<div class="cart__meta-text">
{% for option in item.product.options %}
{{ option }}: {{ item.variant.options[forloop.index0] }}<br/>
{% endfor %}
</div>
{% endunless %}

{% comment %}
Optional, loop through custom product line items if available

Line item properties come in as having two parts. The first part will be passed with the default form,
but p.last is the actual custom property and may be blank. If it is, don't show it.

For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...
{% endcomment %}
{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
<div class="cart__meta-text">
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:

{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</div>
{% endif %}

<p class="cart__remove small--hide">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.general.remove' | t }} {{ item.product.title }}">{{ 'cart.general.remove' | t }}</a>
</p>
</td>
<td class="cart__price-wrapper text-right">
{%- if item.original_price != item.final_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_price | money }}</span>
</dd>
</dl>
{%- elsif item.variant.compare_at_price > item.original_price -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.variant.compare_at_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{%- include 'icon-saletag' -%}{{ item.original_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_price | money }}
{%- endif -%}

{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
{%- include 'icon-saletag' -%}{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}

<div class="cart__edit medium-up--hide">
<button type="button" class="btn btn--secondary btn--small js-edit-toggle cart__edit--active" data-target="line{{ forloop.index }}" aria-label="{{ 'cart.general.edit' | t }} {{ item.product.title }}" aria-expanded="false">
<span class="cart__edit-text--edit">{{ 'cart.general.edit' | t }}</span>
<span class="cart__edit-text--cancel">{{ 'cart.general.cancel' | t }}</span>
</button>
</div>
</td>
<td class="text-right small--hide">
<div class="cart__qty">
<label for="updates_large_{{ item.key }}" class="cart__qty-label">{{ 'cart.label.quantity' | t }}</label>
<input class="cart__qty-input" type="number" name="updates[]" id="updates_large_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*" data-quantity-item="{{ forloop.index }}">
</div>
</td>
<td class="text-right small--hide">
{%- assign itemCompareAtPrice = item.variant.compare_at_price -%}
{%- if itemCompareAtPrice == nil -%}
{%- assign itemCompareAtPrice = item.original_price -%}
{%- endif -%}
{%- assign totalLineCompareAtPrice = itemCompareAtPrice | times: item.quantity -%}
{%- assign totalCompareAtPrice = totalCompareAtPrice |  plus: totalLineCompareAtPrice -%}
{%- if item.original_line_price != item.final_line_price -%}
{%- assign totalLineSavings = item.original_line_price | minus: item.final_line_price -%}
{%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ item.original_line_price | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{{ item.final_line_price | money }}</span>
</dd>
</dl>
{%- elsif item.variant.compare_at_price > item.original_price -%}
{%- assign totalLineOriginalPrice = item.original_price | times: item.quantity -%}
{%- assign totalLineSavings = totalLineCompareAtPrice | minus: totalLineOriginalPrice -%}
{%- assign totalSavings = totalSavings | plus: totalLineSavings -%}
<dl>
<dt>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
</dt>
<dd>
<s>{{ totalLineCompareAtPrice | money }}</s>
</dd>
<dt>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
</dt>
<dd>
<span class="order-discount">{%- include 'icon-saletag' -%}{{ item.original_line_price | money }}</span>
</dd>
</dl>
{%- else -%}
{{ item.original_line_price | money }}
{%- endif -%}
</td>
</tr>
<tr class="medium-up--hide cart__update-wrapper">
<td colspan="3" class="text-right">
<div class="cart__update-controls">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0"
class="text-link text-link--accent medium-up--hide cart__update-control cart__update-control--remove"
aria-label="{{ 'cart.general.remove' | t }} {{ item.product.title }}">
{{ 'cart.general.remove' | t }}
</a>
<div class="cart__qty cart__update-control">
<label for="updates_{{ item.key }}"
class="cart__qty-label">
{{ 'cart.label.quantity' | t }}
</label>
<input class="cart__qty-input" type="number" id="updates_{{ item.key }}"
value="{{ item.quantity }}" min="0" pattern="[0-9]*"
data-quantity-item="{{ forloop.index }}">
</div>
<button type="submit" name="update" class="btn btn--small medium-up--hide cart__update-control"
aria-label="{{ 'cart.general.update' | t }} {{ item.product.title }}">
{{ 'cart.general.update' | t }}
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>

<div class="cart__footer">
<div class="grid">
{% if section.settings.cart_notes_enable %}
<div class="grid__item medium-up--one-half cart-note">
<label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
<textarea name="note" id="CartSpecialInstructions" class="cart-note__input">{{ cart.note }}</textarea>
</div>
{% endif %}
<div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">

{%- if cart.cart_level_discount_applications != blank -%}
<div class="order-discount-card-wrapper">
{%- for discount_application in cart.cart_level_discount_applications -%}
<span class="order-discount order-discount--title order-discount--cart">
{%- include 'icon-saletag' -%}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
</span>
<span class="order-discount order-discount--cart order-discount--cart-total">-{{ discount_application.total_allocated_amount | money }}</span>
{%- endfor -%}
</div>
{%- endif -%}

{%- if totalSavings > 0 -%}
<div class="cart-subtotal">
<h2><span class="cart-subtotal__title">Regular Price</span></h2>
<h2><span class="cart-subtotal__price"><s>{{ totalCompareAtPrice | money }}</s></span></h2>
</div>

<div class="cart-subtotal">
<h2><span class="cart-subtotal__title cart-subtotal__title--accent">Your savings</span></h2>
<h2><span class="cart-subtotal__price cart-subtotal__price--accent">{{ totalSavings | money }}</span></h2>
</div>
{%- endif -%}

<div class="cart-subtotal">
<h2><span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span></h2>
<h2><span class="cart-subtotal__price">{{ cart.total_price | money }}</span></h2>
</div>

{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}
<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
<div class="cart__submit-controls">
<input type="submit" name="update"
class="btn btn--secondary small--hide cart__submit-control"
value="{{ 'cart.general.update' | t }}">
<input type="submit" name="checkout"
class="btn btn--small-wide cart__submit cart__submit-control"
value="{{ 'cart.general.checkout' | t }}">
</div>

{% if additional_checkout_buttons %}
{% endif %}
</div>
</div>
</div>
</form>
{% else %}
<div class="empty-page-content text-center">
<h1>{{ 'cart.general.title' | t }}</h1>
<p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<div class="cookie-message">
<p>{{ 'cart.general.cookies_required' | t }}</p>
</div>
<a href="/" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</div>
{% endif %}
</div>

{% schema %}
{
"name": {
"de": "Warenkorb-Seite",
"en": "Cart page",
"es": "Página de carrito",
"fr": "Page du panier",
"it": "Pagina del carrello",
"ja": "カートページ",
"nl": "Winkelwagenpagina",
"pt-BR": "Página do carrinho",
"zh-CN": "购物车页面",
"zh-TW": "購物車頁面"
},
"settings": [
{
"type": "checkbox",
"id": "cart_notes_enable",
"label": {
"de": "Warenkorb-Notifikationen erlauben",
"en": "Enable cart notes",
"es": "Habilitar notas de carrito",
"fr": "Activer les notes de panier",
"it": "Abilita note carrello",
"ja": "カートメモを有効にする",
"nl": "Notities voor winkelwagen inschakelen",
"pt-BR": "Ativar observações sobre o carrinho",
"zh-CN": "启用购物车备注",
"zh-TW": "啟用購物車備註"
},
"default": false
}
]
}
{% endschema %}

 

Let me know how it goes or if you need further help!

 

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

OLIVERD
Excursionist
44 0 4

Awesome Brain! It works!

 Schermafbeelding 2019-07-07 om 16.08.55.png

The only thing I still want is that the subtotal PRICE has to be in the same color as the discount price, but only the subtotal PRICE, not the word subtotal. 

Besides that, I would love to put a '-' before the 'your savings' price, but I do not know where to put the -.

 

Do you know how to solve these two small things?

 

Thanks!!! 

BrianAtWork
Shopify Partner
245 59 168

For future readers: the two requested code edits were made via email. One of the files is too large to post here in the community.

 

Cheers! 🎉

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

Ricardo_Sala
New Member
2 0 0

@BrianAtWork That was clean and clear! 🙂

I am trying to do the same for Turbo, could you please help me?

Thank you!

PureSeoul
Excursionist
21 0 4

Hi Brian, 

This is exactly what I am trying to achieve on my site. I am using the Annabelle theme. Here is my cart.liquid below, would you be able to take a look? Thanks

<!-- /templates/cart.liquid -->
{% comment %}

For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments

{% endcomment %}

{% include 'breadcrumbs' %}

<div class="{{ settings.theme_layout_type }}">
<div class="row">
<div id="main" role="main" class="col-sm-12 wrap-page">

{% if cart.item_count > 0 %}

<form action="/cart" method="post" novalidate class="cart ">

<h1>{{ 'cart.general.title' | t }}</h1>

<div class="row hidden-xs">
<div class="col-sm-6">
{{ 'cart.label.product' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.price' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.quantity' | t }}
</div>
<div class="col-sm-2">
{{ 'cart.label.total' | t }}
</div>
</div>

<hr>

{% for item in cart.items %}
<div class="row">
<div class="cart-line">
<div class="product-line col-sm-6">
<div class="cart-product-image">
<a href="{{ item.url | within: collections.all }}" class="cart-image">
<img src="{{ item | img_url: 'small' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="cart-product-text ">
<a href="{{ item.url }}" class="cart-product-title">
{{ item.product.title }}
</a>
<span class="cart-product-option">{% if item.variant.title contains "Default" %} {% else %} {{ item.variant.title }} {% endif %}</span>

<div class="hidden-sm hidden-md hidden-lg">
<div class="cart-price"><span class="money">{{ item.line_price | money }}</span></div>
</div>
</div>
</div>
<div class="cart-price col-sm-2 hidden-xs">
<span class="money">{{ item.price | money }}</span>
</div>
<div class="col-sm-2 quantity-wrap">
<div class="input-group quantity-group">
<span class="input-group-btn">
<button class="btn btn-minus" type="button">-</button>
</span>

<input type="text" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" class="form-control quantity-selector quantity-box">

<span class="input-group-btn">
<button class="btn btn-plus" type="button">+</button>
</span>
</div><!-- /input-group -->

<input type="submit" name="update" class="btn btn-default btn-update-cart" value="{{ 'cart.general.update' | t }}"/>
</div>
<div class="cart-price col-sm-2 hidden-xs">
<span class="money">{{ item.line_price | money }}</span>
</div>

<a href="/cart/change/{{ item.variant.id }}?quantity=0" class="cart-remove-item"><i class="fa fa-trash-o"></i></a>
</div>
</div>
<hr>
{% endfor %}

<div class="row" >
<div class="col-sm-8">
<div class="payment-methods-wrap">
{% if settings.payment_master == true %}
<i class="fa fa-cc-mastercard"></i>
{% endif %}

{% if settings.payment_visa == true %}
<i class="fa fa-cc-visa"></i>
{% endif %}

{% if settings.payment_amex == true %}
<i class="fa fa-cc-amex"></i>
{% endif %}

{% if settings.payment_discover == true %}
<i class="fa fa-cc-discover"></i>
{% endif %}

{% if settings.payment_paypal == true %}
<i class="fa fa-cc-paypal"></i>
{% endif %}

{% if settings.payment_bitcoin == true %}
<img src="{{ 'payment_method_bitcoin.svg' | asset_url }}" />
{% endif %}
</div>
</div>
<div class="col-sm-4 text-right">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item large--one-half">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
{% endif %}
<p>
<span class="subtotal-title">{{ 'cart.general.subtotal' | t }}: </span>
<span class="cart-subtotal money">{{ cart.total_price | money }}</span>
</p>
<p class="shipping-info"><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>

<input type="submit" name="checkout" class="btn btn-default btn-large btn-checkout" value="{{ 'cart.general.checkout' | t }}">

{% if additional_checkout_buttons %}
<div>{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>

</form>

{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p>{{ 'cart.general.empty' | t }}</p>
<p>{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}

</div>
</div>
</div>

BrianAtWork
Shopify Partner
245 59 168

Hello @Ricardo_Sala and @PureSeoul! I would certainly enjoy helping you show the 'sale price' discount on your cart page.

 

I have implemented this for OliverD who is using the Debut theme. However, you are using a third-party theme that I am not familiar with. There will be a small charge for me to implement this. I will handle everything for you including directly updating your store's theme using collaborator access.

 

Let me know if you are interested! I will send you a private message with my contact details shortly.

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

PureSeoul
Excursionist
21 0 4
@BrianAtWork
Hi Brian, thanks for offering to help. Yes, I am interested and have replied to your private message. Thanks!
PureSeoul
Excursionist
21 0 4

@BrianAtWork 
Thanks for helping me on this, works just how I wanted. 

rowleys_shop
New Member
1 0 0

Hi Brian,

 

I really want to make this change yo make for https://derrins.com/cart to my website also.

I tried to find so long for this solution

 

Please let me know what should I do or how can you make it for me

rowleys-shop.com my email is rowleys.shop@gmail.com

 

Thank you so much!!

AA15
Tourist
5 0 2

Hi Brian, what about Brooklyn theme? I've managed to get some of it working but when more than one product is in the cart with more than 1 quantity it doesn't work.

 

See images:


Correct with 1 productCorrect with 1 productIncorrect with more than one productIncorrect with more than one product

 

As you can see, the first image is correct with £10 savings (£5 each product) but the second does not add in the savings from another item in the cart.

The code I am using is this:
{% assign savings = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% assign difference = item.variant.compare_at_price | minus: item.variant.price %}
{% assign diffSaving = difference | times: item.quantity %}
{% assign savings = savings | plus: diffSaving %}
{% endif %}
{% endfor %}

YOU SAVE {{ diffSaving | money }}

Please help, I've spent several hours mixing code and finding snippets online and trying to see more variables to try etc. Help is very much appreciated!
Thanks

tommie-vdw2000
New Member
2 0 0

Hi, That looks really great. I want that also, Can you guys help me out? It would be great if you can explain me how i can add it 😄

tommie-vdw2000
New Member
2 0 0

Hi, i also have brooklyn, how did you add this code? i want it also 😄

InfernoSP
New Member
2 0 0

Hey @BrianAtWork! Thank you so much for the codes!

 

I have implemented it into my debut theme with some minor edits and it works great! The only problem that I have is that the product image and title are not in line with the price (as shown in the image), making it look really weird. Can it be fixed?

 

Inkedscsht2_LI.jpg

 

 

Again, thank you!