Can I change the position where the offer appears on the Cart Drawer Upsell?

Overview

Customizing the position of upsell offers within your cart drawer can enhance the shopping experience and potentially increase your store's Average Order Value (AOV). By default, UpsellPlus suggests placing the upsell offer above the footer section of the cart drawer. However, you have the flexibility to position it elsewhere within the cart drawer to better suit your store's design and user experience.

Our general guide, How to get started: cart upsells > cart drawer suggests to place the <div id="upsellplus_drawer_offer"></div> above the footer of your drawer cart as you can see below:



If you'd like to change the position, here's how to do so:

Step-by-Step Guide

Access Your Theme Code
Log in to your Shopify Admin panel.
Navigate to Online Store > Themes.
Click ... (More Actions) > Edit Code for your active theme.

Locate the Cart Drawer File
In the Sections or Snippets directory, identify the file responsible for the cart drawer's layout. Common filenames include cart-drawer.liquid, mini-cart.liquid, or similar.
If you're unsure which file controls the cart drawer, refer to your theme's documentation or consult with the theme developer.

Identify the Desired Position
Within the cart drawer file, examine the HTML structure to determine where you'd like the upsell offer to appear.

Common placement options include:
Above the Cart Items: Positioning the offer before the list of cart items.
Between Cart Items and Footer: Placing the offer between the cart items and the footer section.
Within the Footer: Embedding the offer directly within the footer area.

Insert the UpsellPlus Placeholder
At the desired location, insert the following code snippet:

<div id="upsellplus_drawer_offer"></div>

This placeholder determines where the upsell offer will render within the cart drawer.

Save and Preview Changes
After inserting the placeholder, click Save to apply the changes.
Preview your store to ensure the upsell offer appears in the intended position within the cart drawer.



You'll need to check the html elements to properly identify the place where the offer should be shown. You can then place the upsellplus div wherever you'd like!


Key Considerations
Theme Variations: Different Shopify themes have unique structures. Ensure you identify the correct file and insertion point specific to your theme.
Technical Expertise: Modifying theme code requires a basic understanding of HTML and Shopify's Liquid templating language. If you're uncomfortable making these changes, consider consulting a developer or reaching out to UpsellPlus support.
Testing: After making changes, thoroughly test the cart drawer functionality across various devices and browsers to ensure a seamless user experience.

Related Articles
How to Get Started: Cart Upsells > Cart Drawer
AJAX Refresh Code for Popular Shopify Themes

Updated on: 10/03/2025