Cart — Free Shipping Bar

About this module

A Shopify cart line-item with a motivational free-shipping progress bar and a friendly message that updates as the subtotal grows.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-cart-shipping-bar, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-cart-shipping-bar` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-fsb" data-threshold="{{ section.settings.threshold }}">
     <div class="mh-fsb-track"><div class="mh-fsb-fill" data-fill></div><span class="mh-fsb-pin" data-pin>🚚</span></div>
     <p class="mh-fsb-text" data-text></p>
   </div>
   
   <script>
   (function(){
     var el=document.querySelector('.mh-fsb');
     var threshold=parseFloat(el.dataset.threshold||'75');
     var subtotal=48;
     var fill=el.querySelector('[data-fill]'),pin=el.querySelector('[data-pin]'),text=el.querySelector('[data-text]');
     var pct=Math.min(subtotal/threshold*100,100);
     fill.style.width=pct+'%';
     pin.style.left='calc('+pct+'% - 12px)';
     text.textContent= subtotal>=threshold ? '{{ section.settings.success_message }}' : '{{ section.settings.progress_message }}';
   })();
   </script>
   
   {% schema %}
   {
     "name": "MH Cart Shipping Bar",
     "tag": "div",
     "settings": [
       { "type": "text", "id": "threshold", "label": "Free shipping threshold", "default": "75" },
       { "type": "text", "id": "progress_message", "label": "Progress message", "default": "You're $27.00 away from free shipping!" },
       { "type": "text", "id": "success_message", "label": "Success message", "default": "You've unlocked free shipping 🎉" }
     ],
     "presets": [{ "name": "MH Cart Shipping Bar", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.