Shopify themes, liquid, logos, and UX
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.
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
Solved! Go to the solution
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?
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
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.
Thanks for the reply! Great, I will keep it in mind, thank you!
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.
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
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 }}&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 }}&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
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?
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 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:
[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 }}&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 }}&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
Awesome Brain! It works!
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!!!
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
@BrianAtWork That was clean and clear! 🙂
I am trying to do the same for Turbo, could you please help me?
Thank you!
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>
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
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!!
@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,
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.
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.
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 😄
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 }}&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 }} </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 %}
@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!
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 !
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
Thank you in advance!
Hello can I use this code for minimal theme?
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
Any update on this for the venture theme?
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?
Again, thank you!
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?
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!!
Hi, I get this same error. Did you ever figure out a solution?
Thanks
No, nobody got back to me 😞
Ok Thanks, if I ever get a solution I'll post it here.
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
Hey, it doesn't work well for debut theme, can you please help:
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
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 |
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!!
If merchants need professional assistance to get this customization taken care of for their store, contact me by DM or email .
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
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.
Will this work with dawn theme?
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:
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
Hi, i also have brooklyn, how did you add this code? i want it also 😄
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!
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
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.
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?
Were you able to get this done to your theme? Im using empire too and wanted the same thing done.. Cheers
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
Nothing?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024