Mini Cart Popover

About this module

A lightweight Shopify mini cart that opens as a popover from the header cart icon, showing a few line items and a subtotal.

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-mini-cart, 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-mini-cart` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-mini">
     <button class="mh-mini-trigger" data-trigger>
       <span class="mh-mini-icon">🛒</span>
       <span class="mh-mini-count" data-count>0</span>
     </button>
     <div class="mh-mini-pop" data-pop>
       <header class="mh-mini-head"><span>{{ section.settings.heading }}</span><button class="mh-mini-close" data-close>×</button></header>
       <div class="mh-mini-items" data-items></div>
       <footer class="mh-mini-foot">
         <div class="mh-mini-sub"><span>Subtotal</span><span data-sub>$0.00</span></div>
         <a href="/cart" class="mh-mini-view">{{ section.settings.view_cart_label }}</a>
         <button class="mh-mini-check" data-checkout>{{ section.settings.checkout_label }}</button>
       </footer>
     </div>
   </div>
   
   <script>
   const mini=document.querySelector('.mh-mini');
   document.querySelector('[data-trigger]').onclick=()=>{mini.querySelector('[data-pop]').classList.toggle('open');};
   document.querySelector('[data-close]').onclick=()=>mini.querySelector('[data-pop]').classList.remove('open');
   document.addEventListener('click',e=>{if(!mini.contains(e.target))mini.querySelector('[data-pop]').classList.remove('open');});
   </script>
   
   {% schema %}
   {
     "name": "MH Mini Cart",
     "tag": "div",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Mini cart" },
       { "type": "text", "id": "view_cart_label", "label": "View cart label", "default": "View cart" },
       { "type": "text", "id": "checkout_label", "label": "Checkout label", "default": "Checkout" }
     ],
     "presets": [{ "name": "MH Mini Cart", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.