Question 1

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 2

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 much 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?context

Question 3

Configure your popup design

Accepted Answer

Customising 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.

Where to find Popup design

Access the Popup design in the left-hand menu.

Popup sections

Here is the different sections you can change in the popup design.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/b/a/f6baef90a856a800/popup-anatomy-800-x-700-px_1myqkg0.jpg =594xauto)

Popup card design

This section controls the main appearance of the popup container. What you can customise:

Background colour: Choose a background colour that complements your store theme.
Close icon colour: Adjust the colour of the close button so it stays visible while matching your design.
Rounding: Soften the edges of your popup by increasing the rounding.
Border toggle: Turn on a border for a more structured look or keep it off for a clean and modern feel.
Title: The offer title text is styled here. The text itself is set inside your upsell offer.
Header bottom border: Add a subtle divider under the header for extra definition.

Purchased product section

This section controls how the product

Question 4

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 5

Shareable Calendars

Accepted Answer

Shareable Calendars

What this covers

Create a calendar dedicated to a team or filter set.
Configure the form options so the calendar includes only the people you want.
Generate and share a public iCal feed link (and rotate/revoke it later).

Create a calendar

1) Go to the Share Calendars page and select Create Calendar. 2) Fill in the form:

Calendar Name — required (e.g., "Engineering Leave").
Description — optional context shown on the card.
Organizations — appears when you have more than one connection. Choose specific orgs or pick All connected organizations.
Employee Selection — pick specific people or use quick buttons:
- Select all full-time, part-time, all employees, or clear selection.
- Add individuals via the dropdown; selected people show as removable chips.
Active employees only — toggle on to exclude inactive staff.
Departments / Locations / Employment types — choose any mix; leave empty to include all. Chips can be removed individually. 3) Submit with Create Calendar. A success toast confirms the calendar card now appears in the grid.

Generate and share the link

1) On the new calendar card, choose Share. 2) If sharing is off, click Generate Share Link. The dialog will show:

An iCal Feed URL with a copy button (anyone with the link can view).
Quick-add buttons for Google Calendar and Outlook (uses the same feed).
A Public badge with th

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

Frequently Read Articles

Browse All Categories