How to Add a Slide-Out Cart to Shopify Without an App

{% comment %}
  Custom Native Cart Drawer Section
  File: sections/custom-cart-drawer.liquid
{% endcomment %}


  

  

    
    
    

      
Your Cart ({{ cart.item_count }})
      
        ×
      
    

    
    {% assign free_shipping_threshold = section.settings.free_shipping_threshold | times: 100 %}
    {% if free_shipping_threshold > 0 %}
      

        {% assign cart_total = cart.total_price %}
        {% if cart_total >= free_shipping_threshold %}
          
You have unlocked Free Standard Shipping!
          

        {% else %}
          {% assign amount_remaining = free_shipping_threshold | minus: cart_total %}
          
Add {{ amount_remaining | money }} more to unlock Free Shipping.
          {% assign progress_percentage = cart_total | times: 100.0 | divided_by: free_shipping_threshold %}
          

        {% endif %}
      
    {% endif %}

    
    

      {% if cart.items.size == 0 %}
        

          
Your shopping cart is empty.
          Start Shopping
        
      {% else %}
        

          {% for item in cart.items %}
            

              

                
              
              

                {{ item.product.title }}
                {% unless item.product.has_only_default_variant %}
                  
{{ item.variant.title }}
                {% endunless %}
                
{{ item.final_line_price | money }}

                
                

                  -
                  
                  +
                
              
              
                Remove
              
            
          {% endfor %}
        
      {% endif %}
    

    
    {% if cart.items.size > 0 %}
      

        

          Subtotal
          {{ cart.total_price | money }}
        
        
Taxes and shipping calculated at checkout.
        
          Proceed to Checkout • {{ cart.total_price | money }}
        
      
    {% endif %}

  


{% schema %}
{
  "name": "Custom Cart Drawer",
  "settings": [
    {
      "type": "number",
      "id": "free_shipping_threshold",
      "label": "Free Shipping Threshold ($)",
      "default": 75
    }
  ]
}
{% endschema %}

/* ==========================================================================
   Custom Native Cart Drawer Styles
   File: assets/custom-cart-drawer.css
   ========================================================================== */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.cart-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cart-drawer.is-open .cart-drawer__overlay {
  opacity: 1;
}

.cart-drawer__container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background-color: #ffffff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.cart-drawer.is-open .cart-drawer__container {
  transform: translateX(0);
}

.cart-drawer__header {
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

.cart-drawer__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.cart-drawer__close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}

/* Shipping Meter Styles */
.cart-drawer__shipping-bar {
  padding: 0.85rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.shipping-bar__text {
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
  color: #374151;
}

.shipping-bar__meter {
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.shipping-bar__meter span {
  display: block;
  height: 100%;
  background-color: #10b981;
  transition: width 0.4s ease;
}

/* Items List */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.cart-item__image-wrapper img {
  border-radius: 6px;
  object-fit: cover;
}

.cart-item__details {
  flex: 1;
}

.cart-item__title {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: #111827;
  display: block;
  margin-bottom: 0.25rem;
}

.cart-item__variant {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0 0 0.5rem 0;
}

.cart-item__price {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.cart-item__quantity-selector {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.qty-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-weight: bold;
}

.cart-item__quantity-selector input {
  width: 32px;
  text-align: center;
  border: none;
  font-size: 0.85rem;
}

.cart-item__remove {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #ef4444;
  cursor: pointer;
  align-self: flex-start;
}

/* Footer Section */
.cart-drawer__footer {
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cart-drawer__tax-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.cart-drawer__checkout-btn {
  display: block;
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 0.95rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.cart-drawer__checkout-btn:hover {
  opacity: 0.9;
}

/**
 * Native Cart Drawer Architecture
 * File: assets/custom-cart-drawer.js
 */

class NativeCartDrawer {
  constructor() {
    this.drawer = document.getElementById('CustomCartDrawer');
    if (!this.drawer) return;
    
    this.sectionId = this.drawer.dataset.sectionId;
    this.init();
  }

  init() {
    this.bindEvents();
    this.interceptProductForms();
  }

  bindEvents() {
    document.addEventListener('click', (e) => {
      if (e.target.closest('[data-cart-drawer-close]')) {
        this.close();
      }
      
      const qtyBtn = e.target.closest('.qty-btn');
      if (qtyBtn) {
        this.handleQuantityChange(qtyBtn);
      }

      const removeBtn = e.target.closest('.cart-item__remove');
      if (removeBtn) {
        this.handleItemRemoval(removeBtn);
      }
    });

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && this.drawer.classList.contains('is-open')) {
        this.close();
      }
    });
  }

  open() {
    this.drawer.classList.add('is-open');
    this.drawer.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
  }

  close() {
    this.drawer.classList.remove('is-open');
    this.drawer.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  }

  interceptProductForms() {
    document.addEventListener('submit', async (e) => {
      const form = e.target.closest('form[action*="/cart/add"]');
      if (!form) return;

      e.preventDefault();
      const submitBtn = form.querySelector('[type="submit"]');
      if (submitBtn) submitBtn.disabled = true;

      const formData = new FormData(form);

      try {
        const response = await fetch('/cart/add.js', {
          method: 'POST',
          body: formData,
          headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });

        if (!response.ok) throw new Error('Network response was not ok');

        await this.refreshCart();
        this.open();
      } catch (error) {
        console.error('Add to cart error:', error);
      } finally {
        if (submitBtn) submitBtn.disabled = false;
      }
    });
  }

  async handleQuantityChange(button) {
    const key = button.dataset.key;
    const action = button.dataset.action;
    const input = button.parentElement.querySelector('input');
    let currentQty = parseInt(input.value, 10);
    let newQty = action === 'increment' ? currentQty + 1 : currentQty - 1;

    await this.updateCartItem(key, newQty);
  }

  async handleItemRemoval(button) {
    const key = button.dataset.key;
    await this.updateCartItem(key, 0);
  }

  async updateCartItem(key, quantity) {
    try {
      const response = await fetch('/cart/change.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({ id: key, quantity: quantity })
      });

      if (!response.ok) throw new Error('Cart update failed');

      await this.refreshCart();
    } catch (error) {
      console.error('Failed to update line item:', error);
    }
  }

  async refreshCart() {
    try {
      const response = await fetch(`/?sections=custom-cart-drawer`);
      const data = await response.json();
      const htmlString = data['custom-cart-drawer'];

      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, 'text/html');
      const newDrawerContent = doc.getElementById('CustomCartDrawer').innerHTML;

      this.drawer.innerHTML = newDrawerContent;
    } catch (error) {
      console.error('Section rendering refresh failed:', error);
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  window.customCartDrawer = new NativeCartDrawer();
});

  
  {{ 'custom-cart-drawer.css' | asset_url | stylesheet_tag }}
  {% section 'custom-cart-drawer' %}
  <script src="{{ 'custom-cart-drawer.js' | asset_url }}" defer="defer"></script>
</body>
</html>