Personalized checkout and custom promotions with Shopify Scripts
Ive added a script, to my site to the cart page to countdown for free shipping - free shipping on orders over £50 for UK
🚚Congrats! You've got free shipping within the UK!
It seems to be glitchy though - can anyone work out why? It seems to only work if you refresh your browser
Code I have used is - theme is IMPULSE
I added this to my snippet ,
{%- if settings.cart_type == 'drawer' -%}
<div id="CartDrawer" class="drawer drawer--right">
<form id="CartDrawerForm" action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="h2 drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>
<div class="drawer__inner">
<div class="drawer__scrollable">
<div data-products class="appear-animation appear-delay-2"></div>
{% if settings.cart_notes_enable %}
<div class="appear-animation appear-delay-3">
<label for="CartNoteDrawer">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartNoteDrawer">{{ cart.note }}</textarea>
</div>
{% endif %}
</div>
<div class="drawer__footer appear-animation appear-delay-4">
<div data-discounts>
{% if cart.cart_level_discount_applications != blank %}
<div class="cart__discounts cart__item-sub cart__item-row">
<div>{{ 'cart.general.discounts' | t }}</div>
<div class="text-right">
{% for cart_discount in cart.cart_level_discount_applications %}
<div class="cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="cart__item-sub cart__item-row">
<div class="ajaxcart__subtotal">{{ 'cart.general.subtotal' | t }}</div>
<div data-subtotal>{{ cart.total_price | money }}</div>
</div>
<div class="cart__item-row text-center">
<small>
<div class="container">
{% assign shipping_value = 5000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
</div>
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
You are {{ shipping_value_left | money }} away from FREE shipping within the UK!<br>
{% else %}
Congrats! You've got free shipping within the UK!
{% endif %}
</p> </small>
</div>
{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTermsDrawer" class="cart__terms-checkbox">
<label for="CartTermsDrawer">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}
<div class="cart__checkout-wrapper">
<button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
{{ 'cart.general.checkout' | t }}
</button>
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</div>
<div class="drawer__cart-empty appear-animation appear-delay-2">
<div class="drawer__scrollable">
{{ 'cart.general.empty' | t }}
</div>
</div>
</form>
</div>
{%- endif -%}
And
<div class="page-width page-content">
{%- render 'breadcrumbs' -%}
<header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<div class="rte text-spacing">
{%- if cart.item_count == 0 -%}
<p>{{ 'cart.general.empty' | t }}</p>
{%- endif -%}
<p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
</div>
</header>
<div class="container">
{% assign shipping_value = 5000 %}
{% assign cart_total = cart.total_price %}
{% assign shipping_value_left = shipping_value | minus: cart_total %}
</div>
<p class="shipping-savings-message">
{% if shipping_value_left > 0 %}
🚚 You are {{ shipping_value_left | money }} away from FREE shipping within the UK!<br>
{% else %}
🚚 Congrats! You've got free shipping within the UK!
{% endif %}
</p>
{%- if cart.item_count > 0 -%}
<form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
<div class="cart__page">
<div data-products class="cart__page-col">
{% for item in cart.items %}
{%- render 'cart-item', product: item -%}
{%- endfor -%}
</div>
<div class="cart__page-col">
{% if settings.cart_notes_enable %}
<div>
<label for="CartNote">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
</div>
{% endif %}
<div data-discounts>
{% if cart.cart_level_discount_applications != blank %}
<div class="cart__discounts cart__item-sub cart__item-row">
<div>{{ 'cart.general.discounts' | t }}</div>
<div class="text-right">
{% for cart_discount in cart.cart_level_discount_applications %}
<div class="cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
<div class="cart__item-sub cart__item-row">
<div>{{ 'cart.general.subtotal' | t }}</div>
<div data-subtotal>{{ cart.total_price | money }}</div>
</div>
{% if settings.cart_terms_conditions_enable %}
<div class="cart__item-row cart__terms">
<input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
<label for="CartTerms">
{% if settings.cart_terms_conditions_page != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</div>
{% endif %}
<div class="cart__item-row cart__checkout-wrapper">
<button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
{{ 'cart.general.checkout' | t }}
</button>
{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
<div class="cart__item-row text-center">
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
</small>
</div>
</div>
</div>
</form>
{%- endif -%}
</div>
{% schema %}
{
"name": "Cart page"
}
{% endschema %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025