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.

However, you can always make it better by leveraging the customization options in the app or doing even more advanced style adjustments.

How to customize the pop-up using CSS

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

To adjust the CSS code, go to Customize pop-up in the top menu and find the section Advanced Customization. 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 the background color, font color, border color, and font size of the Add buttons and the background color of the Add buttons on hover:

.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 the background color, font color, border color, and font size of the Continue button: and the background color of the Continue button on hover:

.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 the background color of the parent product line:

.Product-Line {   
background-color: #D9FED9 !important; /* background color */
}

Change the 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 in the pop-up:

/* imported custom font needs to be on the fonts.google.com domain */

@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* assigning a new font to Candy Rack pop-up elements */

.frame-content {   
font-family: Comfortaa, sans-serif !important;
}

Below is the overview of classes available for customization:

If you're interested in more options for developers and Candy Rack's public API, you can learn more in the Candy Rack public API & options for developers article.

Do you need a hand with that? Don't hesitate to reach us via chat or e-mail at support@digismoothie.com

Happy upselling,

The Candy Rack team