Question 1

Getting started with the Upsell Popup app

Accepted Answer

Configure your Upsell PopUp app

To start using the UpSell Popup app to generate more sales for your store, you will need to complete the following steps.

Create an Offer
Configure your Popup design
Enable app embed in your theme

Create an offer

In this section, you can choose to set up a pop up to encourage shoppers to add additional items to their cart with an cross-sell offer or a upsell offer where they upgrade to a more premium version of your product.

For details about creating an offer visit:

Configure your popup design

Your popup should feel like a natural extension of your store. With the built-in design controls, you can easily match the popup to your brand colours, typography and overall style without needing any code. This guide walks through each section so you can confidently customise the look and feel of your popup.

How to configure your popup design

Enable App Embed in your theme

The final step is to visit your Shopify theme editor and enable App Embed in order for the app to function properly in your store front end.

Visit your [theme editor](https://anitas-dev-store.myshopify.com/admin/themes/current/editor

Question 2

How to add Custom CSS to style a popup

Accepted Answer

Custom CSS Guide for Push Cart Popup

This guide explains which CSS selectors control which parts of the popup, and how you can safely customise the popup appearance using the Custom CSS field.

Use the instructions below, and code samples to see what you can do to customise the popup.

Popup Structure Overview

Popup Wrapper
└─ Popup Content
   ├─ Header (title + close button)
   ├─ Added to cart text
   ├─ Purchased product section
   ├─ Upsell section title
   └─ Upsell product list (rows)

Popup Container

Popup wrapper (global styles)

Controls popup-wide styling such as background, padding, border radius, width, etc.

.push-cart-dialog-content-wrapper

Popup panel

Controls the visible popup panel itself.

.push-cart-dialog-content

Examples:

.push-cart-dialog-content {
  border-radius: 16px;
  padding: 18px;
}

Header (Title + Close Button)

Popup header row

.push-cart-popup-header

Popup title text

.push-cart-popup-title

Close button container

.close-icon-container

Close icon (SVG)

.close-icon

Examples:

.push-cart-popup-title {
  font-size: 20px;
  font-weight: 700;
}

.close-icon {
  width: 18px;
  height: 18px;
}

"Added to cart" Text

Controls the confirmation text shown after a product is added.

.added-to-cart

Example:

```css .added-to-cart { font-size: 14px; opacity

Question 3

How to set up a cross-sell offer

Accepted Answer

The Extra Product offer is ideal for merchants looking to cross-sell to customers and increase their Average Order Value (AOV) by encouraging them to add additional items to their cart. You could recommend related or complementary products based on the items already in their cart. For example, other items by the same brand, batteries for a toy, or a case for a phone.

How to create a cross-sell offer

To create an cross-sell/Extra Product offer:

Click "Offers" > "Create offer"

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/b/a/f6baef90a856a800/screenshot-2025-11-26-at-10481_15vytav.png =640xauto)

Choose "Add extra products offer" > then click "Next: configuration"
Complete the Offer Configuration > "Save"
Turn Offer Active to On

After changing any of the following features, ensure to click "Save".

General configuration

Offer Active - turn your offer on an off as needed
Name - name your offer so you can easily identify it
Title - this will appear at the top of your pop up and is visible to customers. Examples include " You might also like…" or "Customers who bought this also bought"

Offer trigger configuration

Configure this section to tell the app when to

Question 4

How to use the CSS/XPATH Selector configuration

Accepted Answer

CSS/XPath Selector Trigger

Use the CSS/XPath Selector trigger when you want an offer popup to open after a customer clicks a specific element on your storefront.

This trigger is useful when the standard Add to cart or Checkout triggers do not match your theme layout or custom functionality.

Example uses:

A custom checkout button
A payment button in a cart drawer
A "Buy now" button or sticky add-to-cart area
A custom banner, image, or call-to-action block
A theme element added by another app

What To Enter

Enter one CSS selector or one XPath expression that matches the clickable element you want to use as the trigger.

Examples:

button.checkout-button
a[href="/checkout"]
[data-testid="sticky-atc"]
//button[@name="checkout"]
//*[@data-testid="sticky-atc"]

The selector must match the element on your live storefront that the customer clicks.

If the clickable element contains nested content, such as an icon or text inside a button, that is fine. The app checks the clicked element and its parent elements, so the trigger can still work when the customer clicks inside the target element.

Important Behaviour

This trigger activates on click.
The selector field accepts CSS or XPath.
For CSS selectors, you can enter multiple selectors separated by commas if you want the same offer to open from any of those

Question 5

How to control the number of products displayed in your popup

Accepted Answer

Controlling the number of products shown in the popup

You can control how many products appear in your upsell popup by adjusting the Max products to offer setting. This allows you to balance visibility with a smooth customer experience.

How to change the maximum number of products

Open Upsell Popup from your Shopify admin.
Navigate to Offers in the left hand menu.
Open the offer you want to edit.
Scroll down to the Cross sell products section.
Enter your preferred number in the Max products to offer field. The popup will display up to this number of products when shown to customers.

Choosing the right number of products

When deciding how many products to show, consider the customer experience.

Showing too many products can take up valuable screen space, especially on mobile.
Too many choices can overwhelm customers and reduce the chance of an upsell.
Fewer, more relevant products often lead to higher conversion rates. For best results, start with a small number and adjust based on performance.

Helpful tips

3 to 4 products works well for most stores.
Keep recommendations closely related to the product added to cart.
Review your popup on both desktop and mobile before publishing.

Question 6

Multiple language options

Accepted Answer

Using translations in the upsell popup

The Upsell Popup app is available in English only in the Shopify App Store. However, you can use the Translations feature to change the language shown in your upsell popup and customise text to suit your store.

Accessing translations

To change the language displayed in your popup:

Open Upsell Popup from your Shopify admin.
From the left hand menu, click Translations.
Click the Language dropdown in the top right.
Select your preferred language. The translations update automatically once selected.

Editing existing translations

Each translatable item includes two fields:

Default (English): The original system text.
Translated: The editable text that appears in your popup.

You can override any text by editing the Translated field. Changes are applied instantly. This is useful if you want to:

Adjust wording to better match your brand voice
Fine tune phrasing for your audience
Localise terminology for specific regions

Adding custom text

If a text item does not appear in the list, you can add your own custom text.

To add new text:

Scroll down to the Add new text section.
Enter your text in your sto

Featured & Frequently Read Articles

Browse All Categories