The Instant Cart drawer can be triggered from various elements in your storefront—such as the cart icon in your navigation or an Add to Cart button on product pages. This guide explains how to configure interactions so the cart drawer opens when customers take actions.
Overview
There are two ways to set up cart drawer triggers:
Method | Description |
Automatic setup | All Add to Cart actions automatically open the Instant Cart (supported themes only) |
Manual setup | Configure triggers individually for full control |
Automatic Cart Actions Setup
With automatic cart actions setup, all Add to Cart actions throughout your store automatically open the Instant Cart Drawer. No additional theme code modifications are necessary.
Supported Themes
Theme | Supported |
Dawn | ✓ |
Sense | ✓ |
Horizon | ✓ |
Prestige | ✓ |
Impact | ✓ |
Impulse | ✓ |
Warning: This feature can lead to unexpected behavior on unsupported themes. Evaluate the functionality of your store thoroughly after enabling this feature.
How to Enable
Navigate to your published cart layout in Instant
Click the three dots icon in the Layouts panel for your selected layout
Select Cart settings
Enable Automatic cart actions setup
Manual Setup
For themes that don't support automatic setup, or if you need more control, configure cart triggers manually.
Triggering from Navigation
Open the cart drawer when customers click the cart icon in your navigation.
Step 1: Select the Cart Icon
In your Instant Navigation layout, click the cart icon on the canvas.
Step 2: Check Default Action
Navigate to the Interactions panel
By default, the cart icon may be set to Open Cart Page
Remove this action if it's not the desired behavior
Step 3: Add the Open Cart Action
Add the Open Cart action (if no action is defined)
Click on Open Cart
Select Instant Cart from the dropdown
Step 4: Publish and Test
Once published, clicking the navigation cart icon will open your Instant Cart drawer.
Triggering from a Product Page
Open the cart drawer immediately after customers add a product.
Step 1: Select the Add to Cart Button
On your product page layout, click the Add to Cart button.
Step 2: Configure the Interaction
Navigate to the Interactions panel
Add a new action and select Add to Cart
Step 3: Define Behavior
In the action settings, specify what happens after the product is added:
Option | Behavior |
Open Instant Cart | Immediately shows the cart drawer (recommended) |
Redirect to cart page | Takes customer to a separate cart page |
Using Instant Cart creates a smoother, modern checkout experience.
Step 4: Publish and Test
After publishing, test by adding a product to confirm the Instant Cart drawer opens correctly.
Troubleshooting
Issue | Solution |
Cart doesn't open | Verify the Open Cart action is set to Instant Cart |
Wrong cart opens | Check that Instant Cart is selected in the dropdown |
Automatic setup not working | Confirm your theme is supported |
Unexpected behavior | Disable automatic setup and use manual configuration |
Quick Reference
Task | Action |
Enable automatic setup | Cart settings → Automatic cart actions setup |
Trigger from navigation | Select cart icon → Interactions → Open Cart → Instant Cart |
Trigger from Add to Cart | Select button → Interactions → Add to Cart → Open Instant Cart |
Test triggers | Publish → Click cart icon or add product |
Setup Method Comparison
Feature | Automatic | Manual |
Theme code changes | Not required | Not required |
Supported themes only | Yes | No (works with all) |
Per-element control | No | Yes |
Setup complexity | Simple | Moderate |