How to get started: cart upsells > cart drawer
Note: this is a technical document that will require some understanding of Shopify theme code. If you don't understand it or are unsure, please reach out to your developer or us to set this up.
Implementing cart drawer upsells allows you to present additional product suggestions directly within the cart drawer, enhancing the shopping experience and potentially increasing your store's Average Order Value (AOV). This guide provides a step-by-step approach to setting up cart drawer upsells using UpsellPlus.
Access the UpsellPlus App
Log in to your Shopify Admin panel.
Navigate to the UpsellPlus app.
Create a Cart Drawer Upsell Offer
Click on Create offer within the UpsellPlus dashboard.
Select Cart Page, then choose Cart Drawer Upsell.
Configure the Upsell Details
Customize the upsell offer by selecting products, setting discounts, and adjusting design elements to align with your store's branding.
After configuring, click Save & publish to activate the upsell offer.
To add cart drawer upsells, we need to find the theme file that controls the cart drawer. Then we'll add some code to it and a 'listener' to know when to update the cart drawer once an upsell product is added. Follow the five steps below to do this.
Download Your Theme Code Structure
In your Shopify Admin, go to Online Store > Live Theme.
Click ... (More Actions) > Download theme file.
This step ensures you have a backup of your theme before making any modifications.
Identify Your Cart Drawer Theme File
Go to your live website, right-click, and select Inspect to open the developer tools.
Open your cart drawer and hover over its elements to find an HTML ID or class that controls the cart drawer.
Note*: The theme file will have folders, you can just go to the main folder and search for the ID/class there.
In the example below, we searched shopify-section--mini-cart to locate the cart drawer is controlled by mini-cart.liquid.
Add the Upsell Placeholder to Your Theme File
In your Shopify Admin, navigate to Online Store > Themes > ... (More Actions) > Edit Code.
Open the identified cart drawer theme file (e.g., mini-cart.liquid).
Add the following code above the cart drawer footer to create a placeholder for the upsell offer:
Note: If you can’t find a footer (it may have a different name), check the HTML elements again using the developer tools to find a proper position.
Now you can test it to see how it looks like in your cart drawer. You might have to add some padding/margin to make it align with other elements. You can use the custom CSS within the UpsellPlus app > Cart drawer offer > Customization > Advanced > Custom CSS.
If you’d like to play around a bit you can try to change the css from browser developer tools first, to see what it will look like.
Add the Refresh Code to Update the Cart Drawer
"This code prevents a scenario where the customer clicks the ‘Add to Cart’ button, experiences a loading state, but does not see the upsell item appear in the cart drawer. Although the upsell item is successfully added to the cart, the cart drawer requires a refresh to display it properly.
To ensure the cart drawer updates when an upsell item is added, add the appropriate AJAX refresh code for your theme:
In the UpsellPlus App, navigate to Cart Drawer Upsell > Customization > Advanced > Refresh Code.
Enter the refresh code specific to your theme. For example, for the Focal theme:
Click Save to apply the changes.
Initialize the Upsell Offer Display
Since the cart drawer is initially empty when a customer visits the website for the first time, we need to detect when an item is added to the cart. Once an item is added, the cart drawer upsell will be displayed.
To achieve this, you'll add init code to the theme script. Locate the script that handles the ‘Add to Cart’ button submission, as upsell offers should only appear dynamically after the first item is added to the cart.
The ‘Add to Cart’ button is typically found in the theme.js or theme-editor.js file within the Assets folder of your theme's code. Once you've identified the correct file, add the following line of code:
To determine where to place the init code, follow these steps:
Visit your live store and open a product page.
Right-click the ‘Add to Cart’ button and select Inspect.
In the developer tools panel, click on the main ‘Add to Cart’ button.
Check the Event Listeners section to see which file manages the associated event handlers.
In the image below, the file is named `product-form.js`, but the exact file name may vary depending on your theme.
This will help you pinpoint the correct location in your theme files to add the init code, ensuring the cart drawer upsell appears at the right moment.
Key Considerations:
Backup Your Theme: Always download your theme before making changes in case you need to revert.
Technical Expertise: Modifying theme code requires a basic understanding of HTML and JavaScript. If you’re uncomfortable making these changes, consider consulting a developer or reaching out to UpsellPlus support.
Theme Variations: Different Shopify themes have varying structures. Ensure you identify the correct files and insertion points specific to your theme.
Testing: After making changes, thoroughly test the cart drawer functionality across various devices and browsers to ensure a seamless user experience.
Related Articles:
AJAX Refresh Code for Popular Shopify Themes
How to Get Started: Cart Upsells > Popup
How to Set Up a Cart Page Upsell
Overview
Implementing cart drawer upsells allows you to present additional product suggestions directly within the cart drawer, enhancing the shopping experience and potentially increasing your store's Average Order Value (AOV). This guide provides a step-by-step approach to setting up cart drawer upsells using UpsellPlus.
Step-by-Step Guide: Setting Up a Cart Drawer Upsell in UpsellPlus
Access the UpsellPlus App
Log in to your Shopify Admin panel.
Navigate to the UpsellPlus app.
Create a Cart Drawer Upsell Offer
Click on Create offer within the UpsellPlus dashboard.
Select Cart Page, then choose Cart Drawer Upsell.
Configure the Upsell Details
Customize the upsell offer by selecting products, setting discounts, and adjusting design elements to align with your store's branding.
After configuring, click Save & publish to activate the upsell offer.
To add cart drawer upsells, we need to find the theme file that controls the cart drawer. Then we'll add some code to it and a 'listener' to know when to update the cart drawer once an upsell product is added. Follow the five steps below to do this.
Step-by-Step Guide: Integrating the Upsell into Your Themes
Download Your Theme Code Structure
In your Shopify Admin, go to Online Store > Live Theme.
Click ... (More Actions) > Download theme file.
This step ensures you have a backup of your theme before making any modifications.
Identify Your Cart Drawer Theme File
Go to your live website, right-click, and select Inspect to open the developer tools.
Open your cart drawer and hover over its elements to find an HTML ID or class that controls the cart drawer.
Note*: The theme file will have folders, you can just go to the main folder and search for the ID/class there.
In the example below, we searched shopify-section--mini-cart to locate the cart drawer is controlled by mini-cart.liquid.
Add the Upsell Placeholder to Your Theme File
In your Shopify Admin, navigate to Online Store > Themes > ... (More Actions) > Edit Code.
Open the identified cart drawer theme file (e.g., mini-cart.liquid).
Add the following code above the cart drawer footer to create a placeholder for the upsell offer:
div id="upsellplus_drawer_offer"></div>Note: If you can’t find a footer (it may have a different name), check the HTML elements again using the developer tools to find a proper position.
Now you can test it to see how it looks like in your cart drawer. You might have to add some padding/margin to make it align with other elements. You can use the custom CSS within the UpsellPlus app > Cart drawer offer > Customization > Advanced > Custom CSS.
If you’d like to play around a bit you can try to change the css from browser developer tools first, to see what it will look like.
Add the Refresh Code to Update the Cart Drawer
"This code prevents a scenario where the customer clicks the ‘Add to Cart’ button, experiences a loading state, but does not see the upsell item appear in the cart drawer. Although the upsell item is successfully added to the cart, the cart drawer requires a refresh to display it properly.
To ensure the cart drawer updates when an upsell item is added, add the appropriate AJAX refresh code for your theme:
In the UpsellPlus App, navigate to Cart Drawer Upsell > Customization > Advanced > Refresh Code.
Enter the refresh code specific to your theme. For example, for the Focal theme:
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
upsellplusapp.init_drawer_offer();Click Save to apply the changes.
Initialize the Upsell Offer Display
Since the cart drawer is initially empty when a customer visits the website for the first time, we need to detect when an item is added to the cart. Once an item is added, the cart drawer upsell will be displayed.
To achieve this, you'll add init code to the theme script. Locate the script that handles the ‘Add to Cart’ button submission, as upsell offers should only appear dynamically after the first item is added to the cart.
The ‘Add to Cart’ button is typically found in the theme.js or theme-editor.js file within the Assets folder of your theme's code. Once you've identified the correct file, add the following line of code:
upsellplusapp.init_drawer_offer();To determine where to place the init code, follow these steps:
Visit your live store and open a product page.
Right-click the ‘Add to Cart’ button and select Inspect.
In the developer tools panel, click on the main ‘Add to Cart’ button.
Check the Event Listeners section to see which file manages the associated event handlers.
In the image below, the file is named `product-form.js`, but the exact file name may vary depending on your theme.
This will help you pinpoint the correct location in your theme files to add the init code, ensuring the cart drawer upsell appears at the right moment.
Key Considerations:
Backup Your Theme: Always download your theme before making changes in case you need to revert.
Technical Expertise: Modifying theme code requires a basic understanding of HTML and JavaScript. If you’re uncomfortable making these changes, consider consulting a developer or reaching out to UpsellPlus support.
Theme Variations: Different Shopify themes have varying structures. Ensure you identify the correct files and insertion points specific to your theme.
Testing: After making changes, thoroughly test the cart drawer functionality across various devices and browsers to ensure a seamless user experience.
Related Articles:
AJAX Refresh Code for Popular Shopify Themes
How to Get Started: Cart Upsells > Popup
How to Set Up a Cart Page Upsell
Updated on: 10/03/2025
Thank you!