By default, our upsell layout 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 enhance it by leveraging the customization options in the app, such as the Pop-up Customizations settings, the Product Page app block Customization settings, or by applying more advanced style adjustments.
Pop-up customization
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 Customization in the app menu and find the section Advanced Customization. Insert your custom CSS code there.
List of selectors
Below is the list of available selectors you can use to help you get started with styling the Candy Rack pop-up.
Element | Class selector |
Add button |
for Grid layout: |
Continue button |
|
No, thank you button |
|
Parent product line |
|
Pop-up title |
|
Parent product |
|
Upsell product |
|
Parent product price |
|
Upsell offer price |
|
Original upsell offer price |
|
Description text |
|
Pop-up Customization Examples
Here are some examples of customizations using CSS codes to enhance your store’s upselling experience and align with your store's branding.
Customize the "Add", "Continue" and "No, thank you" button
This code can change the background color, font color, border color, and font size. Also, change the background color on hover for the Add button:
.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:hover {
background-color: #059e36 !important; /* button color on hover */
}If you'd like to apply the same style to all buttons, you can group them together using commas to separate each class.
.Button-Add, .Button-Primary, .Button-Reject {
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:hover, .Button-Primary:hover, .Button-Reject:hover {
background-color: #059e36 !important; /* button color on hover */
}
Customize the parent product line
Adjust the background color of the main product section.
.Product-Line {
background-color: #D9FED9 !important; /* background color */
}
Font size adjustments
Modify the font sizes for 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 */
}
How to change the font used in the pop-up
You can further personalize the pop-up by importing a custom font and applying it to specific elements.
First, import the font using either the @import rule (to load an external CSS that includes the font), or define it directly using the @font-face rule. Then apply the font to specific elements using the font-family property.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* assigning a new font to Candy Rack pop-up */
.frame-content {
font-family: Comfortaa, sans-serif !important;
}
Pop-up Class Selectors Overview
Here are all the available class selectors you can use to customize the Candy Rack pop-up. These selectors allow you to style various elements, such as buttons and text, giving you greater control over the pop-up's appearance.
Embedded offers customization
To adjust the CSS code of your upsells embedded on your product page, go to your Theme editor, access a product page, navigate to Template, open Candy Rack's Product Page app block settings, and scroll down to the bottom of the page to add the CSS code.
To learn more about how to activate app blocks for Candy Rack, read How to add and customize app blocks for the Product page placement article.
List of selectors
Below is the list of available selectors you can use to help you get started with styling the Candy Rack app block.
Element | Class selector |
Offer Title |
|
Product Name |
|
Original price |
|
Discounted price |
|
Description text |
|
Placeholder text |
|
App block Customization Examples
Here are some examples of customizing the app block using CSS code to enhance your store’s upselling experience and align with your store's branding.
Font size adjustments
Modify the font sizes of the Offer title and Upsell name.
.candyrack-ppp-checkbox-layout__offers--title {
font-size: 30px !important; /* font size of the offer title */
}
.candyrack-ppp-checkbox-layout__info--product-name {
font-size: 15px !important; /* font size of the upsell name */
}
Customize the product prices
Modify the font color of the original product price and the discounted price to make the discount more noticeable to customers.
.candyrack-ppp-checkbox-layout__info--product-price {
color: grey !important; /* font color of the offer original price */
}
.candyrack-ppp-checkbox-layout__info--product-discount-price {
color: green !important; /* font color of the sale price */
}
Customize text contents
Modify the font styles of the description and the placeholder text. Here are the selectors used:
.candyrack-ppp-checkbox-layout__info--offer-description {
font-weight: 700 !important; /* font weight of the description text */
}
.candyrack-ppp-text-input {
font-style: italic !important; /* font style of the placeholder text if custom note is enabled */
}
App Block Class Selectors Overview
Here’s an overview of the available class selectors you can use to customize the Candy Rack app block.
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 [email protected]
Happy upselling,
The Candy Rack team