← Back to blog

How to Build a Custom Slide-Out Cart Drawer in Shopify Liquid (With Free Shipping Bar)

Learn how to build a custom Shopify cart drawer in Liquid with Ajax cart updates, quantity controls, product recommendations, and a dynamic free shipping progress bar.

Built by Saurav11 Sept 202620 min read

Shopify Cart DrawerShopify LiquidShopify Ajax APIShopify Cart APIShopify Theme DevelopmentShopify CustomizationShopify Free Shipping BarShopify Conversion Rate OptimizationShopify Online Store 2.0Shopify Development

A well-designed cart experience can have a major impact on Shopify conversion rates. Instead of sending shoppers to a separate cart page every time they add a product, a custom Shopify cart drawer can immediately show the updated cart, subtotal, shipping progress, discounts, and checkout CTA without forcing the customer to leave the product page.

In this guide, we’ll build acustom slide- out cart drawer in Shopify Liquid using Shopify’s theme architecture, Liquid, JavaScript, and the Shopify Ajax Cart API.We’ll also add a dynamic

free shipping progress bar

that tells customers exactly how much more they need to spend to unlock free shipping.

The goal is not just to create a visually attractive cart drawer. The goal is to build one that is fast, maintainable, responsive, conversion-focused, and compatible with modern Shopify themes.

If you are building or improving a Shopify storefront, you may also want to read our guide on Shopify theme architecture to understand how sections, snippets, templates, and assets work together.

What Is a Shopify Cart Drawer?

A Shopify cart drawer is a panel that slides into view when a shopper adds a product to their cart. Instead of navigating to /cart, the customer stays on the current page while the cart contents are displayed inside an overlay or side panel.

A typical custom cart drawer can contain:

• Cart items and product images
• Product titles and variant information
• Quantity increase and decrease controls
• Remove item functionality
• Line-item pricing
• Cart subtotal
• Discount information
• Free shipping progress bar
• Checkout button
• Continue shopping button
• Product recommendations
• Optional cart notes or upsells

Unlike a simple HTML popup, a proper Shopify cart drawer needs to stay synchronized with Shopify's actual cart state. That is why the implementation should use Shopify's Ajax Cart API rather than manually changing prices or quantities in the browser.

Why Use a Custom Cart Drawer Instead of the Default Cart Page?

The standard Shopify cart page is useful, but it introduces another navigation step between product discovery and checkout. A slide-out cart can create a much more fluid shopping experience.

Feature	Standard Cart Page	Custom Cart Drawer
Page navigation	Required	Usually not required
Quick quantity updates	Possible	Yes
Free shipping progress	Possible	Highly visible
Upselling	Possible	Easy to integrate
Shopping continuity	Lower	Higher

For DTC brands, the cart drawer can become an important part of the conversion rate optimization strategy. It can show shoppers what they have added, encourage them to reach a free-shipping threshold, and provide a clear path to checkout.

How Shopify Cart Drawer Architecture Works

A good implementation separates responsibilities between Liquid, HTML, CSS, and JavaScript.

Shopify Liquid: Renders the cart data and drawer markup.

JavaScript: Handles add-to-cart, quantity changes, removal, opening, closing, and dynamic updates.

CSS: Controls the drawer animation, overlay, responsive layout, and visual design.

Ajax Cart API: Communicates with Shopify's cart endpoints.

Section Rendering API: Can return server-rendered theme sections after cart changes.

This separation is important because the browser should not become responsible for recreating Shopify's cart logic. Shopify remains the source of truth for cart quantities, prices, discounts, and totals.

Shopify's Ajax API provides theme-friendly endpoints for cart operations, while the Section Rendering API can return updated section HTML without a complete page reload.

Step 1: Create the Cart Drawer Section

For a modern Shopify Online Store 2.0 theme, a cart drawer can be implemented as a dedicated section such as:

sections/cart-drawer.liquid

Keeping the drawer in its own section makes the code easier to maintain and gives you a clean target for Shopify's Section Rendering API.

Shopify sections are reusable Liquid modules and can contain blocks, settings, and merchant-customizable content. They can also be rendered dynamically through the Section Rendering API.

Step 2: Build the Drawer Markup With Liquid

Start with a drawer wrapper, overlay, header, cart content area, and footer.

<div


id="CartDrawer"
class="cart-drawer"
aria-hidden="true"
>

Separating the main drawer shell from the cart contents using a snippet can make future maintenance easier. For example:

snippets/cart-drawer-content.liquid

This approach becomes particularly useful when the contents need to be replaced after an Ajax request.

Step 3: Loop Through Shopify Cart Items

Shopify exposes the current cart through the Liquid cart object. It contains properties such as the cart items, item count, subtotal, total price, discounts, and other cart information.

A basic cart item loop looks like this:

{% if cart.empty? %}


    

Your cart is empty.

Continue Shopping



    {% else %}



    
    {% for item in cart.items %}

    <article
    class="cart-item"
    data-line="{{ forloop.index }}"
    >

    <a href="{{ item.url }}">
    {% if item.image %}
    {{
        item.image
            | image_url: width: 180
    | image_tag:
    loading: 'lazy',
    widths: '90, 135, 180',
    sizes: '90px',
    alt: item.image.alt | escape
        }}
    {% endif %}
    </a>

    <div class="cart-item__content">

    <a href="{{ item.url }}">
    {{ item.product.title }}
    </a>

    {% unless item.product.has_only_default_variant %}
    <p>
    {{ item.variant.title }}
    </p>
    {% endunless %}

    <p>
    {{ item.final_line_price | money }}
    </p>

    <div class="cart-item__quantity">

    <button
    type="button"
    data-quantity-change
    data-line="{{ forloop.index }}"
    data-quantity="{{ item.quantity | minus: 1 }}"
    >
    −
    </button>

    <span>
    {{ item.quantity }}
    </span>

    <button
    type="button"
    data-quantity-change
    data-line="{{ forloop.index }}"
    data-quantity="{{ item.quantity | plus: 1 }}"
    >
    +
    </button>

    </div>

    <button
    type="button"
    data-remove-item
    data-line="{{ forloop.index }}"
    >
    Remove
    </button>

    </div>

    </article>

    {% endfor %}
    



{% endif %}

The important point is that the displayed values come from Shopify's cart object rather than being calculated manually in JavaScript.

Step 4: Add the Cart Subtotal

The drawer should show the actual cart subtotal and provide a strong checkout CTA.

<div class="cart-drawer__summary">


    < div class="cart-drawer__subtotal" >
Subtotal

{{ cart.total_price | money }}

Taxes and shipping calculated at checkout.

View Cart

Checkout

Depending on the store's checkout configuration and theme architecture, you may choose to use the cart page or a direct checkout action. The important part is that the CTA remains obvious and accessible.

Step 5: Build the Free Shipping Progress Bar

One of the most useful features you can add to a cart drawer is a free shipping progress bar.

For example, suppose the brand offers free shipping when the cart reaches $100.

If the customer has $65 in the cart, the drawer can display:

Once the cart reaches the threshold:

This is more than a visual feature. It can create a clear reason for customers to add another product to the cart.

Calculate the Free Shipping Progress

Assume the free shipping threshold is 10000 in the store's currency subunits. Shopify's money-related cart values are represented in the currency's subunit, so the threshold should be handled consistently with the cart value.

{% assign free_shipping_threshold = 10000 %}


{% assign amount_remaining = free_shipping_threshold | minus: cart.total_price %}

{% if amount_remaining > 0 %}

{% assign progress = cart.total_price
    | times: 100
        | divided_by: free_shipping_threshold
            %}

{% if progress > 100 %}
{% assign progress = 100 %}
{% endif %}



    
    <p>
    You’re {{ amount_remaining | money}}
    away from free shipping.
    </p>

    <div class="free-shipping-bar__track">
    <div
    class="free-shipping-bar__progress"
    style="width: {{ progress }}%;"
    ></div>
    </div>
    



{% else %}



    
    <p>
    🎉 You unlocked free shipping!
    </p>

    <div class="free-shipping-bar__track">
    <div
    class="free-shipping-bar__progress"
    style="width: 100%;"
    ></div>
    </div>
    



{% endif %}

Important: the threshold must match the actual business rule configured by the merchant. Do not hard-code a free shipping message if the store's shipping policy varies by country, customer location, market, product type, or shipping profile.

Make the Free Shipping Threshold Editable

For a production Shopify theme, it is better to let the merchant control the threshold through the theme editor instead of editing Liquid code every time.

You can add a section setting such as:

{


"type": "number",
    "id": "free_shipping_threshold",
        "label": "Free shipping threshold",
            "default": 100
}

Then use the section setting to calculate the progress bar.

