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

Solved
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

0 Likes
Shopify Partner
452 78 85

@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).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Explorer
134 32 38

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

0 Likes
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

0 Likes
Excursionist
44 0 4

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

0 Likes

Success.

Explorer
134 32 38

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

1 Like
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?
0 Likes
Explorer
134 32 38

@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

0 Likes
Highlighted
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!!! 

0 Likes
Explorer
134 32 38

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

2 Likes