Add free shipping progress bar - Dawn theme shopify

Shopify › Dawn › Theme
, ,

Before you start it

  • Dawn theme version at this post is 6.0.2
  • Duplicate your theme

Quick Look 👀

Getting started ✏️

main-product.liquid

  • Online store > themes > Actions > Edit code > Snippets > cart-drawer.liquid

  • find {%- if cart != empty -%}

1
2
3
{%- if settings.cart_show_free_shipping_threshold -%}
     {%- render 'cart-progress-bar' -%}
{%- endif -%}

cart-progress-bar.liquid

  • Snippets > cart-progress-bar.liquid

  • paste code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{% style %}
.progress-bar {
  height: 2px;
  background: #fcfbf7;
  border-radius: 3px;
  margin: 10px auto; }

.progress-percentage {
  height: 2px;
  background: #e56d6b;
  border-radiud: 3px;
  position: relative;
  animation: fillBars 2.5s 1;
  display: block!important;
}
.Cart__ShippingProgress {
  background: #f0ebe5;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
@keyframes fillBars {
  from {
    width: 0; 
  }
  to {
    width: 100%; 
  }
}
{% endstyle %}

{%- assign threshold_in_cents = settings.cart_free_shipping_threshold | times: 100 -%}
{%- assign free_standard_threshold_in_cents = settings.cart_free_standard_shipping_threshold | times: 100 -%}
{%- assign free_shipping_percentage = cart.total_price | times: 100  | divided_by: threshold_in_cents -%}
<div class="Cart__ShippingProgress" data-cart-total-price="{{cart.total_price}}" data-free-standard-threshold-in-cents="{{free_standard_threshold_in_cents}}" data-threshold-in-cents="{{threshold_in_cents}}">
  <div class="Drawer__Container">
    <div class="progress-bar"><div class="progress-percentage" per="{{ free_shipping_percentage }}%" style="max-width:{{ free_shipping_percentage }}%"></div></div>
    {%- if cart.total_price >= threshold_in_cents -%}
      <small>{{- 'sections.cart.free_shipping' | t -}}</small>
    {%- else -%}
      {%- capture remaining_amount -%}<span data-money-convertible>{{ cart.total_price | minus: threshold_in_cents | abs | money_without_trailing_zeros }}</span>{%- endcapture -%}
      <small>{{- 'sections.cart.free_shipping_remaining_html' | t: remaining_amount: remaining_amount -}}</small>
    {%- endif -%}
  </div>
</div>

Locales > en.default.json. Insert translations settings

1
2
"free_shipping": "You are eligible for free shipping!",
"free_shipping_remaining_html": "Spend {{remaining_amount}} more and get free shipping!",

How to use

  • Online store > themes > Customize

  • Theme settings > Cart