This is one of the major advantages of Shopify Online Store 2.0 theme architecture: merchants can configure sections and settings through the theme editor instead of relying on developers for every small content or merchandising change.

For more information about modern Shopify theme architecture, see our Shopify Online Store 2.0 guide.

Step 6: Add Slide-Out Drawer CSS

The drawer can be positioned on the right side of the viewport and translated outside the screen until it is opened.

.cart-drawer {


position: fixed;
inset: 0;
z - index: 9999;
visibility: hidden;
pointer - events: none;
}

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

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

.cart - drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 100 %);
    height: 100 %;
    background: #fff;
    transform: translateX(100 %);
    transition: transform 0.3s ease;
    overflow - y: auto;
}

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

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

On mobile, the drawer should generally use the full viewport width to avoid creating a cramped shopping experience.

@media (max-width: 749px) {


        .cart - drawer__panel {
    width: 100 %;
}
}

Step 7: Add JavaScript to Open and Close the Drawer

The first layer of JavaScript handles the drawer UI itself.

const cartDrawer = document.querySelector('#CartDrawer');


function openCartDrawer() {
    if (!cartDrawer) return;

    cartDrawer.classList.add('is-open');
    cartDrawer.setAttribute('aria-hidden', 'false');
    document.body.classList.add('cart-drawer-open');
}

function closeCartDrawer() {
    if (!cartDrawer) return;

    cartDrawer.classList.remove('is-open');
    cartDrawer.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('cart-drawer-open');
}

document.addEventListener('click', function (event) {

    const openButton = event.target.closest('[data-cart-open]');
    const closeButton = event.target.closest('[data-cart-close]');

    if (openButton) {
        openCartDrawer();
    }

    if (closeButton) {
        closeCartDrawer();
    }

});

For accessibility, you should also support keyboard interaction, including closing the drawer with the Escape key and managing focus appropriately.

Step 8: Add Products to the Cart With Shopify Ajax

When a product is added from the product page, collection page, or quick-add component, you can use Shopify's Ajax Cart API to add the variant without a full page reload.

async function addToCart(variantId, quantity = 1) {


const response = await fetch(
    window.Shopify.routes.root + 'cart/add.js',
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            items: [
                {
                    id: variantId,
                    quantity: quantity
                }
            ]
        })
    }
);

if (!response.ok) {
    throw new Error('Unable to add product to cart.');
}

return response.json();
}

Shopify's Ajax API is designed for Shopify-hosted themes and supports cart operations without requiring a full page refresh. Shopify also recommends using the locale-aware window.Shopify.routes.root when constructing Ajax URLs.

Step 9: Update the Cart Quantity

When the customer clicks the plus or minus button, send the new quantity to Shopify rather than only changing the number displayed in the browser.

async function updateCartLine(line, quantity) {


const response = await fetch(
    window.Shopify.routes.root + 'cart/change.js',
    {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            line: line,
            quantity: quantity
        })
    }
);

if (!response.ok) {
    throw new Error('Unable to update cart.');
}

return response.json();
}

If the quantity becomes zero, Shopify removes the line item.

After the request completes, the drawer should be re-rendered or updated using the returned cart data and/or server-rendered section HTML.

Step 10: Remove Items From the Cart

A remove button can simply update the selected line to quantity zero.

async function removeCartLine(line) {


return updateCartLine(line, 0);
}

Using one update function for quantity changes and removals keeps the JavaScript simpler and reduces duplicated logic.

Step 11: Re-Render the Cart Drawer After Ajax Updates

This is where many custom cart drawer implementations become unnecessarily complicated.

You could manually update every product title, image, price, quantity, subtotal, discount, free shipping message, and item count using JavaScript. But that creates a second rendering system that has to stay synchronized with Shopify.

A cleaner approach is to let Liquid render the updated HTML and use the Section Rendering API to replace the relevant section.

Shopify specifically supports bundled section rendering with cart operations, allowing multiple theme sections to be updated as part of a cart request.

async function refreshCartDrawer() {


const response = await fetch(
    window.location.pathname + '?sections=cart-drawer'
);

const sections = await response.json();

const html = sections['cart-drawer'];

if (!html) return;

const existingSection =
    document.querySelector('#shopify-section-cart-drawer');

if (!existingSection) return;

existingSection.outerHTML = html;
}

This pattern allows Shopify Liquid to remain responsible for rendering the cart state while JavaScript handles the request and DOM replacement.

