Product Recommendations

The Product Recommendations section under the Products chapter is designed to display a curated list of products that are suggested to a customer based on various factors.

This section helps increase cross-sells and upsells, encouraging customers to explore additional items and potentially increase the average order value.

In short, the Product Recommendations section combines product display, visual customization, and interactive functionality to effectively suggest relevant products to shoppers.

Location: Sections -> Templates -> Products: Product Recommendations

---

Product Recommendations – Options Overview

Option / Group	Description
Product	Select the main product source for generating related recommendations.
Heading
Subheading	Add a small text line appearing above or below the main heading.
Heading	Set the main section title.
Product Recommendations	Change the heading text that labels the recommended products.
Description	Add an optional descriptive text under the heading.
Heading alignment: Left / Center	Align the text block horizontally.
Layout
Top spacing: None / Small / Medium / Normal	Adjust vertical spacing above the section.
Width: Default / Boxed / Wide	Controls content width. Wide applies on screens 1440px and above.
Number of columns: 2–8	Sets how many products to display per row on desktop.
Number of columns on tablet: 2–4	Sets how many products per row on tablet screens.
Mobile grid: One item per row / Two items per row	Choose product arrangement for mobile devices.
Type: Related / Complementary	Select recommendation mode. Complementary requires setup in Search & Discovery app.
Slider settings	Controls whether the recommendations section is displayed as a slider.
Enable slider	Turns carousel mode on/off.
Desktop navigation: Disable / Dots / Arrows / Dots and arrows	Choose how users navigate the slider on desktop.
Mobile navigation: Disable / Dots	Choose slider navigation for mobile.
Enable autoplay	Automatically moves slides without user input.
Products
Image hover effect	Choose how images animate on hover.
Image ratio	Defines image shape (square, portrait, round, widescreen, etc.).
Products	Select which collection or product set to display.
Image action: Only image / Show second image on hover / Gallery	Controls what happens when hovering over product images.
Show second image on hover	Displays the next product image when hovered.
Customize	Open additional styling controls.
Dividing line
Show	Show or hide a separator line above or below the section.
Background
Background: Hide / Color / Gradient / Image	Choose the section background style.
Colors	Adjusts core colors in product card content.
Base	Main text color.
Accent	Highlighted elements color.
Lines	Divider and border colors.
Product card color	Controls text and pricing colors on product cards.
Vendor, type	Color of vendor or product type labels.
Vendor, type hover	Hover color for vendor/type labels.
Product name	Product title color.
Product name hover	Product title hover color.
Regular Price	Color of the non-discounted price.
Sale Price	Color of the discounted price.
Old price	Color of the crossed-out original price.
Description	Product card description text color.
Badges	Controls sale, featured, sold-out, and countdown badge styling.
Sale badge / text	Colors for sale badge background and text.
Featured badge / text	Colors for featured badge background and text.
Sold out badge / text	Colors for sold-out badge background and text.
Countdown background / text	Colors used for countdown timer elements.
Interface buttons	Buttons displayed over product images (wishlist, compare, quick view, slider buttons).
Interface button background / icon	Default button background and icon color.
Interface button background hover / icon hover	Hover state colors for these buttons.
External interface button background / icon	Same settings for external positioned buttons.
External interface button background hover / icon hover	Hover state for external positioned buttons.
Variants buttons	Styles available product variant selectors.
Background / Border / Text	Default appearance of variant buttons.
Background hover / Border hover / Text hover	Styling when hovering.
Background sold out / Border sold out / Text sold out	Styling for unavailable variants.
Input	Controls input fields (like quantity selector).
Background / Border / Text / Icon	Default appearance.
Background hover / Border hover / Outline hover / Text hover / Icon hover	Hover interaction styling.
Add to cart button	Adjusts the primary “Add to Cart” button on product recommendations.
Show background	Enables filled button styling.
Background / Gradient / Border / Text / Icon	Default button appearance.
Background hover / Gradient hover / Border hover / Text hover / Icon hover	Hover styles.
Enable shadow / Shadow / Shadow hover	Controls and styles the button shadow effect.
Media button	Navigation buttons inside sliders.
Slider arrows	Color/style of the arrows.
Slider dots	Style of the pagination dots.
Review stars	Controls product rating display.
Stars active	Color of filled stars.
Stars base	Color of empty stars.