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)

sarhov
Shopify Expert
489 85 164

@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,

OLIVERD
Excursionist
44 0 4

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

BrianAtWork
Shopify Partner
245 59 184

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

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

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 184

@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 184

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
Visitor
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 184

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
Visitor
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!!

StevenR
Visitor
2 0 0

@BrianAtWork  Hello Brian, I'm looking to do the same for debut theme, your code works, but discount codes are not applied to it, could you please help ?

Would be really appreciated.
 
Best regards,

komalpreet0911
Tourist
5 0 2

Hi Brian,

 

I am interested in getting similar thing done. Could you please help. I am using Empire theme which is a third party them.

Collasoul
Shopify Partner
2 0 0

Hi Brian!

 

We have a third party theme and are looking to implement the same thing you did on this thread here.

 

We would absolutely be open to paying you for your help. Please send me a PM if you are available and willing to help out.

tommie-vdw2000
Visitor
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 😄

AaronJamesArq
Tourist
4 0 1

Hi @BrianAtWork,

 

I'm on the debut theme as well and would like the same thing implemented. But when copying the code you provided to Oliver, it seems there's some things that's not applicable for me. Can you help me out too?

 

Here's the contents of my cart template

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

  <div {% if cart.item_count == 0 %}class="hide" {% endif %}data-cart-wrapper>
    <div class="cart-header">
      <h1 class="cart-header__title">{{ 'cart.general.title' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="text-link text-link--accent">
        {{ 'cart.general.continue_shopping' | t }}
      </a>
    </div>

    <form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
      <table>
        <thead class="cart__row cart__row--heading">
          <th scope="col">{{ 'cart.label.product' | t }}</th>
          <th class="text-right" scope="col">{{ 'cart.label.price' | t }}</th>
          <th class="text-right small--hide" scope="col">{{ 'cart.label.quantity' | t }}</th>
          <th class="text-right small--hide" scope="col">{{ 'cart.label.total' | t }}</th>
        </thead>
        <tbody data-cart-line-items>
          {%- for item in cart.items -%}
            <tr class="cart__row" data-cart-item data-cart-item-key="{{ item.key }}" data-cart-item-url="{{ item.url }}" data-cart-item-title="{{ item.title }}" data-cart-item-index="{{ forloop.index }}" data-cart-item-quantity="{{ item.quantity }}">
              <td class="cart__meta small--text-left" data-cart-table-cell>
                <div class="cart__product-information">
                  <div class="cart__image-wrapper">
                    <img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
                  </div>
                  <div>
                    <div class="list-view-item__title">
                      <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title>
                        {{ item.product.title }}
                      </a>
                    </div>

                    {%- assign variant_options = 'template ' | split: ' ' -%}
                    {%- if item.product.has_only_default_variant != true -%}
                      {%- assign variant_options = item.options_with_values -%}
                    {%- endif -%}
                    {%- assign property_size = item.properties | size -%}

                    <ul class="product-details{% if item.product.has_only_default_variant and property_size == 0 %} hide{% endif %}" data-cart-item-details aria-label="{{ 'cart.label.product_details' | t }}">
                      {%- for option in variant_options -%}
                        <li class="product-details__item product-details__item--variant-option{% if item.product.has_only_default_variant %} hide{% endif %}" data-cart-item-option>{{ option.name }}: {{ option.value }}</li>
                      {%- endfor -%}

                      {%- 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-product-page-Like-for-a-monogram-engraving-or-customization
                      {%- endcomment -%}

                      {%- assign properties = 'template ' | split: ' ' -%}
                      {%- if property_size > 0 -%}
                        {%- assign properties = item.properties -%}
                      {%- endif -%}

                      {%- for p in properties -%}
                        {%- unless p.last == blank -%}
                          <li class="product-details__item product-details__item--property{%if property_size == 0%} hide{% endif %}" data-cart-item-property>
                            <span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

                            {%- comment -%}
                              Check if there was an uploaded file associated
                            {%- endcomment -%}
                            <span data-cart-item-property-value>
                              {%- if p.last contains '/uploads/' -%}
                                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                              {%- else -%}
                                {{ p.last }}
                              {%- endif -%}
                            </span>
                          </li>
                        {%- endunless -%}
                      {%- endfor -%}
                    </ul>

                    <p class="cart__remove">
                      <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove>{{ 'cart.general.remove' | t }}</a>
                    </p>
                  </div>
                </div>
              </td>
              <td class="cart__price text-right">

                {%- assign hasDiscount = false -%}
                {%- if item.original_price != item.final_price -%}
                  {%- assign hasDiscount = true -%}
                {%- endif -%}

                <div data-cart-item-price>
                  <dl data-cart-item-price-list>
                    {%- comment -%}
                      Markup template for discount item
                    {%- endcomment -%}
                    <div {% unless hasDiscount %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                      </dt>
                      <dd>
                        <s data-cart-item-original-price>{{ item.original_price | money }}</s>
                      </dd>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
                      </dt>
                      <dd>
                        <span class="order-discount" data-cart-item-final-price>{{ item.final_price | money }}</span>
                      </dd>
                    </div>

                    {%- comment -%}
                      Markup template for regular price item
                    {%- endcomment -%}
                    <div {% if hasDiscount %}class="hide" {% endif %}data-cart-item-regular-price-group>
                      <dt>
                        <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                      </dt>
                      <dd data-cart-item-regular-price>
                        {{ item.original_price | money }}
                      </dd>
                    </div>

                    {%- comment -%}
                      Markup template for unit price
                    {%- endcomment -%}
                    <div {% unless item.unit_price_measurement %}class="hide" {% endunless %}data-unit-price-group>
                      <dt>
                        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
                      </dt>
                      <dd>
                        <span class="price-unit-price">
                          {%- capture unit_price_separator -%}
                            <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
                          {%- endcapture -%}
                          {%- capture unit_price_base_unit -%}
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          {%- endcapture -%}

                          <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
                        </span>
                      </dd>
                    </div>
                  </dl>
                </div>

                {%- assign itemDiscounts = 'template ' | split: ' ' -%}
                {%- if item.line_level_discount_allocations != blank -%}
                  {%- assign itemDiscounts = item.line_level_discount_allocations -%}
                {%- endif -%}

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

                <div class="cart__qty medium-up--hide">
                  <label for="updates_{{ item.key }}" class="cart__qty-label" aria-label="{{ 'cart.label.quantity' | t }}" data-quantity-label-mobile>
                    {{ 'cart.label.qty' | t }}
                  </label>
                  <input id="updates_{{ item.key }}" class="cart__qty-input" type="number"
                    value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-mobile>
                </div>
                <div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--mobile hide" role="alert" data-cart-quantity-error-message-wrapper>
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span class="cart__qty-error-message" data-cart-quantity-error-message></span>
                </div>
              </td>
              <td class="cart__quantity-td text-right small--hide">
                <div class="cart__qty">
                  <label for="updates_large_{{ item.key }}" class="cart__qty-label" data-quantity-label-desktop>{{ 'cart.label.quantity' | t }}</label>
                  <input id="updates_large_{{ item.key }}" class="cart__qty-input" type="number"
                    name="updates[]" value="{{ item.quantity }}" min="0" pattern="[0-9]*"
                    data-quantity-input data-quantity-item="{{ forloop.index }}" data-quantity-input-desktop>
                </div>
                <div class="cart__qty-error-message-wrapper cart__qty-error-message-wrapper--desktop hide" role="alert" data-cart-quantity-error-message-wrapper>
                  <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                  {% include 'icon-error' %}
                  <span class="cart__qty-error-message" data-cart-quantity-error-message></span>
                </div>
              </td>
              <td class="cart__final-price text-right small--hide" data-cart-item-line-price>
                {%- comment -%}
                  Markup template for discount item
                {%- endcomment -%}
                <dl {% unless item.original_line_price != item.final_line_price %}class="hide" {% endunless %}data-cart-item-discounted-price-group>
                  <dt>
                    <span class="visually-hidden">{{ 'cart.label.regular_total' | t }}</span>
                  </dt>
                  <dd>
                    <s data-cart-item-original-price>{{ item.original_line_price | money }}</s>
                  </dd>
                  <dt>
                    <span class="visually-hidden">{{ 'cart.label.discounted_total' | t }}</span>
                  </dt>
                  <dd>
                    <span class="order-discount" data-cart-item-final-price>{{ item.final_line_price | money }}</span>
                  </dd>
                </dl >

                {%- comment -%}
                  Markup template for regular price item
                {%- endcomment -%}
                <div {% if item.original_line_price != item.final_line_price %}class="hide" {% endif %}data-cart-item-regular-price-group>
                  <span data-cart-item-regular-price>{{ item.original_line_price | money }}</span>
                </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" data-cart-notes>{{ 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 %}">

            {%- assign cartDiscounts = 'template ' | split: ' ' -%}
            {%- if cart.cart_level_discount_applications.size > 0 -%}
              {%- assign cartDiscounts = cart.cart_level_discount_applications -%}
            {%- endif -%}
            <div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
              <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts -%}
                  <span class="order-discount order-discount--title order-discount--cart">
                    {% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>
                  </span>
                  <span class="order-discount order-discount--cart order-discount--cart-total">
                    -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                  </span>
                {%- endfor -%}
              </div>
            </div>

            <div class="cart-subtotal">
              <span class="cart-subtotal__title">{{ 'cart.general.subtotal' | t }}</span>
              <span class="cart-subtotal__price" data-cart-subtotal>{{ cart.total_price | money_with_currency }}</span>
            </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__buttons-container">
              <div class="cart__submit-controls">
                {%- unless section.settings.cart_ajax_enable -%}
                <input type="submit" name="update"
                  class="cart__submit btn btn--secondary"
                  value="{{ 'cart.general.update' | t }}">
                {%- endunless -%}
                <input type="submit" name="checkout"
                  class="cart__submit btn btn--small-wide"
                  value="{{ 'cart.general.checkout' | t }}">
              </div>

              <div class="cart__error-message-wrapper hide" role="alert" data-cart-error-message-wrapper>
                <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                {% include 'icon-error' %}
                <span class="cart__error-message" data-cart-error-message></span>
              </div>

              {%- if additional_checkout_buttons -%}
                <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
              {%- endif -%}
            </div>
          </div>
        </div>
      </div>
    </form>

    <p class="visually-hidden" data-cart-status
      aria-live="polite"
      role="status"
    ></p>
  </div>

  <div class="empty-page-content{% if cart.item_count > 0 %} hide{% endif %} text-center" data-empty-page-content>
    <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="{{ routes.root_url }}" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
  </div>
</div>



{% schema %}
{
  "name": {
    "da": "Side med indkøbskurv",
    "de": "Warenkorb-Seite",
    "en": "Cart page",
    "es": "Página del carrito de compras",
    "fi": "Ostoskorisivu",
    "fr": "Page du panier",
    "hi": "कार्ट पेज",
    "it": "Pagina del carrello",
    "ja": "カートページ",
    "ko": "카트 페이지",
    "nb": "Handlekurvside",
    "nl": "Winkelwagenpagina",
    "pt-BR": "Página do carrinho",
    "pt-PT": "Página do carrinho",
    "sv": "Varukorgssida",
    "th": "หน้าตะกร้าสินค้า",
    "zh-CN": "购物车页面",
    "zh-TW": "購物車頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "cart_ajax_enable",
      "label": {
        "da": "Aktivér automatisk opdatering af indkøbskurv",
        "de": "Automatische Warenkorbaktualisierungen aktivieren",
        "en": "Enable automatic cart updates",
        "es": "Habilitar las actualizaciones automáticas del carrito de compra",
        "fi": "Ota automaattinen ostoskorin päivitykset käyttöön",
        "fr": "Activer les mises à jour automatiques",
        "hi": "स्वचालित कार्ट अपडेट सक्षम करें",
        "it": "Abilita aggiornamenti automatici carrello",
        "ja": "自動カートの更新を有効にする",
        "ko": "자동 카트 업데이트 활성화하기",
        "nb": "Aktiver automatiske oppdateringer av handlekurven",
        "nl": "Automatische winkelwagen-updates inschakelen",
        "pt-BR": "Permitir atualizações automáticas do carrinho",
        "pt-PT": "Ativar atualizações automáticas do carrinho",
        "sv": "Aktivera automatiska uppdateringar av varukorgen",
        "th": "เปิดใช้งานการอัปเดตตะกร้าสินค้าอัตโนมัติ",
        "zh-CN": "启用购物车自动更新功能",
        "zh-TW": "啟用自動更新購物車"
      },
      "info": {
        "da": "Opdaterer indkøbskurven, så snart kunden foretager ændringer",
        "de": "Aktualisiert den Warenkorb, sobald Kundenänderungen vorgenommen werden",
        "en": "Updates the cart as soon as customer changes are made",
        "es": "Actualiza el carrito de compra tan pronto como el cliente realice cambios",
        "fi": "Päivittää ostoskorin heti, kun asiakkaan muutokset on tehty",
        "fr": "Mise à jour du panier dès que les modifications apportées aux clients ont été effectuées",
        "hi": "ग्राहक के द्वारा परिवर्तन करते ही कार्ट को अपडेट हो जाता है",
        "it": "Aggiorna il carrello appena il cliente apporta le modifiche",
        "ja": "お客様が変更されるとすぐにカートを更新します",
        "ko": "고객 변경 시 카트를 업데이트합니다.",
        "nb": "Oppdaterer handlekurven så snart kundens endringer er gjort",
        "nl": "De winkelwagen wordt bijgewerkt zodra de klant wijzigingen aanbrengt",
        "pt-BR": "Atualiza o carrinho assim que o cliente faz alterações",
        "pt-PT": "Atualiza o carrinho assim que o cliente faz alterações",
        "sv": "Uppdaterar varukorgen så snart kundändringar görs",
        "th": "อัปเดตตะกร้าสินค้าเมื่อลูกค้าได้ทำการเปลี่ยนแปลง",
        "zh-CN": "客户做出更改后立即更新购物车",
        "zh-TW": "在顧客進行變更時立即更新購物車"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "cart_notes_enable",
      "label": {
        "da": "Aktivér bemærkninger til indkøbskurv",
        "de": "Warenkorbanmerkungen erlauben",
        "en": "Enable cart notes",
        "es": "Habilitar notas del carrito de compra",
        "fi": "Ota tilauskommentit käyttöön",
        "fr": "Activer les notes de panier",
        "hi": "कार्ट नोट्स सक्षम करें",
        "it": "Abilita note carrello",
        "ja": "カートメモを有効にする",
        "ko": "카트 참고 사항 사용",
        "nb": "Aktiver handlekurvmerknader",
        "nl": "Opmerkingen voor winkelwagen inschakelen",
        "pt-BR": "Habilitar observações do carrinho",
        "pt-PT": "Ativar notas do carrinho",
        "sv": "Aktivera varukorgsmeddelanden",
        "th": "เปิดใช้หมายเหตุสำหรับตะกร้าสินค้า",
        "zh-CN": "启用购物车备注",
        "zh-TW": "啟用購物車備註"
      },
      "default": false
    }
  ]
}
{% endschema %}
DanielleSells
Visitor
1 0 0

@BrianAtWork This is great solution. I am using the Narrative theme and hoping you can guide me on how to implement this as well. I'd really appreciate it! 

mdab25
Visitor
2 0 0

Hi Brian, 

 

I just read the thread above and I'm curious if you can help with the same cart breakdown of Total, Savings / Applied Discounts , And Sub Total ?

Thank you !

Guido_bb
New Member
5 0 0

Hey Brian!

I would love to have this aswell for my Debutify theme. If it is not too much work for you ofcourse!

Would it also be possible to show the before price along with the amount saved in the cart drawer?

Here is my cart.liquid

<!-- /templates/cart.liquid -->
{% comment %}
 
  For info on test orders:
 
{% endcomment %}
 
  {% include "dbtfy-cart-countdown" %}<div class="grid">
  <div class="grid__item large--eight-twelfths push--large--two-twelfths">
    <div class="section-header">
      <h1 class="page-title">{{ 'cart.general.title' | t }}</h1>
        {% include "dbtfy-cart-goal" %}{% if cart.item_count == 0 %}
      <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
<a href="{{ settings.browsing_link }}" class="btn {{ settings.browsing_button_style}} cart--continue-browsing">{{ 'cart.general.continue_browsing_html' | t }}</a>
<p class="cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
      {% endif %}
    </div>
  </div>
</div>
 
{% if cart.item_count > 0 %}
  <form action="/cart" method="post" novalidate class="cart {% if settings.cart_spacer %}cart-spacer{% endif %}">
 
  <div class="cart__row cart__header-labels{% unless settings.cart_top_button %} small--hide{% endunless %}">
    <div class="grid--full grid-uniform">
        <div class="grid__item large--seven-twelfths medium--six-twelfths">
          {% if settings.cart_top_button %}
          <button id="topCheckoutButton" class="btn btn--buy small--full">
            <span class="btn__text">
              {% unless settings.checkout_icon == empty %}
              <span class="fas fa-{{ settings.checkout_icon }}" aria-hidden="true"></span>
              {% endunless %}
              {{ 'cart.general.checkout' | t }}
            </span>
          </button>
          {% endif %}
        </div>
        <div class="grid__item large--five-twelfths medium--six-twelfths small--hide">
        <div class="grid--full">
          <div class="grid__item one-half">
            {{ 'cart.label.quantity' | t }}
          </div>
          <div class="grid__item one-half text-right">
            {{ 'cart.label.total' | t }}
          </div>
        </div>
      </div>
    </div>
  </div>
 
    {% comment %}
      Loop through products in the cart
    {% endcomment %}
    {% for item in cart.items %}
      <div class="cart__row">
        <div class="grid--full cart__row--table-large">
 
          <div class="grid__item large--seven-twelfths">
            <div class="grid">
 
              <div class="grid__item one-third">
                <a href="{{ item.url | within: collections.all }}" class="cart__image">
 
                  {% comment %}
                    More image size options at:
                  {% endcomment %}
                  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                </a>
              </div>
 
              <div class="grid__item two-thirds">
                <a href="{{ item.url }}" class="cart__product-name">
                  {{ item.product.title }}
                </a>
                {% unless item.variant.title contains 'Default' %}
                  <p class="cart__product-meta">
                    {{ item.variant.title }}
                  </p>
                {% endunless %}
 
                {% if settings.grid_product_vendor %}
                  <p class="cart__product-meta">{{ item.vendor }}</p>
                {% endif %}
 
                {% assign property_size = item.properties | size %}
                {% if property_size > 0 %}
                  {% for p in item.properties %}
                    {% assign first_character_in_key = p.first | truncate: 1, '' %}
                    {% unless p.last == blank or first_character_in_key == '_' %}
                      {{ p.first }}:
 
                      {% if p.last contains '/uploads/' %}
                        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                      {% else %}
                        {{ p.last }}
                      {% endif %}
 
                      <br>
                    {% endunless %}
                  {% endfor %}
                {% endif %}
 
                <p class="cart__product-meta">
                  <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                    <span class="fas fa-trash"></span>
                    {{ 'cart.general.remove' | t }}
                  </a>
                </p>
              </div>
 
            </div>
          </div>
 
          <div class="grid__item large--five-twelfths cart-quantity-price">
            <div class="grid grid-uniform cart__row--table cart__quantity-grid{% if item.line_level_discount_allocations != blank %} cart__has-discount{% endif %}">
 
              <div class="grid__item one-half cart__quantity-grid__item">
                <label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
                {% include 'quantity-selector', type:'cart' %}
              </div>
 
              <div class="grid__item one-half text-right cart__price-grid__item">
                {%- if item.original_line_price != item.final_line_price -%}
                  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                  <del class="cart__price cart__price--strikethrough price">{{ item.original_line_price | money }}</del>
                  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
                  <span class="cart__price">{{ item.final_line_price | money }}</span>
                {%- else -%}
                  <span class="cart__price">{{ item.original_line_price | money }}</span>
                {%- endif -%}
 
                {%- if item.line_level_discount_allocations != blank -%}
                  <ul class="text-discount order-discount order-discount--list order-discount--title order-discount--cart-list" aria-label="{{ 'customer.order.discount' | t }}">
                    {%- for discount_allocation in item.line_level_discount_allocations -%}
                    <li class="order-discount__item">
                      <span class="fas fa-tag" aria-hidden="true"></span> {{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                    </li>
                    {%- endfor -%}
                  </ul>
                {%- endif -%}
              </div>
            </div>
          </div>
 
        </div>
      </div>
    {% endfor %}
 
    <div class="cart__row">
      <div class="grid">
        {% if settings.cart_notes_enable %}
        <div class="grid__item large--seven-twelfths medium--four-twelfths cart__note-container">
          <div class="cart__note">
            <label for="CartSpecialInstructions"><span class="fas fa-info-circle"></span> {{ 'cart.general.note' | t }}</label>
            <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
          </div>
        </div>
        {% endif %}
        <div class="grid__item large--five-twelfths medium--eight-twelfths {% unless settings.cart_notes_enable %} push--large--seven-twelfths{% endunless %}">
          <div class="grid--full cart__row--table">
            <div class="grid__item one-half">
              <p class="cart__subtotal"><span id='revy-cart-subtotal-label'>{{ 'cart.general.subtotal' | t }}</span></p>
            </div>
            <div class="grid__item one-half text-right">
              <p class="cart__subtotal"><span id='revy-cart-subtotal-price'>{{ cart.total_price | money }}</span></p>
            </div>
          </div>
 
          {% if cart.total_discount > 0 %}
            {% assign cartTotalDiscount = cart.total_discount | money %}
            <p class="cart__savings text-discount text-center"><span class="fas fa-tag"></span> {{ 'cart.general.savings_html' | t: savings: cartTotalDiscount }}</p>
          {% endif %}
 
          <p class="cart__note_checkout rte text-center">
            {%- 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 -%}
            {{ taxes_shipping_checkout }}
          </p>
 
          <button type="submit" name="update" class="btn btn--full btn--small update-cart">
            <span class="fas fa-sync-alt" aria-hidden="true"></span>
            {{ 'cart.general.update' | t }}
          </button>
 
            {% include "dbtfy-cart-discount" %}<button type="submit" name="checkout" class="btn btn--buy btn--full cart__checkout">
            <span class="btn__text">
              {% unless settings.checkout_icon == empty %}
              <span class="fas fa-{{ settings.checkout_icon }}" aria-hidden="true"></span>
              {% endunless %}
              {{ 'cart.general.checkout' | t }}
            </span>
          </button>
 
          {% if additional_checkout_buttons and settings.enable_payment_button %}
            <div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
          {% endif %}{% include "dbtfy-trust-badge", position: "cart" %}     
        </div>
      </div>
    </div>
 
  </form>
{% endif %}

 

Thank you in advance!

mkahanding
Tourist
7 0 1

Hello can I use this code for minimal theme? 

Julianff
Visitor
3 0 0

Hello Brian,

I'm with the same doubt, is it possible for you to to send me both cods to my e-mail?

My e-mail is: julian.fernandes99@gmail.com

 

Thank you

Alexxxy
Tourist
10 0 3

Any update on this for the venture theme?

InfernoSP
New Member
4 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!

icloutshop
Visitor
2 0 0

hi Brian I am attempting to do the same thing. I also have the Debut theme. It looks great but i am getting a small error code. Any advice on how I can remedy this issue? 

errorcode.JPG

Vbello
Excursionist
20 0 4

Hi @icloutshop and @BrianAtWork ,

I have exactly the same two Liquid errors (line 12 and line 28), could you solve this?

Thanks a lot for your help!!

wisdomesellers
Tourist
6 0 1

Hi, I get this same error. Did you ever figure out a solution?

Thanks

Vbello
Excursionist
20 0 4

No, nobody got back to me 😞

wisdomesellers
Tourist
6 0 1

Ok Thanks, if I ever get a solution I'll post it here.

Hurratul
Visitor
3 0 0

It is not working with DEBUT theme 

 

Liquid error (sections/cart-template.liquid line 12): Could not find asset snippets/banana-stand-cart-top-container.liquid

 

This error is coming

Mike717
Shopify Partner
3 0 0

Hey, it doesn't work well for debut theme, can you please help:

 

Screenshot 2021-02-23 at 01.57.48.jpg

c3ng
Visitor
1 0 0

Hi Brian! 

I'm also trying to update the cart page to show the amount of discount the customer is getting. However, when I follow the steps to my Minimal Shopify Theme, it causes the product images in the cart to get really large. Is there a way to modify this code for the Minimal Theme?

Courtney

harrypotter123
Visitor
2 0 1

Works fine but I am getting an error msg in the cart: (I am using debut theme = there is no theme.scss but theme.css = I've pasted the 1st chunk of code there. please advice:

 

Error msg:

 

Liquid error (sections/cart-template.liquid line 28): Could not find asset snippets/hs-image-utils.liquid
harrypotter123
Visitor
2 0 1

Just figured out the solution for debut theme error in line 28: replace the line 27,18,19 with this code

 

<div class="cart__product-information">
<div class="cart__image-wrapper">
<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>
</div>
<div>

 

(this is the part of your original code) Enjoy!!

PaulNewton
Shopify Partner
6274 573 1318

If merchants need professional assistance to get this customization taken care of for their store, contact me by DM or email .

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


UyenP
Visitor
1 0 0

Hello Brian, 

   Would you mind creating a code to show the total discounted price for the minimal theme? I tried the codes above but my cart page looked really off and I'm guessing that it is because it's meant to be used for another theme. Thank you. 

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
Visitor
2 0 0

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

honeybubbleshop
Visitor
1 0 0

Hi @BrianAtWork,

 

We are trying to implement this exact functionality using Shopify's paid Impulse theme. Would love some assistance with the code if you wouldn't mind? Thanks so much! 

BrianAtWork
Shopify Partner
245 59 184

Hi @honeybubbleshop,

Welcome to the Shopify community – and thank you for reaching out to me.

For further assistance, please send me a link to your website via private message or email.

 

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

Aye13
Visitor
1 0 0

Hi Brian,

I am also using the Debut theme and have trouble trying to show the summary of discount for Subtotal at Cart level. I would like the cart page to look something like this. Would you be able to help? Thank you.

5796DFEC-1764-447B-AC2F-7F32ACEB83E6.png

darncheap
Tourist
3 0 1

Hi Brian! i am looking to do a similar thing for my checkout... but i'm running into issues. im currently using the theme empire. i would like to display total savings as well. can you help?

mdab25
Visitor
2 0 0

Were you able to get this done to your theme? Im using empire too and wanted the same thing done.. Cheers

VikyKumar
Tourist
3 0 0

Hi Brian,

How are you doing?

I am also stuck with the same issue. I tried your given method but of course, it didn't work for me due to a different theme. I would greatly appreciate it if you can help me to fix this for my store I am using a Shopify Venture Theme.

Thanks

Viky

Alexxxy
Tourist
10 0 3

Nothing?

malika03
Visitor
1 0 0

Can you do this for my website? i really really need this!