Shopify's performance guidance recommends using server-rendered Liquid and Section Rendering API updates instead of rebuilding Liquid-backed content entirely through JavaScript.

An Even Better Approach: Bundled Section Rendering

If your header contains a cart icon bubble and the drawer is a separate section, updating only the drawer may leave the header count outdated.

You can request multiple sections during a cart operation.

fetch(window.Shopify.routes.root + 'cart/add.js', {


method: 'POST',
    headers: {
    'Content-Type': 'application/json'
},
body: JSON.stringify({
    items: [
        {
            id: variantId,
            quantity: 1
        }
    ],
    sections: [
        'cart-drawer',
        'cart-icon-bubble'
    ],
    sections_url: window.location.pathname
})
});

The server can then return updated HTML for the requested sections. This can keep the cart drawer and cart counter synchronized after an add-to-cart operation. Shopify documents this pattern as bundled section rendering with the Cart API.

Step 12: Dynamically Update the Free Shipping Bar

Because the free shipping progress is rendered using the actual Liquid cart total, it should automatically update whenever the drawer section is refreshed.

For example:

{% assign threshold = section.settings.free_shipping_threshold | times: 100 %}


{% assign remaining = threshold | minus: cart.total_price %}

{% if remaining > 0 %}

{% assign progress = cart.total_price
    | times: 100
        | divided_by: threshold
            %}

{% if progress > 100 %}
{% assign progress = 100 %}
{% endif %}


Add {{ remaining | money }}
more to unlock free shipping.






{% else %}


🎉 Free shipping unlocked!






{% endif %}

This is preferable to maintaining a separate JavaScript-only shipping calculation because the message remains tied to the server-rendered cart state.

Step 13: Add a Smart Free Shipping Message

Instead of showing the same generic message all the time, use different states based on cart value.

For a DTC brand, the message should feel helpful rather than aggressive. The purpose is to make the benefit obvious, not pressure the shopper into unnecessary purchases.

Step 14: Add Product Recommendations to the Cart Drawer

A cart drawer can also be used for carefully selected cross-sells.

Examples include:

• Frequently bought together products
• Low-cost products that help reach free shipping
• Accessories related to the selected product
• Bundles
• Recently viewed products
• Best-selling complementary products

However, recommendations should not make the drawer unnecessarily heavy. Shopify's performance guidance recommends deferring content in dialogs and drawers when possible, especially content that isn't immediately needed.

For example, you can initially render the cart itself and load recommendations only after the drawer is opened.

Step 15: Keep the Cart Drawer Lightweight

A cart drawer is an interactive component, so performance matters. Loading large recommendation carousels, reviews, badges, videos, analytics scripts, and multiple third-party widgets inside the drawer can make the experience unnecessarily expensive.

A better architecture is:

1. Load the basic cart shell.
2. Render the essential cart information.
3. Open the drawer quickly.
4. Load secondary recommendations only when necessary.
5. Use server-rendered HTML for Liquid-backed updates.
6. Avoid creating large hidden DOM trees before the drawer is opened.

Shopify's current theme performance guidance specifically recommends deferring hidden drawer content and reducing unnecessary DOM nodes for components that are initially closed.

If your store already has performance problems, our guide on Shopify apps and third-party performance can help identify additional sources of frontend overhead.

Step 16: Add a Cart Drawer Loading State

Ajax operations can take a short amount of time. Without a loading state, shoppers may click the plus button multiple times and accidentally send multiple requests.

function setCartLoading(isLoading) {


const drawer = document.querySelector('#CartDrawer');

if (!drawer) return;

drawer.classList.toggle('is-loading', isLoading);

drawer
    .querySelectorAll('button')
    .forEach(button => {
        button.disabled = isLoading;
    });

}

Then:

async function changeCartQuantity(line, quantity) {


try {

    
setCartLoading(true);

await updateCartLine(line, quantity);

await refreshCartDrawer();


} catch (error) {

    
console.error(error);


} finally {

    
setCartLoading(false);


}

}

A small loading indicator is much better than allowing the user to trigger several overlapping cart requests.

Step 17: Handle Empty Cart State

The cart drawer should not simply disappear when the last item is removed. It should transition into a useful empty state.

{% if cart.empty? %}


    < div class="cart-drawer__empty" >

        
<h3>Your cart is empty</h3>

<p>
  Discover something you'll love.
</p>

<a href="{{ routes.all_products_collection_url }}">
  Continue Shopping
</a>