How to display related product popups on Shopify

Nina De la Cruz Nina De la Cruz 5 min read

If you’re running an online store, you know there’s a handful of tactics to increase your average order value (AOV). One of these tactics is upselling.

But how do you upsell products in a way that is efficient and non-intrusive at the same time?

On the one hand, you can choose to rely on automated upselling apps. However, most merchants would agree that curated product recommendations tend to work better.

Take this related product popup as an example 👇


Recommendations like this one are meant to pop up only if a customer adds certain products to their cart – say, an enamel care product, in this case. Using the primary button, customers will be able to add the product directly to the cart; and if they want to decline the recommendation, they can just close the popup.

Want to implement this scenario in your store? Below, we’ll show you exactly how to create a related product popup and add it to your Shopify website using Getsitecontrol.

Getsitecontrol is an easy-to-use popup builder for Shopify. The app requires zero coding knowledge and you will need less than 15 minutes to set it up and running on your website. Once we’re done with the technical part, we’ll talk about tips and tricks for upselling without coming across as salesy. By the end of this guide, you’ll have plenty of ideas and templates for recommending products on Shopify.

How to create a product recommendation popup for Shopify

Before getting started, it’s important that you add the Getsitecontrol app to your Shopify website. Find it in the Shopify app store and hit Install. Then find Getsitecontrol among apps in your Shopify dashboard, and follow the steps from the guide below.

Step 1. Select a template

Log into your dashboard and hit Explore popular use cases – then proceed to Upsell customers.

How to access the cross-selling template gallery in Getsitecontrol

You’ll be prompted to the gallery featuring cross-selling popup templates.

Popup templates for cross-selling on Shopify

Click through the templates to see them in action and select the one that looks appealing to you. Remember that you’ll be able to change both the image and text on the popup once you open it in the Getsitecontrol editor.

Step 2. Replace the image on the popup

The customization process in Getsitecontrol is very straightforward. To change a piece of text or image, click on them right in the preview window or in the right-side menu. For example, we’re going to replace the image first.

How to replace an image on a related product popup

Click the default creative and proceed to Change image on the next screen.

You’ll have three options:

  • pull a product picture straight from your store
  • select a stock image from the built-in gallery
  • or import an image from your computer

The first option is typically the easiest one for Shopify owners. Just type the recommended product’s name in the search field, and the corresponding photos will pop up.

How to fetch product pictures from the Shopify store for a popup

Once you select the photo, you’ll see the result in the preview window right away. If you need to adjust the position of an image or make more room for it, use the Spacing and sizing controls in the menu on the right.

💡 More style customization options are available under the Theme menu at the top.

Step 3. Adjust the copy

The copy on your recommendation popup is uber-important. Once you’re done adjusting the visual side of it, click the title and description and type new text.

How to edit the copy on a related product popup in Getsitecontrol

The best practice is to keep the text of your recommendation clear and concise. Focus on featuring the product’s key characteristics and its price – and if you have some space left, feel free to add details.

Notice that the action button is designed to let customers add the product directly to the cart. This means that the text on the button should clearly indicate what happens. You can leave the default “Add to cart” phrase or change it to something that sounds more like your tone of voice – for example, “I want one!” or “Grab the deal”.

Step 4. Set up the button click action

Now that we’re done with the look of the popup, let’s work on the backend settings.

First, we need to assign the right action to the button click. Select the button right in the preview window and proceed to the Actions menu. Hit the ‘Add to cart’ option, proceed to ‘Add custom product’, and start typing the name of the recommended product until it shows up in the list.

Type a confirmation message: after a customer clicks the button, it will be briefly displayed to indicate that the product has been added to the cart.

Leave the rest of the settings unchanged and proceed to the Targeting tab to continue.

Step 5. Select targeting settings

Under the Targeting tab, you can select the conditions that will trigger your related product popup. There are two common scenarios you can use:

  • You can display the recommendation as soon as a customer adds the triggering product to the cart

  • Or you can display the recommendation later when a customer gets to the shopping cart

If you want to display the popup right away, find the Display widget on control and “include” the pages of the products that are supposed to trigger the recommendation. Then scroll down to Start to display widget and select “after product has been added to cart”.

How to set recommended product triggers

This way, if a customer adds a product from the product page, the recommendation popup will be triggered.

If you want to display the recommendation in the shopping cart instead, go to Display widget on+ Add URL and select ‘Shopping cart’. Then scroll down to Display widget if and select products (or product variants) that should trigger the recommendation.

Once you’re done, add the final condition: Display widget ifproduct is not, and select the product you’re recommending on the popup. This way, you make sure you’re not recommending something a customer already has in the cart.

This way, if a customer has added any qualifying products from the list, they’ll see the recommendation popup in their shopping cart.

After this step, you can save the popup and activate it in your store. To make sure everything works the way you intended, replicate the triggering scenario and see if the related product popup shows up.

Feel free to go back to your Getsitecontrol dashboard at any point to see how many views and clicks the popup has received. In the next section, we’ll show you how to find out how many sales it has participated in.

Try product recommendation popups on Shopify and increase your AOV

When done right, pop-up recommendations don’t just help you increase average order value – they also create a better experience for your customers. How? By suggesting products that address their specific needs!

That being said, this tactic only works well under one condition: customer-centered targeting.

If you decide to use related product popups in your Shopify store, avoid going the easy way and simply recommending your best-sellers (or slowly moving stock) to everyone. Take your time to adjust targeting settings and only recommend products that are truly related to what a customer has in their cart.

With Getsitecontrol, adding a related product popup will take you less than half an hour. If you already have decent traffic in your store, chances are, you’ll see whether it works for you within days.

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Grow on Shopify section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF