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.
Getting started with Templates
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 our Cart templates can be found in the template library.
Customization Options
Everything is fully customizable, including:
Animations for cart appearance
Colors, typography, and branding
Detailed design settings such as border radius for the progress bar
This flexibility allows you to align the cart with your brand identity and store design.
Adjusting the Filled and Empty cart state
All our 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 if a customer has added products to their cart or not.
By default we utilize the following structure
Filled State
Contains a reward bar, product recommendations, and the products currently in the cart.
Designed to highlight incentives and encourage upsells.
Empty State
Includes a call-to-action (CTA) and navigation elements.
Helps guide customers to explore product categories when no items are in the cart.
Building a Cart from Scratch
Instead of using templates, you may choose to create a cart layout from scratch.
Create a New Cart
Navigate to the Layout Panel
Add a new cart layout (initially contains a basic header, footer, and product overview)
Add Elements
Open the Insert Panel under Elements → Cart. The following cart elements are available:
Header & Footer
Providing the cart title, close button, price breakdown and checkout button.
Product Items
Displays products in the cart with details such as name, price, and quantity.
Product Upsells
A product slider showcasing related or recommended products.
Encourages customers to explore more items and increases average order value (AOV).
Cart Reward Bar
Displays a threshold-based incentive (e.g., free shipping over $50).
Includes customizable active states to change the bar appearance when rewards unlock.
Cart Add-on
Allows customers to easily add extras (e.g., shipping protection).
Digital add-ons can be created directly in Shopify and connected seamlessly.
Cart Countdown
Adds urgency by setting a timer for cart expiration.
Can reset dynamically when products are added or removed.
Payment Icons
Automatically pulled from your Shopify store.
Builds trust and reassures customers during checkout.
Publishing and Activation
Once your cart is designed:
Publish the Cart
Click Publish in the builder.
Set as Main Cart
Open the cart’s settings and select Set as Main Cart.
Test in Shopify
Add a product in Shopify to see the cart in action.
The cart opens automatically when products are added or when the cart icon is clicked.
The cart works as a standalone layout. You don’t need to create additional layouts for the cart drawer, but you can combine it with Instant navigation for a seamless, on-brand shopping experience.