Customizing appearance of Upsell & Cross-Sell product blocks

Contents

You can change Recommendation Widgets’ appearance by applying custom CSS rules in the Searchanise Upsell & Marketing admin.

Steps:

1. From your Shopify admin, go to the Searchanise Upsell & Marketing admin.
2. Open the Upsell & Cross-Sell app.
3. Switch to the Content & Style tab.
4. 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

Important info

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;
}

Note

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

Updated on October 23, 2023

Was this article helpful?

Yes No

About The Author

Daria Grigoreva

Technical Writer at Searchanise

Common custom CSS cases

Was this article helpful?

About The Author

Daria Grigoreva

Related Articles