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:

.added-to-cart {
  font-size: 14px;
  opacity: 0.8;
}

Purchased Product Section

This is the product already added to cart.

Section wrapper

.push-upsell-purchased-product-section

Product row

.product-row

Product image wrapper

.product-image

Product image element

.product-image img

Purchased product title

.push-upsell-purchased-product-section .product-title

Examples:

.push-upsell-purchased-product-section .product-title {
  font-weight: 600;
}

.push-upsell-purchased-product-section .product-image img {
  border-radius: 10px;
}

Upsell Section Title

Controls the text like:

"You might also be interested in these"

.upsell-products-title

Example:

.upsell-products-title {
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
}

Upsell Products List

Each upsell product row uses the following structure.

Upsell row container

.csup-product-row-container

Product info block

.product-info-block

Upsell product image

.product-image
.product-image-clickable

Upsell product title

.product-title
.product-title-clickable

Price row wrapper

.product-price-row
.product-price-row-clickable

Price text

.product-price

Divider between rows

.product-row-divider

Examples:

.upsell-products-block .product-title {
  font-size: 14px;
  font-weight: 600;
}

.upsell-products-block .product-price {
  font-size: 14px;
}

.product-row-divider {
  opacity: 0.15;
}

Add to Cart (ADD) Button

Button element

.push-cart-button.add-to-cart-button

Button inner text

.button-content

Examples:

.push-cart-button.add-to-cart-button {
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

.push-cart-button.add-to-cart-button .button-content {
  letter-spacing: 0.3px;
}

Variant Selector (Dropdown)

Used when an upsell product has variants.

Variant selector wrapper

.product-variant-selector-wrapper

Variant select container

.variant-select-container

<select> element

Target using structure (no stable class on the select itself):

.variant-select-container select

Example:

.variant-select-container select {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
}

Need Help?

If a styling request isn’t covered here, contact support with:

• A screenshot of the popup
• The exact visual change required
• Any existing custom CSS already applied

Updated on: 17/12/2025