Cart Drawer

About this module

A polished Shopify cart drawer that slides in from the right, lists line items with quantity steppers, and shows subtotal plus a checkout button.

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

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <cart-drawer class="mh-cd" data-open="false">
     <div class="mh-cd-backdrop" data-backdrop></div>
     <aside class="mh-cd-panel" role="dialog" aria-label="Shopping cart">
       <header class="mh-cd-head">
         <span class="mh-cd-title">{{ section.settings.heading }}</span>
         <button class="mh-cd-close" data-close aria-label="Close cart">×</button>
       </header>
   
       <div class="mh-cd-shipping" data-shipping>
         <div class="mh-cd-progress"><span data-shipping-bar></span></div>
         <p class="mh-cd-shipping-text" data-shipping-text></p>
       </div>
   
       <div class="mh-cd-items" data-items>
         <div class="mh-cd-empty">{{ section.settings.empty_message }}</div>
       </div>
   
       <footer class="mh-cd-foot">
         <div class="mh-cd-subtotal">
           <span>Subtotal</span><span data-subtotal>$0.00</span>
         </div>
         <form action="/cart" method="post">
           <button type="submit" class="mh-cd-checkout">{{ section.settings.checkout_label }}</button>
         </form>
       </footer>
     </aside>
   </cart-drawer>
   
   <script>
   class CartDrawer extends HTMLElement {
     connectedCallback(){
       const panel=this.querySelector('.mh-cd-panel'),bd=this.querySelector('[data-backdrop]');
       window.MHOpenCart=()=>{this.dataset.open='true';bd.style.opacity='1';panel.style.transform='translateX(0)';document.body.style.overflow='hidden';};
       window.MHCloseCart=()=>{this.dataset.open='false';panel.style.transform='translateX(100%)';bd.style.opacity='0';document.body.style.overflow='';};
       this.querySelector('[data-close]').onclick=window.MHCloseCart;
       bd.onclick=window.MHCloseCart;
       document.addEventListener('keydown',e=>{if(e.key==='Escape')window.MHCloseCart&&window.MHCloseCart();});
     }
   }
   customElements.define('cart-drawer',CartDrawer);
   </script>
   
   {% schema %}
   {
     "name": "MH Cart Drawer",
     "tag": "div",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Your cart" },
       { "type": "text", "id": "checkout_label", "label": "Checkout button", "default": "Checkout" },
       { "type": "text", "id": "free_shipping_threshold", "label": "Free shipping threshold", "default": "75" },
       { "type": "text", "id": "empty_message", "label": "Empty message", "default": "Your cart is empty." }
     ],
     "presets": [{ "name": "MH Cart Drawer", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.