Creating an Instant Cart Drawer

Instant provides a flexible and powerful way to create fully customized cart experiences for your online store. Whether you prefer to start from a professionally designed template or build a cart completely from scratch, the cart builder allows full creative freedom over structure, design, and functionality.

The cart builder lets you create slide-out cart drawers that match your brand identity and enhance the shopping experience.

The easiest way to begin is by selecting a cart template from Instant's template library. We've created a wide variety of carts for different use cases.

All cart templates can be found in the Template Library. Browse and select one that fits your store's style and needs.

Everything in the cart is fully customizable:

This flexibility allows you to align the cart with your brand identity and store design.

All cart templates have a Filled and Empty state which you can toggle in the sidebar on the right. This allows you to show different content based on whether a customer has added products to their cart.

The default filled state structure includes:

Designed to highlight incentives and encourage additional purchases.

The default empty state structure includes:

Helps guide customers to explore products when no items are in the cart.

Instead of using templates, you can create a cart layout from scratch.

Open the Insert Panel under Elements → Cart. The following cart elements are available:

Provides the cart title, close button, price breakdown, and checkout button.

Displays products in the cart with details such as name, price, and quantity.

A product slider showcasing related or recommended products. Encourages customers to explore more items and increases average order value (AOV).

Displays a threshold-based incentive (e.g., free shipping over $50). Includes customizable active states to change the bar appearance when rewards unlock.

Allows customers to easily add extras like shipping protection. Digital add-ons can be created directly in Shopify and connected seamlessly.

Adds urgency by setting a timer for cart expiration. Can reset dynamically when products are added or removed.

Automatically pulled from your Shopify store. Builds trust and reassures customers during checkout.

Once your cart is designed, follow these steps to make it live.

Click Publish in the builder.

Open the cart's settings and select Set as Main Cart.

The cart works as a standalone layout. You don't need to create additional layouts for the cart drawer. However, you can combine it with Instant navigation for a seamless, on-brand shopping experience.