When using a Product Recommendation or Gift with Purchase campaign on a Product Detail Page (PDP), products may be added to the cart successfully but the Shopify native cart drawer does not open or update automatically.
This usually happens when:
The merchant is not using Llama Cart
The store uses a Shopify theme cart drawer
AJAX behavior is not enabled
This guide explains how to:
Refresh the Shopify native cart drawer after a product is added
Automatically open the cart drawer
When Do You Need This Setup?
You should follow this guide if:
A campaign widget adds products to the cart
Clicking Add to Cart shows no visible feedback
The cart drawer does not open or update
The store uses a theme-based Shopify cart drawer
Step 1: Enable AJAX Settings to Refresh the Cart Drawer
Shopify cart drawers rely on AJAX to update cart content without reloading the page.
Enable AJAX Settings
Open the app Settings page
Locate the AJAX Settings section
Enable the checkbox Enable AJAX
Once enabled and saved, the cart drawer will refresh automatically after a product is added.
Configure the Cart Drawer Selectors
Under AJAX Settings, you’ll see two input fields:
Cart Items Container Selector
Cart Footer Selector
These selectors define which parts of the cart drawer should be refreshed when the cart changes.
Default selectors are provided and work for many Shopify themes.
If the Drawer Does Not Refresh
If the default values don’t work for your theme:
Open your storefront
Add a product using the native Add to Cart button
Open the cart drawer
Inspect the cart drawer HTML
Identify the container that holds:
Cart items list
Cart subtotal / footer area
Copy the appropriate CSS selectors and paste them into:
Cart Items Container Selector
Cart Footer Selector
Step 2: Open the Shopify Native Cart Drawer Automatically
Refreshing the drawer updates its content — but it still needs to be opened manually.
To open it automatically after a product is added, you can use callback events.
Enable Callback Events
In the Settings page, scroll down to the Events section
Enable the checkbox Enable Callback Function
Once enabled, a code input field will appear below.
Add Code to Open the Cart Drawer
Most Shopify themes open the cart drawer when the cart icon in the header is clicked.
Because cart icon selectors vary between themes, you’ll need to trigger the correct one.
Paste one of the following examples into the callback code input.
Common Cart Drawer Triggers
document.querySelector('#cart-icon-bubble')?.click();document.querySelector('.js-drawer-open-cart')?.click();document.querySelector('nav a[href="/cart"]')?.click();
If None of the Examples Work
If the cart drawer still doesn’t open:
Inspect the cart icon in your theme header
Identify the clickable element that opens the drawer
Copy its selector
Use it with
.click()in the callback input
Example:
document.querySelector('YOUR_SELECTOR_HERE').click();✅ Final Result
After completing these steps:
Products added from campaign widgets will update the cart drawer
The Shopify native cart drawer will open automatically
No page reloads required
Fully compatible with theme-based cart drawers