How to Build a Custom Shopify Upsell Popup Using Free AI Tools (No Apps Needed)

Are you looking to increase your store's Average Order Value (AOV) without paying for expensive apps? Upselling is one of the most effective ways to boost your revenue, but most Shopify merchants rely on paid apps that can slow down their stores and eat into their profits. In this comprehensive guide, I'll show you how to create a custom upsell popup using free AI tools that works just as well as premium apps, without the monthly fees or performance issues.If you prefer a step-by-step walkthrough, make sure to watch my full video tutorial linked below!

What is an Upsell Popup and Why Build Your Own?

An upsell popup appears when a customer clicks "Add to Cart" on a product, offering them an upgraded version of that product before completing the action. If they accept the upgrade, the premium product is added to their cart instead. If they decline, the original product is added as normal.

There are two major problems with using apps for this functionality:

1. Performance issues: Most upsell apps load unnecessary libraries and use only about 5% of their functionality, significantly slowing down your store.

2. Increasing costs: Many apps charge not only monthly fees but also take a percentage of the additional sales they generate, the more successful your upsells, the more you pay.

By building your own solution, you'll have a lightweight implementation that won't slow down your store and doesn't require ongoing payments.

The Development Process Using AI Tools

Step 1: Planning the Functionality

I started by defining the core requirements for my upsell popup:

1. Mark products as upsell triggers through meta fields

2. Intercept the "Add to Cart" action

3. Show an interactive popup with a custom message

4. Add the upsell product to cart if the customer says "yes"

5. Add the original product to cart if the customer says "no"

6. Skip showing the popup if the upsell product is already in the cart

7. Show the popup only once per session to avoid bothering customers

Step 2: Creating prompts for AI to build the upsell popup

I used ChatGPT to help generate the code, treating it like having both a developer and a code coach by my side. First, I described my requirements to ChatGPT, which gave me suggested prompts to use with development tools like Cursor or Windsurf.

PROMPT 1 – Section Setup with Metafield Support
Create a Shopify theme section using Liquid that checks if the current product has a product-level metafield called `custom.upsell_product`. If the metafield exists, render a hidden popup container in the section markup. Also include the upsell product's title, image, price, and a message from metafield `custom.upsell_message`. Use placeholder text if metafield is missing. Do not include styling or JS yet.

PROMPT 2 – Add to Cart Interception and Popup Logic (JS)
Write JavaScript to intercept the native Add to Cart button click on the product page. If the product has an upsell metafield (based on a data attribute like `data-has-upsell`), prevent the default behavior and show the upsell popup instead. The popup should include two buttons: "Yes, upgrade me" and "No thanks". If the customer clicks "Yes", add the upsell product to the cart. If they click "No", add the original product. Include logic to skip the popup if the upsell product is already in the cart or if the customer has already interacted with the popup in this session (use sessionStorage).

PROMPT 3 – Basic Popup Styling (Optional)
Create simple CSS styles for a centered modal popup for the upsell offer with basic styling: overlay background, container box with product image, title, price, message, and two buttons side-by-side. Use class names only, no inline styles.

PROMPT 4 – Cart Check Helper (Optional but Useful)
Write a helper function in JavaScript that fetches the current Shopify cart using the storefront API or `/cart.js` endpoint and checks if a given product ID is already in the cart. Use this to avoid showing the upsell popup if the upsell product is already in the cart.

PROMPT 5 – Optional: Add Metafield Setup Instructions
Write instructions for a Shopify merchant to set up the metafield `custom.upsell_product` as a product reference and `custom.upsell_message` as a single-line text. These metafields should be assigned to products where an upsell is desired.

I ultimately used Windsurf (an AI-powered IDE similar to VS Code) with Claude 3.5 as my AI assistant to generate the code in stages:

1. HTML and Liquid markup

2. JavaScript functionality

3. CSS styling

4. Cart checking functionality

