The basket object contains all information about the customer’s shopping cart. It’s available globally across all pages, making it perfect for cart widgets, mini-carts, and checkout processes.
Usage: Available globally - use anywhere to display cart contents, totals, and checkout links

​
Basic Cart Information

Access the essential cart data for displaying cart status and totals: 
<!-- Basic cart status -->
{{^basket.isEmpty}}
    <div class="cart-summary">
        <span class="cart-count">{{basket.items_count}}</span>
        <span class="cart-total">{{basket.total_amount}}</span>
        <a href="{{paylink}}" class="checkout-btn">{{#lang}}Checkout{{/lang}}</a>
    </div>
{{/basket.isEmpty}}

{{#basket.isEmpty}}
    <p class="empty-cart">{{#lang}}Your cart is empty{{/lang}}</p>
{{/basket.isEmpty}}

​
Available Properties

PropertyTypeDescription
basket.isEmptyBooleanCheck if cart is empty
basket.items_countNumberNumber of items in cart
basket.total_amountStringTotal amount for items in cart
basket.itemsArrayObject containing all products in cart

​
Cart Items

Loop through cart items to display detailed cart contents: 
{{#basket.items}}
<div class="cart-item">
    <div class="item-image">
        {{#item.firstimage}}
            <img src="{{#img}}{{item.firstimage}}_100x100{{/img}}" alt="{{item.title}}">
        {{/item.firstimage}}
    </div>
    
    <div class="item-details">
        <h4 class="item-title">
            <a href="{{item.url}}">{{item.title}}</a>
        </h4>
        
        {{#is_variant}}
            <p class="variant-info">{{variant_name}}</p>
        {{/is_variant}}
        
        <div class="item-pricing">
            <span class="item-price">{{item.price}}</span>
            <span class="item-qty">× {{qty}}</span>
            <span class="item-total">{{amount}}</span>
        </div>
    </div>
</div>
{{/basket.items}}

​
Cart Item Properties

When looping through basket.items, each item has these properties:
PropertyTypeDescription
item.idStringProduct ID
item.skuStringProduct article number
item.urlStringProduct link address
item.titleStringProduct title
item.firstimageStringProduct image
is_variantBooleanTrue if it’s a product variant
variant_nameStringVariant designation
item.priceStringProduct unit price
qtyNumberQuantity of product added to cart
amountStringProduct total amount (unit price x quantity)

​
Checkout Integration

The paylink provides the correct checkout URL when the cart is not empty: 
{{^basket.isEmpty}}
<div class="checkout-section">
    <div class="checkout-summary">
        <h3>{{#lang}}Ready to checkout?{{/lang}}</h3>
        <p>{{basket.items_count}} {{#lang}}items{{/lang}} • {{basket.total_amount}}</p>
    </div>
    
    <a href="{{paylink}}" class="main-checkout-btn">
        {{#lang}}Secure Checkout{{/lang}}
    </a>
    
    <div class="checkout-security">
        <i class="icon-shield"></i>
        <span>{{#lang}}SSL Secure Checkout{{/lang}}</span>
    </div>
</div>
{{/basket.isEmpty}}

​
Mini Cart Examples

​
Slide-out Cart

<div class="mini-cart-overlay">
    <div class="mini-cart">
        <div class="mini-cart-header">
            <h3>{{#lang}}Shopping Cart{{/lang}}</h3>
            <button class="close-cart" aria-label="{{#lang}}Close cart{{/lang}}">×</button>
        </div>
        
        <div class="mini-cart-body">
            {{#basket.isEmpty}}
                <div class="empty-cart-message">
                    <i class="icon-shopping-cart"></i>
                    <p>{{#lang}}Your cart is empty{{/lang}}</p>
                    <a href="/" class="continue-shopping">
                        {{#lang}}Continue Shopping{{/lang}}
                    </a>
                </div>
            {{/basket.isEmpty}}
            
            {{^basket.isEmpty}}
                <div class="cart-items-list">
                    {{#basket.items}}
                    <div class="mini-cart-item">
                        <div class="item-image">
                            {{#item.firstimage}}
                                <img src="{{#img}}{{item.firstimage}}_60x60{{/img}}" alt="{{item.title}}">
                            {{/item.firstimage}}
                        </div>
                        
                        <div class="item-info">
                            <h4><a href="{{item.url}}">{{item.title}}</a></h4>
                            {{#is_variant}}<p class="variant">{{variant_name}}</p>{{/is_variant}}
                            <div class="item-meta">
                                <span class="quantity">{{qty}}</span>
                                <span class="price">{{item.price}}</span>
                            </div>
                        </div>
                        
                        <div class="item-total">{{amount}}</div>
                    </div>
                    {{/basket.items}}
                </div>
            {{/basket.isEmpty}}
        </div>
        
        {{^basket.isEmpty}}
        <div class="mini-cart-footer">
            <div class="cart-summary">
                <div class="subtotal">
                    <span>{{#lang}}Subtotal{{/lang}} ({{basket.items_count}} {{#lang}}items{{/lang}})</span>
                    <span class="amount">{{basket.total_amount}}</span>
                </div>
            </div>
            
            <div class="cart-actions">
                <a href="/cart" class="view-cart-btn">
                    {{#lang}}View Cart{{/lang}}
                </a>
                <a href="{{paylink}}" class="checkout-btn">
                    {{#lang}}Checkout{{/lang}}
                </a>
            </div>
        </div>
        {{/basket.isEmpty}}
    </div>
</div>

​
Cart Page Template

<div class="cart-page">
    <h1>{{#lang}}Shopping Cart{{/lang}}</h1>
    
    {{#basket.isEmpty}}
        <div class="empty-cart">
            <div class="empty-cart-content">
                <i class="icon-shopping-cart-empty"></i>
                <h2>{{#lang}}Your cart is empty{{/lang}}</h2>
                <p>{{#lang}}Looks like you haven't added anything to your cart yet{{/lang}}</p>
                <a href="/" class="continue-shopping-btn">
                    {{#lang}}Start Shopping{{/lang}}
                </a>
            </div>
        </div>
    {{/basket.isEmpty}}
    
    {{^basket.isEmpty}}
        <div class="cart-content">
            <div class="cart-items-section">
                <h2>{{#lang}}Cart Items{{/lang}} ({{basket.items_count}})</h2>
                
                <div class="cart-items">
                    {{#basket.items}}
                    <div class="cart-item">
                        <div class="item-image">
                            {{#item.firstimage}}
                                <img src="{{#img}}{{item.firstimage}}_150x150{{/img}}" alt="{{item.title}}">
                            {{/item.firstimage}}
                        </div>
                        
                        <div class="item-details">
                            <h3><a href="{{item.url}}">{{item.title}}</a></h3>
                            <p class="item-sku">{{#lang}}SKU{{/lang}}: {{item.sku}}</p>
                            
                            {{#is_variant}}
                                <p class="item-variant">{{variant_name}}</p>
                            {{/is_variant}}
                            
                            <div class="item-price">
                                <span class="unit-price">{{item.price}}</span>
                                <span class="quantity-label">× {{qty}}</span>
                            </div>
                        </div>
                        
                        <div class="item-total">
                            <span class="total-price">{{amount}}</span>
                        </div>
                    </div>
                    {{/basket.items}}
                </div>
            </div>
            
            <div class="cart-summary-section">
                <div class="cart-totals">
                    <h3>{{#lang}}Order Summary{{/lang}}</h3>
                    
                    <div class="totals-line">
                        <span>{{#lang}}Subtotal{{/lang}} ({{basket.items_count}} {{#lang}}items{{/lang}})</span>
                        <span>{{basket.total_amount}}</span>
                    </div>
                    
                    <div class="totals-line total">
                        <span>{{#lang}}Total{{/lang}}</span>
                        <span>{{basket.total_amount}}</span>
                    </div>
                    
                    <div class="checkout-actions">
                        <a href="{{paylink}}" class="checkout-button">
                            {{#lang}}Proceed to Checkout{{/lang}}
                        </a>
                        <a href="/" class="continue-shopping">
                            {{#lang}}Continue Shopping{{/lang}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {{/basket.isEmpty}}
</div>

​
Mobile Cart Examples

​
Mobile Cart Badge

<div class="mobile-cart-badge">
    <a href="/cart" class="cart-link">
        <div class="cart-icon-wrapper">
            <i class="icon-shopping-bag"></i>
            {{^basket.isEmpty}}
                <span class="cart-count-badge">{{basket.items_count}}</span>
            {{/basket.isEmpty}}
        </div>
        
        <div class="cart-info">
            <span class="cart-label">{{#lang}}Cart{{/lang}}</span>
            {{^basket.isEmpty}}
                <span class="cart-total">{{basket.total_amount}}</span>
            {{/basket.isEmpty}}
            {{#basket.isEmpty}}
                <span class="cart-empty">{{#lang}}Empty{{/lang}}</span>
            {{/basket.isEmpty}}
        </div>
    </a>
</div>

​
Best Practices

Empty State Handling

Always provide meaningful empty cart states with clear calls-to-action

Performance

Use image optimization with the {{#img}} wrapper for cart item thumbnails

Accessibility

Include proper ARIA labels and semantic HTML for cart interactions

Mobile First

Design cart widgets to work well on all screen sizes

​
Common Patterns

​
Cart Item Counter

<div class="cart-counter">
    {{#basket.isEmpty}}
        <span class="counter-text">{{#lang}}Cart{{/lang}}</span>
    {{/basket.isEmpty}}
    
    {{^basket.isEmpty}}
        <span class="counter-text">
            {{basket.items_count}} 
            {{#lang}}item{{/lang}}{{#basket.items_count}}s{{/basket.items_count}}
        </span>
    {{/basket.isEmpty}}
</div>

​
Quick Add Success Message

<!-- This would typically be shown after adding an item -->
{{^basket.isEmpty}}
<div class="cart-success-message">
    <i class="icon-check-circle"></i>
    <span>{{#lang}}Item added to cart{{/lang}}</span>
    <a href="{{paylink}}" class="quick-checkout">
        {{#lang}}Checkout now{{/lang}}
    </a>
</div>
{{/basket.isEmpty}}

​
Next Steps

Navigation Object

Build dynamic navigation menus and breadcrumbs

Product Object

Learn about displaying individual product information

Order Object

Display order confirmation and thank you page content

Shop Object

Explore store-wide settings and information