Displaying custom value on cart page Shopify
Hello,
I am working on a website and I have a question regarding the cart page.
In my store, we have 3 products, :
- 2 of the products are individuals with current price only NO compare price.
- the third product is a bundle and it has a before price and current price therefore it activates (compare-at-price)
Next is an image to show an example for the cart having the two types or prices:
The following image has numbering to ease my explanation for the question:
I want to dynamically display the difference between the numbers in (1), based on the above image I want to display 600 inside (3) or exactly after the text "You're saving".
a few notes on this before I show the codes:
- 2 is a subtotal snippet that will update on changing quantity of items in the cart, the subtotal number updates and works properly:
- I want to display the value in (3) for each item that has a compare price to it, with that said, the third product does have variants and the variants will show up as individual cart item.
With that said I will introduce the codes for all relevant sections.
1. Code for the cart itself (cart.liquid) :
<!-- /sections/cart.liquid -->
{%- liquid
assign hide_quantity = 'quantity--hide'
if settings.cart_show_quantity
assign hide_quantity = ''
endif
assign ajax_disable = false
assign no_ajax_class = ''
if settings.cart_style == 'compatible'
assign ajax_disable = true
assign no_ajax_class = 'no--ajax'
endif
assign full_init = ''
assign empty_init = 'cart--hidden'
if cart.item_count == 0
assign empty_init = ''
assign full_init = 'cart--hidden'
endif
-%}
<div class="cart__template {{ no_ajax_class }} {{ hide_quantity }}" data-section-id="{{ section.id }}" data-section-type="cart" data-ajax-disable="{{ ajax_disable }}">
{% comment %} Cart is empty {% endcomment %}
<div class="{{ empty_init }}" data-cart-empty>
{% render 'cart-empty' %}
</div>
{% comment %} Cart is full {% endcomment %}
<div class="wrapper pt2 pb4 {{ full_init }}" data-cart-form data-cart-loading>
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart">
{% comment %} <h3 class="h3--body">{{ 'cart.general.title' | t }}</h3>
<div class="errors" data-form-errors style="display: none;"></div>
<div class="cart__items__grid cart__heading__wrapper">
<div class="cart__heading__back">
<a href="{{ routes.all_products_collection_url }}" class="cart__heading cart__return">
{% render 'icon-arrow-long-left' %}
{{ 'cart.general.continue_browsing' | t }}
</a>
</div>
<div class="cart__items__price">
<p class="cart__heading">{{ 'cart.label.price' | t }}</p>
</div>
<div class="cart__items__quantity">
<p class="cart__heading">{{ 'cart.label.quantity' | t }}</p>
</div>
<div class="cart__items__total">
<p class="cart__heading">{{ 'cart.label.total' | t }}</p>
</div>
</div> {% endcomment %}
<div class="template__cart__body">
<div class="errors" data-form-errors style="display: none;"></div>
<div class="template-cart-discount-subtotal .template__cart__footer">
<div class="page__footer__subtotal" data-cart-subtotal>
<!-- Sahel -->
{% render 'cart-subtotal' %}
</div>
</div>
<div class="cart__footer__total">
<div class="cart__page__shipping">
{% assign free_shipping_text = block.settings.message | default: settings.message %}
{% assign is_enable = false %}
{% assign show_wheel = true %}
{% if block.settings.show_wheel == false %}
{% assign show_wheel = false %}
{% endif %}
{% if block.settings.message != blank %}
{% assign is_enable = true %}
{% endif %}
{% if settings.show_free_shipping_message and settings.free_shipping_limit != blank and free_shipping_text != blank %}
{% assign is_enable = true %}
{% endif %}
{% if is_enable %}
{% assign limit = settings.free_shipping_limit | plus: 0 %}
{% assign limit_currency = limit | times: 100 %}
{% assign subtotal_without_currency = cart.total_price | plus: 0 | divided_by: 100 %}
{% capture left_to_spend %}
<span data-left-to-spend>{{ limit_currency | minus: cart.total_price | money_without_trailing_zeros }}</span>
{% endcapture %}
{% assign free_shipping_message = free_shipping_text | replace: '||amount||', left_to_spend %}
{% assign qualified_shipping_message = 'cart.general.qualified_shipping_message' | t %}
{% assign class_message = '' %}
{% if subtotal_without_currency >= limit %}
{% if qualified_shipping_message != blank %}
{% assign class_message = 'is-success' %}
{% else %}
{% assign class_message = 'is-hidden' %}
{% endif %}
{% elsif subtotal_without_currency == 0 %}
{% comment %} {% assign class_message = 'is-hidden' %} {% endcomment %}
{% endif %}
<div class="div-block-11">
<div id="barBox" class="div-block-10" style=" width: {{ cart.total_price | remove: '00' | divided_by: 2 }}% ;"></div>
</div>
<p class="cart__message {{ class_message }}" data-cart-message="{% if qualified_shipping_message != blank %}true{% else %}false{% endif %}" data-limit="{{ limit }}">
{% if show_wheel %}
{% assign percent = limit | minus: subtotal_without_currency | times: 100 | divided_by: limit %}
{% assign percent = 100 | minus: percent %}
{% if percent > 100 %}
{% assign percent = 100 %}
{% endif %}
<small class="cart__graph">
{% for i in (1..6) %}
<small class="cart__graph-dot cart__graph-dot--{{ i }}"></small>
{% endfor %}
{%- assign stroke_dashoffset = '87.96459430051421' -%}
{%- if settings.cart_style == 'compatible' -%}
{%- assign math_pi = 3.14159265359 -%}
{%- assign stroke_circumference = 28 | times: math_pi -%}
{%- assign stroke_calculate = percent | times: stroke_circumference -%}
{%- assign stroke_calculate = stroke_calculate | divided_by: 100 | divided_by: 2 -%}
{%- assign stroke_dashoffset = stroke_circumference | minus: stroke_calculate -%}
{%- endif -%}
<svg height="18" width="18">
<circle r="7" cx="9" cy="9" />
<circle class="cart__graph-progress" stroke-dasharray="87.96459430051421 87.96459430051421" style="stroke-dashoffset: {{ stroke_dashoffset }}" data-cart-progress data-percent="{{ percent }}" r="7" cx="9" cy="9" />
</svg>
</small>
{% endif %}
{% if qualified_shipping_message != blank %}
<span class="cart__message-success">{{ qualified_shipping_message }}</span>
{% endif %}
<span class="cart__message-default">
{{ free_shipping_message }}
</span>
</p>
{% endif %}
</div>
<!-- <p class="cart__footer__small">{{ 'cart.general.shipping_at_checkout' | t }}</p> -->
</div>
<div class="product__text-with-icon" {{ block.shopify_attributes }}>
<div class="hs-pill product-people__circle"></div>
<p><span id="people-num1"></span>{{ 'people are currently checking out' }}</p>
</div>
<div data-cart-form class="cart-items-wrapper">
{% comment %}
The following snippet is refreshed via ajax with
cart.items.liquid when the quantity is adjusted.
{% endcomment %}
<div data-line-items>
{% render 'cart-line-items' %}
</div>
</div>
<div class="template__cart__footer" data-cart-bottom>
<div class="cart__footer__notes">
{%- if settings.cart_notes_enable -%}
<label class="cart__notes__label" for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions" data-cart-note>{{ cart.note }}</textarea>
{%- endif -%}
</div>
<div class="cart__footer__shipping">
{%- if settings.cart_shipping_enable -%}
{% render 'cart-shipping' %}
{%- endif -%}
</div>
<div class="cart__footer__checkout">
<button type="submit" name="checkout" class="btn btn--primary btn--large uppercase checkout__button">
{{ 'cart.general.checkout' | t }}
</button>
<ul class="footer-payment payment-icons inline-list">
{% for type in shop.enabled_payment_types %}
<li>
{{ type | payment_type_svg_tag: class: 'payment-icon' }}
<span class="visually-hidden">{{ type | capitalize | replace: '_', ' ' }}</span>
</li>
{% endfor %}
</ul>
</div>
<div class="cart__footer__update">
<span class="cart__update" data-update-button>
<span class="cart__update__icon">{% render 'icon-sync' %}</span>
<button type="submit" name="update" class="text-link">
{{ 'cart.general.update' | t }}
</button>
</span>
</div>
{% if additional_checkout_buttons and settings.cart_show_additional_buttons %}
<div class="cart__footer__additional">
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
</div>
{% endif %}
</div>
{% render 'Upsell-Image' %}
</div>
</form>
</div>
</div>2. Code for the line.item (all thiv surrounding (1)):
{%- assign pair_products_index = '' -%}
{%- assign cart_products = '' -%}
<div id="drawer-cart-toggler" class="cart__items" >
{% for line_item in cart.items %}
<div class="cart__items__row" data-cart-item>
<div class="item--loadbar" style="display: none;"> </div>
<div class="cart__items__grid" data-item>
<div class="cart__items__title">
<p>
<a href="{{ line_item.url }}">
{{ line_item.product.title }}
</a>
</p>
<div class="cart__items__meta">
{% comment %} Vendor if enabled {% endcomment %}
{% if settings.cart_vendor_enable %}
<p class="small">{{ line_item.vendor }}</p>
{% endif %}
{% comment %} Variant as name/name/name {% endcomment %}
{% unless line_item.product.has_only_default_variant %}
<p class="small">{{ line_item.variant.title }}</p>
{% endunless %}
{% comment %} Subscription plan name {% endcomment %}
{% if line_item.selling_plan_allocation %}
<p class="small">{{ line_item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}
{% comment %} Line item properties, including files {% endcomment %}
{% assign property_size = line_item.properties | size %}
{%- if property_size > 0 -%}
{%- for p in line_item.properties -%}
{%- assign property_first_char = p.first | slice: 0 -%}
{%- if p.last != blank and property_first_char != '_' -%}
<p class="small">
<span>{{ p.first }}: </span>
<span>
{%- if p.last contains '/uploads/' -%}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{%- else -%}
{{ p.last }}
{%- endif -%}
</span>
</p>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
<div class="cart__items__image">
<a href="{{ line_item.url }}">
<img class="cart__items__img" src="{{ line_item | img_url: '180x' }}" alt="{{ line_item.title | strip_html | escape }}">
</a>
</div>
<div class="cart-item-numbers">
<div class="cart__items__price">
<p class="line__price">
{%- assign discounted = false -%}
{%- if line_item.original_price > line_item.final_price -%}
{%- assign discounted = true -%}
{%- endif -%}
{%- assign sale = false -%}
{%- if line_item.variant.compare_at_price > line_item.variant.price -%}
{%- assign sale = true -%}
{%- endif -%}
{% assign quantity-multiplier = line_item.quantity %}
{%- if sale -%}
<del class="sale">was {{ line_item.variant.compare_at_price | times: quantity-multiplier | money}}</del>
{%- endif -%}
{%- if discounted -%}
<del class="discount">was {{ line_item.original_price | times: quantity-multiplier | money }}</del>
{%- endif -%}
{%- if sale or discounted -%}
<mark>{{ line_item.final_price | times: quantity-multiplier | money }}</mark>
{%- else -%}
{{ line_item.final_price | times: quantity-multiplier | money }}
{%- endif -%}
</p>
{% if line_item.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 line_item.unit_price_measurement.reference_value != 1 %}
{{ line_item.unit_price_measurement.reference_value }}
{% endif %}
{{ line_item.unit_price_measurement.reference_unit }}
{% endcapture %}
<p class="line__price">
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
<span>{{ line_item.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
</p>
{% endif %}
</div>
{% assign single-prouct-price = line_item.original_price %}
<div class="cart__items__quantity">
<div class="quantity__wrapper" data-quantity-selector>
<button
class="quantity__button quantity__button--minus"
data-decrease-quantity type="button"
{% if line_item.product.title == 'The Ultimate Whitening Bundle' %}
onclick="editBar({{ cart.total_price | minus: single-prouct-price}}); updateSavings({{ line_item.variant.compare_at_price | times: quantity-multiplier}});"
{% else %}
onclick="editBar({{ cart.total_price | minus: single-prouct-price}})"
{% endif %}
>
−
</button>
<label for="updates_{{ line_item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
<input data-quantity-input
data-update-cart="{{ line_item.key }}"
class="quantity__input"
type="number"
min="0"
size="4"
pattern="[0-9]*"
id="updates_{{ line_item.key }}"
name="updates[]"
value="{{ line_item.quantity }}"
disabled/>
<button
class="quantity__button quantity__button--plus"
data-increase-quantity type="button"
{% if line_item.product.title == 'The Ultimate Whitening Bundle' %}
onclick="editBar({{ cart.total_price | plus: single-prouct-price}}); updateSavings({{ line_item.variant.compare_at_price | times: quantity-multiplier}});"
{% else %}
onclick="editBar({{ cart.total_price | plus: single-prouct-price}})"
{% endif %}
>
+
</button>
</div>
</div>
</div>
{% assign multiplier = single-prouct-price | times: quantity-multiplier %}
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&quantity=0"
class="cart__items__remove"
data-remove-key="{{ line_item.key }}"
tabindex="0"
onclick="editBar({{ cart.total_price | minus: multiplier }})">
<span class="cart__remove__icon">
{%- render 'icon-bin' -%}
</span>
</a>
{% render 'cart-expand', product: line_item.product %}
{% if discounted and line_item.quantity >= 1 %}
{%- for discount in line_item.line_level_discount_allocations -%}
<div class="cart__items__savings">
<span class="item__total__savings">
<span class="cart__icon--tags">
{% render 'icon-tags' %}
</span>
{{ 'cart.general.savings' | t }}
{{ discount.amount | money_without_trailing_zeros }}
{{ 'cart.general.with' | t }}
{{ discount.discount_application.title }}
</span>
</div>
{%- endfor -%}
{% endif %}
</div>
</div>
{%- assign cart_products = cart_products | append: line_item.product.id | append: ',' -%}
{%- assign upsell = line_item.product.metafields.theme.upsell -%}
{%- if upsell.value != nil and upsell.type == 'product_reference' -%}
{%- assign pair_products_index = pair_products_index | append: forloop.index0 | append: ',' -%}
{%- endif -%}
{% endfor %}
</div>
{%- if pair_products_index != '' -%}
{%- assign pair_products_index = pair_products_index | split: ',' -%}
{%- assign cart_products = cart_products | prepend: ',' -%}
{%- for index in pair_products_index -%}
{%- assign arr_index = index | plus: 0 -%}
{%- assign upsell_product = cart.items[arr_index].product.metafields.theme.upsell.value -%}
{%- if cart_products contains upsell_product.id or upsell_product.available == false -%}
{%- continue -%}
{%- endif -%}
{%- render 'upsell-product' upsell_product: upsell_product -%}
{%- break -%}
{%- endfor -%}
{%- endif -%}
<script>
function editBar(a) {
console.log('updatebar' , a);
a = a/200;
var barBox = document.getElementById('barBox');
barBox.style.width = a + "%";
console.log('done' , a);
}
function updateSavings(b) {
console.log('updateSavings' , b);
var cartSavings = document.getElementById('cartSavings');
cartSavings.innerHTML = b;
console.log('done' , b);
}
</script>3. Code for the cart subtotal section (2):
{%- if cart.cart_level_discount_applications.size >= 0 -%}
<div class="count-subtotal-wrapper">
<p> Your cart</p>
<p>
<span class="cart__footer__value" data-cart-final>{{ cart.total_price | money }}</span>
</p>
</div>
<p class="cart__footer__discount">
<span class="cart__footer__label">You're saving </span>
<span id="cartSavings" class="cart__footer__value"> </span>
</p>
{%- endif -%}
The aim of this is to show to the customer the amount off money they are saving just by buying the bundle product.
Community Blog Articles
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
New learning path from Shopify Academy: How to create a digital marketing s...
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025