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
Hey, any chance you can help do this on my site? I would love people to see how much they saved when checking out!!
Hello.
I hope you are well. Are you able to help me implement this on my store please. I am using the dawn theme. Hope to hear from you soon. Not having this is killing my conversion. Thanks. Tom
I need help with my cart in implementing same. Not able to do. Can you help?
Hi @BrianAtWork ; I'd like to have the same, can you please message me or email me? thank you
Hi Brian,
Can you please help me too,
I'm using Prestige theme, my cart.liquid and cart-template.liquid are as follows:
Cart.liquid:
{% include 'elspw_cart' %}
{% section 'cart-template' %}
{% section 'recently-viewed-products' %}
{% render 'nosto-element', id:'cartpage-nosto-1' %}
{% render 'nosto-element', id:'cartpage-nosto-2' %}
{% render 'nosto-element', id:'cartpage-nosto-3' %}
Cart-template.liquid:
{%- capture section_settings -%}
{
"type": {{ settings.cart_type | json }},
"itemCount": {{ cart.item_count }},
"drawer": false,
"hasShippingEstimator": {% if section.settings.show_shipping_estimator and cart.item_count > 0 %}true{% else %}false{% endif %}
}
{%- endcapture -%}
<section data-section-id="{{ section.id }}" data-section-type="cart" data-section-settings='{{ section_settings }}'>
{%- if cart.item_count == 0 -%}
<div class="EmptyState">
<div class="Container">
<h1 class="EmptyState__Title Heading u-h5">{{ 'cart.general.empty' | t }}</h1>
{%- if settings.cart_show_free_shipping_threshold -%}
{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}
{%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
<p class="Text--subdued">{{- 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}</p>
{%- endif -%}
<a href="{{ routes.all_products_collection_url }}" class="EmptyState__Action Button Button--primary">{{ 'cart.general.empty_button' | t }}</a>
</div>
</div>
{%- else -%}
<div class="Container">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ 'cart.general.title' | t }}</h1>
{%- if settings.cart_show_free_shipping_threshold -%}
{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}
<p class="SectionHeader__Description Text--subdued">
{%- if cart.total_price >= threshold_in_cents -%}
{{- 'cart.general.free_shipping' | t -}}
{%- else -%}
{%- capture remaining_amount -%}<span>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
{{- 'cart.general.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}
{%- endif -%}
</p>
{%- endif -%}
</div>
</header>
<div class="PageContent">
<form action="{{ routes.cart_url }}" method="POST" class="Cart Cart--expanded" novalidate>
<input type="hidden" name="attributes[collection_mobile_items_per_row]" value="">
<input type="hidden" name="attributes[collection_desktop_items_per_row]" value="">
{% render 'cart-items' %}
<footer class="Cart__Footer">
{%- if settings.cart_enable_notes -%}
<div class="Cart__NoteContainer">
<span class="Cart__NoteButton">{{ 'cart.general.add_note' | t }}</span>
<textarea class="Cart__Note Form__Textarea" name="note" id="cart-note" rows="4" placeholder="{{ 'cart.general.note_placeholder' | t }}">{{ cart.note }}</textarea>
</div>
{%- endif -%}
<div class="Cart__Recap">
{%- capture shipping_and_taxes_notice -%}{{ 'cart.general.shipping_and_taxes_notice' | t }}{%- endcapture -%}
{%- if cart.cart_level_discount_applications != blank -%}
{%- for discount_application in cart.cart_level_discount_applications -%}
<p class="Cart__Discount Heading u-h6">{{ 'cart.general.discount' | t }} ({{ discount_application.title }}): -<span>{{ discount_application.total_allocated_amount | money_without_trailing_zeros }}</span></p>
{%- endfor -%}
{%- endif -%}
<p class="Cart__Total Heading u-h6">{{ 'cart.general.total' | t }}: <span>{{ cart.total_price | money_without_trailing_zeros }}</span></p>
{%- if shipping_and_taxes_notice != blank -%}
<p class="Cart__Taxes Text--subdued">{{ shipping_and_taxes_notice }}</p>
{%- endif -%}
<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>
</div>
</footer>
</form>
{%- if section.settings.show_shipping_estimator -%}
<div class="Section Section--spacingExtraLarge">
<div class="Panel">
<h2 class="Panel__Title Heading u-h2">{{ 'cart.shipping_estimator.title' | t }}</h2>
<div class="Panel__Content">
<div class="ShippingEstimator">
<div class="ShippingEstimator__Form">
<div class="ShippingEstimator__Country Form__Select Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}
<select name="country" title="{{ 'cart.shipping_estimator.country' | t }}" data-default="{% if customer %}{{ customer.default_address.country }}{% elsif section.settings.shipping_estimator_default_country != '' %}{{ section.settings.shipping_estimator_default_country }}{% endif %}">{{ all_country_option_tags }}</select>
</div>
<div class="ShippingEstimator__Province Form__Select Select Select--primary" style="display: none">
{%- render 'icon' with 'select-arrow' -%}
<select name="province" title="{{ 'cart.shipping_estimator.province' | t }}"></select>
</div>
<input type="text" class="ShippingEstimator__Zip Form__Input" name="zip" placeholder="{{ 'cart.shipping_estimator.zip_code' | t }}">
<button type="button" class="ShippingEstimator__Submit Button Button--primary">{{ 'cart.shipping_estimator.estimate' | t }}</button>
</div>
<div class="ShippingEstimator__Error Alert Alert--error" style="display: none"></div>
<div class="ShippingEstimator__Results">
<div class="ShippingEstimator__ResultsInner"></div>
</div>
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
</section>
{% schema %}
{
"name": "Cart page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_shipping_estimator",
"label": "Show shipping rates calculator",
"default": true
},
{
"type": "text",
"id": "shipping_estimator_default_country",
"label": "Default country to use",
"info": "If your customer is logged-in, the country in his default shipping address will be selected.",
"default": "United States"
}
]
}
{% endschema %}
I am also using DEBUT theme. Can you help me with the code please ?
Hi! I tried implementing your solution on the Dawn theme but it doesn't work. Can you help me out?
First of all there is no theme.scss only theme.liquid, and I pasted that initial code at the very bottom after /body
/html
Secondly, I don't have cart-template.liquid
I only have
main-cart-footer.liquid
main-cart-items.liquid
component-cart-items.css
component-cart-css
I tried in each one and it doesn't work.
Would your solution work for the Dawn theme and am I doing something wrong?
Thanks!
I’m gonna be totally honest, I have no clue what your talking about ha. I just launched a template site and added crap to the store… I would love to help you figure it out but you are not speaking my language ha. 🥴
@BrianAtWork seems to no longer active here. I am using Dawn, and I'd like to do this on my store.
Anyone got code that will work with Dawn version 5.0, or is there a developer who could do this?
Thanks! I've looked at that and it doesn't show the discount PER PRODUCT just the total. That's my backup if I can't do it this way, but I'd really prefer it the way it's done here.
Hi! Did you get a solution for this? I'd like to do the exact same thing.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024