The AI generated each component, and I had ChatGPT review the code to suggest improvements. This iterative process created a lean, effective solution without unnecessary bloat.

Step 3: Creating the Section

The final section consists of three main parts:

• HTML/Liquid markup: Creates the popup structure and manages product information

• JavaScript: Handles the interactive functionality, including:

  • Intercepting the Add to Cart button

  • Showing/hiding the popup

  • Managing product selection and cart additions

  • Session management

• CSS: Provides styling for the popup with a clean, professional appearance

Step 4: Implementing Meta Fields

For the popup to work, you need to create two meta fields on your products:

1. Upsell Product: A product reference field that connects the trigger product to its upgrade option

2. Upsell Message: A rich text field for your custom upsell message (optional)

   

Installation Guide

Follow these steps to implement the upsell popup on your Shopify store:

1. Create the Required Meta Fields

1. Go to Settings → Custom Data → Products

2. Add a definition called "upsell_product" with the type "Product"

   

3. Add another definition called "upsell_message" with the type "Rich text" (optional)

   

2. Add the Section to Your Theme

1. Go to your theme editor → Edit Code

2. In the Sections folder, create a new file called "upsell-popup.liquid"

   

3. Copy and paste the complete code into this file

4. Open theme.liquid and add this line before the closing </body> tag:

5. Save all changes

3. Configure Your Products

1. Go to a product you want to use as a trigger

2. Scroll down to the Meta fields section

3. Select the upgrade product in the "upsell_product" field

4. Add your custom message in the "upsell_message" field (optional)

5. Save the product

How the Upsell Popup Works

When a customer visits a product page with an upsell configuration and clicks "Add to Cart":

1. Instead of immediately adding the product to the cart, the popup appears

2. The popup displays your custom message, the upgrade product's title, price, and image

3. If the product has variants, they appear as selectable options

4. The customer can choose "Yes, upgrade me" or "No thanks"

5. Based on their selection, either the upgrade product or the original product is added to the cart

6. The popup won't appear again during that session or if the upsell product is already in their cart

Benefits of This Custom Solution

• No monthly fees: Once implemented, there are no ongoing costs

• Better performance: Minimal, focused code that doesn't slow down your store

• Full customization: Easily modify the design or functionality to suit your needs

• Works with any theme: Compatible with all Shopify themes

• Unlimited usage: No restrictions on how many times it can be used

  
  

  If you don't want to go through the entire process of creating a free Shopify Popup Upsell you can get the Shopify Popup Upsell that I created from here and start boosting your AOV today!

Customization Options

The section includes several customization options in the schema, allowing you to:

• Change button text and colors

• Adjust popup dimensions and styles

• Modify overlay opacity and positioning

• Set custom timing for animations

Conclusion

Building your own upsell popup using free AI tools is a smart way to increase your store's AOV without the drawbacks of traditional apps. This solution is lightweight, cost-effective, and gives you complete control over the functionality.

By following this guide, you've not only created a powerful sales tool but also learned an approach that can be applied to other custom features for your Shopify store. The combination of AI assistance and your own implementation means you can create professional, app-quality features without the ongoing costs or performance penalties.

Ready to take your store's AOV even further? Consider implementing additional strategies like free gift promotions. Read this article or watch this video tutorial to learn how.

FAQs

Q: Will this upsell popup work with any Shopify theme? A: Yes, this implementation is designed to work with all Shopify themes as it doesn't rely on theme-specific code.

Q: Do I need coding experience to implement this upsell? A: Basic familiarity with Shopify's theme editor is helpful, but you can follow the step-by-step instructions even without coding experience.

Q: Can I customize the appearance of the upsell popup? A: Yes, you can modify the CSS to match your store's design or use the built-in customization options in the section schema.

Q: Will this affect my store's loading speed? A: Unlike apps that load multiple libraries, this custom solution is lightweight and has minimal impact on performance.

Q: Can I use this for multiple products? A: Yes, you can configure as many products as you want with different upsell options.