How to adjust the style of your upsell pop-up

By default, our upsell pop-up is really clean and non-aggressive. That’s because we believe clean and simple design works best in terms of conversion.

But you can always make it better by matching its design to your storefront.

Change main button color

Changing the color of the main button is really simple. Just go to Settings in the top menu and pick the color of your choice. Alternatively, you can also enter the color hex code.

To get some hex code ideas you can use online color wheel from Canva.

But what if you want to do more than just changing the color of the button? You can add your custom CSS code and basically change the whole pop-up.

Adjust pop-up using custom CSS

Using custom CSS you can change practically any element on the pop-up. However, some basic understanding of CSS is required to do that. To get started with CSS we recommend reading W3Schools CSS tutorial.

To adjust the CSS code, go to Settings in the top menu and find the section Custom Appearance. Insert your custom CSS code there.

In the example below we have increased the font size and changed the color of all buttons:

Below are some quick custom CSS codes to get you started.

Change background color and font color of the Add buttons:

.Button-Add {
    background-color: #2dd262 !important;           /* button color */
    border-color: #8f9396 !important;               /* border color */
    color: white !important;                        /* font color */
    font-size: 16px !important;                     /* font size */
}

.Button-Add:not([disabled]):hover {
    background-color: #059e36 !important;           /* button color when hover over */
}

Change background color and font color of the Continue button:

.Button-Primary {
    background-color: #2dd262 !important;           /* button color */
    border-color: #8f9396 !important;               /* border color */
    color: white !important;                        /* font color */
    font-size: 18px !important;                     /* font size */
}

.Button-Primary:not([disabled]):hover {
    background-color: #059e36 !important;           /* button color when hover over */
}

Change font size of the pop-up title, parent product and upsell product:

.Title {
    font-size: 30px !important;       /* font size of the headline */
}

.Product-Name{
    font-size: 16px !important;       /* font size of the parent product */
}

.Offer-Title {
    font-size: 16px !important;       /* font size of the upsell product */
}

Change the font used on the pop-up:

/* imported custom font needs to be on the fonts.googleapis.com domain */
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');

/* assigning a new font to Candy Rack pop-up elements */
.Title, .Product-Name, .Offer-Title, .Button-Add, .Button-Remove, .Button-Primary, .Offer-Description-Content, .Offer-Price, .Product-Price, .Offer-Price-Before-Discount {
    font-family: Comfortaa, sans-serif !important;
    font-weight: 300;
}

Below is the overview of all available classes for customization.

Happy upselling,

Your Digismoothie Team

Leave a Comment