How to Add Upsells to Your Shopify Cart with Theme App Extensions

Bottom line: 90% of cart upsell success comes from picking the right app and placing it correctly in your theme.

When you want to add upsells to the Shopify cart, the simplest approach today is to use an app that supports Theme App Extensions.

You really only need to focus on these two points:
- Choose an upsell app that supports Theme App Extensions
- In Online Store → Theme editor, add that app’s block to your cart

Once you set basic display conditions and clean up the design, you can have upsells running today. This playbook organizes the steps as a checklist.

Prerequisites: check whether you can implement this in your store right now

• Check your Shopify plan: In Settings → Plan, confirm your current plan. If you are on a plan that supports the standard Online Store feature, you can use Theme App Extensions.
• Check whether your theme is Online Store 2.0: Go to Online Store → Themes → … (Actions) → Edit code, and verify that layout contains theme.liquid and that Templates contains JSON templates such as product.json. If so, the theme is based on Online Store 2.0.
• Understand how your cart is displayed:
  - Go to Online Store → Themes and click Customize on your live theme
  - In the preview, add a product to the cart and check whether you are using a slide-out drawer cart or a dedicated cart page. You will later specify where to show upsells based on this.
• Assume you will use an app that supports Theme App Extensions: For the upsell app you plan to install or are already using, check the app description or documentation to confirm that it supports Theme App Extensions.

Steps: placing upsells in the cart via a Theme App Extension

• Install an upsell app: In the Shopify App Store, search for “upsell” or “cross sell”, pick an app whose description clearly states “Theme App Extension” or “supports Theme App Extensions”, click Add app, review the requested permissions, then click Install app.
• Create a basic rule inside the app: Open the installed app and
  - Go to a menu such as “Cart upsell” or “Cart recommendations”
  - Click a button like “Add rule” or “Create campaign”
  and first create just one pattern (for example: condition = “when there is at least one item in the cart”, recommended products = your top 1–3 bestsellers).
• Open the theme editor: In the Shopify admin, go to Online Store → Themes and click Customize on your live theme.
• Go to the cart template:
  - For a drawer cart: In the page selector at the top right of the theme editor, choose Cart → Drawer or the template that corresponds to your cart.
  - For a cart page: Use the same selector to choose the Cart or cart template.
• Add an app block: In the left-hand section list of the theme editor, select the cart-related section (for example Cart, Cart drawer, etc.), then
  - Click Add block
  - From the list, choose the block with your upsell app’s name (for example, something like RecoBoost - Cart Upsell).
• Adjust the block position: Drag the newly added app block so that it sits
  - either directly under the list of cart items
  - or directly above the subtotal.
  These are both highly visible spots, so start with one of them.
• Check the display settings for the block: Click the app block you added and review items such as
  - Type of recommendation (for example, Related products, Frequently bought together, etc.)
  - Maximum number of items shown (for example, 3)
  - Mobile layout (horizontal scroll vs vertical list)
  Adjust as needed. If you are unsure, leave the defaults.
• Save the theme and verify behavior: Click Save in the top right of the theme editor, then
  - On the storefront, actually add a product to the cart
  - Open the cart and check whether the upsell appears and whether the design looks intact.
• Run a test order for a final check:
  - Prepare an inexpensive test product in your store
  - Add it to the cart together with a product shown in the upsell and go all the way through checkout
  - In the Orders section, confirm that the upsell item is recorded correctly in the order.

Placement and setup tips: focus on these three points

• Limit placement to either “below the item list” or “above the subtotal”: If the upsell sits too high, it is overlooked; too low, and it is never scrolled to. Pick one of these positions and keep it fixed for about two weeks while you review the data.
• Limit the number of items to 2–3: Too many options cause decision fatigue. In the app block settings in the theme editor or in the app settings, set the number of displayed items to 2–3 to keep the cart clean.
• Use short copy that clearly states why it is recommended:
  - Heading examples: “Frequently bought together”, “Goes well with your cart”
  - Button copy examples: “Add to cart”, “Add now”
  
  If you can edit the heading text in the theme editor, use clear wording along these lines.

Pre-launch checklist: avoid common pitfalls

• Check that the mobile layout is not broken: In the theme editor, switch the device preview to Mobile and confirm that
  - Images are not tiny
  - Buttons are not wrapping onto multiple lines.
  If the layout breaks, try switching the app block layout to a vertical list.
• Check that the empty cart state is not awkward: If upsells are configured to show even when the cart is empty, you may end up with “no items, just recommendations”. If the app offers a condition such as “show only when the cart has items”, enable it.
• Check conflicts with discounts and bundles: If you use automatic discounts or other bundle apps, run a test order and verify that
  - When an upsell item is added, the total and discount amounts match expectations
  - The same product is not being discounted twice.
• Check that out-of-stock items are not shown: Showing sold-out products as upsells hurts the experience. If the app has a filter such as “only show products in stock”, make sure it is enabled.
• Check for conflicts with tracking tags: If you monitor add-to-cart events with Google Analytics or Meta Pixel, verify that
  - Items added via the upsell also fire an add_to_cart event.
  Some apps change event names, so review your reports at least once.

Next step: automate cart upsells with RecoBoost

RecoBoost is an AI recommendation app for Shopify. Because it supports Theme App Extensions, you can place cart upsells with almost the same steps as above.

Here is how you can start today:

1. From Apps → Shopify App Store, install RecoBoost
2. Open RecoBoost and, in Recommendation settings, set the logic to AI similar products or Frequently bought together
3. Go to Online Store → Themes → Customize and add a RecoBoost - Cart Upsell block to your cart template
4. Check the layout on mobile and run a test order to verify behavior

Start with cart upsells for your bestsellers, and once you are comfortable, split the logic by product or category so you can more easily track the sales impact.