> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.upsell.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add pre-made Upsell.com widgets to your pre-purchase flows on the product and cart pages via the Shopify editor (beta) | Shopify

Learn how to manually add Upsell.com widgets to your **product page** and **cart page** using Shopify’s theme editor.

This is part of our **pre-purchase widget beta release** - via native placement via the Shopify editor.

||| This page covers pre-purchase flows only. If you are trying to add post-purchase flows, please see our helpdesk article [here](https://help.upsell.com/en/article/how-to-add-pre-made-upsellcom-widgets-to-your-post-purchase-flows-via-shopifys-theme-editor-shopify-huvkvb/)

### ⚠️ Before you start

* This feature is in **beta**. It’s available now, but we’re still improving it based on feedback
* **Cart drawer** support is not yet available
* Widgets are applied using your **default condition** (unless you’ve set something else)
* After you have inserted the widget into the Shopify editor, you can manually choose where the widget appears using Shopify’s drag-and-drop editor - simply drag and drop


### 🛍 Add a pre-purchase widget to your **product page**

1. In Upsell.com, go to the **Flow Builder** and go to the **product page**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_82eiax.png)

2. Use your **default condition **or an alternative condition that you are using to segment the product
3. Add a **Product Upsell** widget (or any other supported widget)
4. Click **place your slots in the theme editor**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_yjky2l.png)

A Upsell.com custom slot should be added automatically to the theme editor on the Product page. If it has, you can skip to step 8.

If you do not see a notification that it has been added, we can add this manually.

5. In the top dropdown, select: **Products → Default product**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/jul-15-2025-14-13-24_jwo9jh.gif)

6. On the left-hand panel, click: **Apps → Add block**
7. Choose the relevant **Upsell.com app block** and select the widget you created
8. Drag and drop the app block you inserted to the position that you wish (e.g. above or below the buy button)

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/addappblockproductpage_1tjns6u.gif)

9. Click **Save**

10. If you have already set up the condition in Flow Builder for which you would like this block to be shown to your customers, then you can select this condition here and then you are done (though you can of course customize further in the Flow Builder)

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_1iumkv0.png)

11. If you have **not** already set up the condition or want to customize the widget, you can now edit the specifics of the upsell via the Upsell.com Flow Builder (at Step 1) by clicking '**edit slot**'

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_dmqa5t.png)

🔍 *This will display the widget on all product pages unless you've set custom product settings within Shopify or conditions within Flow Builder.*

### 🛒 Add a pre-purchase widget to your **cart page**

1. In Upsell.com, go to **Flow Builder** and go to the **Cart page**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_18et8sf.png)

2. Use your **default condition **or an alternative condition that you are using to segment the product
3. Add a **Product Upsell** widget (or any other supported widget)
4. Click **place your slots in the theme editor**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_16xpwq8.png)

A Upsell.com custom slot should be added automatically to the theme editor on the Cart page. If it has, you can skip to step 8.

If you do not see a notification that it has been added, we can add this manually.

5. In the top dropdown, select: **Cart**

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/cartmanualaddappblock_qezd4m.gif)

6. On the left-hand panel, click: **Apps → Add block**
7. Choose the relevant **Upsell.com app block** and select the widget you created
8. Drag and drop it to position that you would like the block to appear

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_1pdr6gk.png)

9. Click **Save**

10. If you have already set up the condition in Flow Builder for which you would like this block to be shown to your customers, then you can select this condition here and then you are done (though you can of course customize further in the Flow Builder)

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_1su50jd.png)

11. If you have **not** already set up the condition or want to customize the widget, you can now edit the specifics of the upsell via the Upsell.com Flow Builder (at Step 1) by clicking '**edit slot**'

![](https://storage.crisp.chat/users/helpdesk/website/-/a/7/8/a/a78a283618511000/image_tayk2l.png)

### 💡 Tips
* **Widget not showing?** Make sure you've added it inside the correct page type and saved your changes and make sure other apps are not blocking the Upsell.com app block from appearing
* **Styling** is handled automatically via our “magic design sync” feature which will automatically match your store's theme, however if you wish to create specific styles this can be done via the app block's settings in the Shopify Editor

### ❓FAQs

**Can I use different widgets on different products?**
Yes, but you’ll need to create unique conditions or templates and assign widgets to those from within Flow Builder

**Can I add multiple widgets to one page?**
Yes. Just repeat the steps above and choose different slots/widgets

**Will this interfere with post-purchase widgets?**
No - pre-purchase widgets are fully separate


### 🧪 Still in beta

We’re gradually improving the experience based on merchant feedback.
If something doesn’t work or you have ideas, please reach out via chat. Your input helps us shape what’s next.

### Well, that’s a wrap!

If this article did not solve your issue, our support team is available for you 24/7, just click the live chat button at the bottom-right corner of this page.

| 📢 **Did you know we have a YouTube channel?** Don’t forget to [subscribe to the channel](https://www.youtube.com/channel/UCyhFu9538WtMSUcdFERO4JA) to keep in touch with us and our news and updates.
| 🙏 **If you find our app useful, help other merchants find it by [leaving us an honest review on the Shopify App Store](https://apps.shopify.com/reconvert-upsell-cross-sell#modal-show=ReviewListingModal)!** It means the world to us.
||| 📧 **Please let us know if you spot any typos, mistakes, or omissions via care@upsell.com**