Skip to main content
Nexus Theme includes advanced cart functionality with drawer interface, cross-sell products, and optimized user experience.

​
Overview

Cart functionality includes:
  • Cart Drawer for seamless shopping experience
  • Cross-Sell Products to increase average order value
  • Quantity Controls with real-time updates
  • Shipping Calculator integration
  • Discount Code application
  • Mobile Optimized responsive design

​
Cart Drawer Implementation

<div class="cart-drawer" data-cart-drawer>
  <div class="cart-drawer__overlay" data-cart-close></div>
  
  <div class="cart-drawer__content">
    <div class="cart-drawer__header">
      <h2 class="cart-drawer__title">Shopping Cart</h2>
      <button class="cart-drawer__close" data-cart-close>×</button>
    </div>
    
    <div class="cart-drawer__items">
      {% for item in cart.items %}
        <div class="cart-item" data-cart-item="{{ item.key }}">
          <div class="cart-item__image">
            <img src="{{ item.image | image_url: width: 100 }}" 
                 alt="{{ item.title | escape }}">
          </div>
          
          <div class="cart-item__content">
            <h3 class="cart-item__title">{{ item.title }}</h3>
            <div class="cart-item__price">{{ item.final_price | money }}</div>
            
            <div class="cart-item__quantity">
              <button class="cart-item__qty-btn" data-cart-qty-minus>-</button>
              <input type="number" 
                     value="{{ item.quantity }}" 
                     min="1" 
                     data-cart-qty-input>
              <button class="cart-item__qty-btn" data-cart-qty-plus>+</button>
            </div>
          </div>
          
          <button class="cart-item__remove" data-cart-remove>×</button>
        </div>
      {% endfor %}
    </div>
    
    <div class="cart-drawer__footer">
      <div class="cart-drawer__subtotal">
        <span>Subtotal:</span>
        <span data-cart-subtotal>{{ cart.total_price | money }}</span>
      </div>
      
      <button class="cart-drawer__checkout" data-cart-checkout>
        Checkout
      </button>
    </div>
  </div>
</div>

​
CSS Styling

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: white;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.cart-drawer.active {
  transform: translateX(0);
}

.cart-drawer__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.cart-drawer.active .cart-drawer__overlay {
  opacity: 1;
  visibility: visible;
}

.cart-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.cart-drawer__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.cart-drawer__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item__image {
  width: 80px;
  height: 80px;
  border-radius: 0.25rem;
  overflow: hidden;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item__content {
  flex: 1;
}

.cart-item__title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.cart-item__price {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.cart-item__quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-item__qty-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  background: white;
  cursor: pointer;
  border-radius: 0.25rem;
}

.cart-item__qty-input {
  width: 50px;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.25rem;
}

.cart-item__remove {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.cart-drawer__footer {
  padding: 1rem;
  border-top: 1px solid var(--color-border);
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cart-drawer__checkout {
  width: 100%;
  padding: 1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cart-drawer__checkout:hover {
  background: var(--color-primary-dark);
}