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.
Click 'Create offer', choose Cart Page. Select 'Cart Drawer Upsell'
Configure the details for your cart drawer upsell. Click 'Save & publish'
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
Download your current theme in your Shopify Admin > Online Store > Live theme > … > ‘Download theme file’
Identify your cart drawer theme file
Go to your live website. Right click > Inspect. This will pull up the developer tools. While this is open, open up your cart drawer. Hover over the screen to find an html id or class that controls the cart drawer.
Once you found the html id or class that all elements in the cart drawer seem to have, search for that id/class in the theme file you just downloaded. The theme file will have folders, you can just go to the main folder and search for the id/class there.
Example here: we searched shopify-section--mini-cart, it showed us the cart drawer is controlled by the mini-cart.liquid file
Add the code to your cart drawer theme file
Go back to your Shopify admin > Online Store > Live theme > … > Edit code. Edit this file by adding <div id="upsellplus_drawer_offer"></div> above cart drawer footer. If you can’t find a footer (maybe it has another name), then check the html elements again in 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 when an upsell item is added
This code avoids the customer clicking the ‘add to cart’ button, that button loading, but never displaying the upsell item in the cart in the cart drawer. Once you click ‘add to cart’ the upsell item actually has been added to the cart, but the cart drawer needs to be refreshed to display the product.
Find the code for your theme file here:
AJAX refresh code for popular Shopify Themes
Search for your theme name, this is an example for the Focal theme. Add this code in the UpsellPlus app > Cart Drawer upsell > Customization > Advanced > Refresh code > Save
Tell the app to show the cart offers at the right time
As a cart drawer is empty by default when a customer comes to the website for the first time, we need to check if an item was added to cart. Once an item has been added, we’ll display the cart drawer upsell.
To do so, you'll add init code to the theme script. You’ll need to find the script which handles the ‘add to cart’ submit button, because before the first item is added to the cart, we won’t show any offers, and we need to show offers dynamically after the customer clicks ‘add to cart’.
Usually the ‘add to cart’ button will be in theme.js or theme-editor.js file under the 'Assets' folder in your theme file code. Once you located it, add the following code: upsellplusapp.init_drawer_offer();
One way to find where to place the init code is to go to your live store > Open a product page > Right click 'Inspect' > Click the main 'Add to cart' button > Check the event listeners. This will show you the file the event listeners are located in in your theme files.
Here the file is called product-form.js.
That's it! Your cart drawer upsells should be up and running now. You can control all other settings in the UpsellPlus app.
Click 'Create offer', choose Cart Page. Select 'Cart Drawer Upsell'
Configure the details for your cart drawer upsell. Click 'Save & publish'
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
Download your current theme in your Shopify Admin > Online Store > Live theme > … > ‘Download theme file’
Identify your cart drawer theme file
Go to your live website. Right click > Inspect. This will pull up the developer tools. While this is open, open up your cart drawer. Hover over the screen to find an html id or class that controls the cart drawer.
Once you found the html id or class that all elements in the cart drawer seem to have, search for that id/class in the theme file you just downloaded. The theme file will have folders, you can just go to the main folder and search for the id/class there.
Example here: we searched shopify-section--mini-cart, it showed us the cart drawer is controlled by the mini-cart.liquid file
Add the code to your cart drawer theme file
Go back to your Shopify admin > Online Store > Live theme > … > Edit code. Edit this file by adding <div id="upsellplus_drawer_offer"></div> above cart drawer footer. If you can’t find a footer (maybe it has another name), then check the html elements again in 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 when an upsell item is added
This code avoids the customer clicking the ‘add to cart’ button, that button loading, but never displaying the upsell item in the cart in the cart drawer. Once you click ‘add to cart’ the upsell item actually has been added to the cart, but the cart drawer needs to be refreshed to display the product.
Find the code for your theme file here:
AJAX refresh code for popular Shopify Themes
Search for your theme name, this is an example for the Focal theme. Add this code in the UpsellPlus app > Cart Drawer upsell > Customization > Advanced > Refresh code > Save
document.querySelector("#upsellplus_drawer_offer").innerHTML = "";
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
upsellplusapp.init_drawer_offer();Tell the app to show the cart offers at the right time
As a cart drawer is empty by default when a customer comes to the website for the first time, we need to check if an item was added to cart. Once an item has been added, we’ll display the cart drawer upsell.
To do so, you'll add init code to the theme script. You’ll need to find the script which handles the ‘add to cart’ submit button, because before the first item is added to the cart, we won’t show any offers, and we need to show offers dynamically after the customer clicks ‘add to cart’.
Usually the ‘add to cart’ button will be in theme.js or theme-editor.js file under the 'Assets' folder in your theme file code. Once you located it, add the following code: upsellplusapp.init_drawer_offer();
One way to find where to place the init code is to go to your live store > Open a product page > Right click 'Inspect' > Click the main 'Add to cart' button > Check the event listeners. This will show you the file the event listeners are located in in your theme files.
Here the file is called product-form.js.
That's it! Your cart drawer upsells should be up and running now. You can control all other settings in the UpsellPlus app.
Updated on: 04/12/2024
Thank you!