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.

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 a customer just added to cart appears at the top of the popup.

Available options:

• Image size: Set how large the product image should display.
• Product title: Enable or disable the product name.
• Product variant name: Choose whether variant information is shown.
• Text above purchased product: Customisable text such as “Added to cart”.
• Text below purchased product: Add an additional message if needed.

Offer products section

This section controls the styling of the upsell recommendations shown below the purchased product.

What you can customise:

• Image size: Adjust the size of product images in the recommendation list.
• Desktop layout: Choose the horizontal or alternative layout style for desktop.
• Mobile layout: Set a different layout for mobile if preferred.
• Product title: Toggle whether product names are displayed.
• Price style: Control how pricing appears when there is no sale price.
• Sale price style: Choose how discounted pricing appears to highlight offers.
• Original price style: Define how the original price appears when a sale price is active.
• Border: Add a border around each product for more separation.
• Product separator: Add a visual divider between offered products.

Close button

Make sure your close button matches your brand and remains easy for customers to see.

Customisable options:

• Text: Update the wording if you prefer something different.
• Button style: Adjust the style, size and padding.
• Border toggle: Add or remove a border around the button.

Add to cart button

This is the star of your popup, so make sure it fits your design and stands out in the right way.

Options include:

• Text style: Customise the font styling.
• Button style: Adjust the button design to match your theme.
• Border toggle: Add a border if it suits your store’s look.

Product details view

If a customer clicks a product title inside the popup they will see a detailed product view.

You can customise:

• Title style: Control how product details appear in the expanded view.
• Footer border: Add a border to separate content areas.
• Back button text style: Customise the appearance of the back button text.
• Description text colour: Override the default colour for better visibility or branding.

Advanced configuration (Custom CSS)

If you want even more control you can add custom CSS. This is ideal for merchants with unique branding or those who want pixel perfect design adjustments.

Examples of what you can do with CSS:

• Custom fonts
• Extra spacing
• Custom animations
• Fully personalised colour schemes

Preview in real time

As you adjust your design settings the live preview updates instantly so you can see exactly how your popup will look before publishing changes.

Updated on: 08/12/2025