Skip to main content

CSS adjustments

Learn how to perform more advanced style adjustments

Tomas Janu avatar
Written by Tomas Janu
Updated today

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

.Button-Add

for Grid layout: .Button-Add-grid

Continue button

.Button-Primary

No, thank you button

.Button-Reject

Parent product line

.Product-Line

Pop-up title

.Title

Parent product

.Product-Name

Upsell product

.Offer-Title

Parent product price

.Product-Price

Upsell offer price

.Offer-Price

Original upsell offer price

.Offer-Price-Before-Discount

Description text

.Offer-Description-Content

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

.candyrack-ppp-checkbox-layout__offers--title

Product Name

.candyrack-ppp-checkbox-layout__info--product-name

Original price

.candyrack-ppp-checkbox-layout__info--product-price

Discounted price

.candyrack-ppp-checkbox-layout__info--product-discount-price

Description text

.candyrack-ppp-checkbox-layout__info--offer-description

Placeholder text

.candyrack-ppp-text-input

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

Did this answer your question?