Customizing appearance of Upsell & Cross-Sell product blocks

Modified on Mon, 26 Dec 2022 at 03:25 PM

You can change Recommendation Widgets’ appearance by applying custom CSS rules in the BolideAI admin.

Steps:

From your Shopify admin, go to the BolideAI admin.
Open the Upsell & Cross-Sell app.
Switch to the Content & Style tab.
Check the Use custom CSS box.

To modify CSS rules, specify selectors and their classes for each HTML widget element. For your convenience, the image below shows CSS schematics. You can use it for your configuration.

If you want to change the navigation elements’ style, refer to the following selectors:

div.swiper-button-prev is used for the back arrow
div.swiper-button-next is used for the forward arrow
div.swiper-pagination is used for pagination dots

Tip: The class selector defines HTML elements with a specific class attribute. To select widget elements with a specific class, write a period (.) character, followed by the class name.

Important: After you save the changes, wait a moment for them to be applied. If nothing has changed, try raising the CSS property priority by adding the specificity level of a selector. See examples below.

Common custom CSS cases

You can use the examples below to configure your widget appearance:

1. To change the widget header appearance, apply these rules:

div.bolideai-recommendation .bolideai-recommendation-title {
font-family: Times New Roman !important;
font-size: 40px !important;
color: #48634B !important;
}

2. To change the widget product title appearance, apply these rules:

.bolideai-recommendations-big-pictures-new-layout div.bolideai-recommendation-results span.bolideai-overhidden .bolideai-title {
font-family: Times New Roman !important;
font-size: 20px !important;
color: #48634B !important;
}

3. To change the widget product price appearance, apply these rules:

.bolideai-recommendations-big-pictures-new-layout div.bolideai-recommendation-results .bolideai-price-list .bolideai-price {
color: #48634B;
font-size: 20px;
font-family: Times New Roman !important;
}

4. To change the widget slider container appearance, apply these rules:

a. Replacing carousel template with grid:

div.bolideai-recommendation-results .swiper-wrapper {
height: auto !important;
display: grid !important;
grid-template-columns: auto auto auto auto !important;
}

b. Hiding pagination and arrows:

div.swiper-button-next, div.swiper-button-prev, div.swiper-pagination {
display: none !important;
}

5. To change the widget product thumbnail size, apply these rules:

div.bolideai-recommendation-results .bolideai-thumbnail-wrapper span.bolideai-thumbnail {
height: 200px !important;
}

6. To change the button on the product appearance, apply these rules:

a. Configuring button position on the product thumbnail:

.bolideai-recommendations-big-pictures-new-layout div.bolideai-recommendation-results div.bolideai-product div.bolideai-item span.bolideai-overhidden button.bolideai-button {
position: absolute;
top: -120px;
box-sizing: border-box !important;
width: 100%;
height: 45px;
}

b. Customizing the button appearance:

.bolideai-recommendations-big-pictures-new-layout div.bolideai-recommendation-results div.bolideai-product div.bolideai-item span.bolideai-overhidden button.bolideai-button {
background: #EBDC99 !important;
color: #698747;
opacity: 85%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

c. Hiding the button display on mobile:

@media screen and (max-width: 768px) {
.bolideai-recommendations-big-pictures-new-layout div.bolideai-recommendation-results div.bolideai-product button.bolideai-button {
display: none !important;
visibility: hidden !important;
}
}

Tip: The !important rule in CSS is used to add higher priority to a property/value than normal. Using the !important rule will override all previous styling rules for that specific property on that element.

Note: If you need assistance customizing your CSS rules, reach out to support@bolide.ai. We will help you with the configuration.