Product recommendations

Increase conversions and shopper engagement with tailored product recommendations presented in elegant, animated layouts optimized for every device.

Last updated 4 months ago

Overview

The Product recommendations section helps increase engagement and boost average order value by displaying related products that best match a shopper’s current context. This section adapts seamlessly across desktop, tablet, and mobile, ensuring a consistent and intuitive experience for all visitors.

⚠️ Important: Featuring recommended products encourages exploration, helps shoppers discover new items, and directly supports higher sales opportunities.

Key components and functionality

Introduction

The Product recommendations section automatically displays relevant items tailored to each customer’s interests. With flexible layout and animation controls, you can adjust its design and behavior to align with your brand while maintaining a smooth, conversion-focused shopping journey.

Number of items

Control how many recommended products appear in the section.

  1. Range: 0 to 50

  2. Default: 0

Setting the value to 0 hides the section entirely, allowing you to easily enable or disable recommendations. Choosing a moderate number maintains a clean, user-friendly design.

Layout settings

Layout settings define how recommended products are displayed across devices. Adjusting these ensures a visually cohesive experience from desktop to mobile.

  1. Desktop column count

    1. Range: 1 to 12

    2. Default: 4

  2. Tablet column count

    1. Range: 0 to 8

    2. Default: 0

    3. When set to 0, the desktop column count applies to tablet.

  3. Mobile column count

    1. Range: 1 to 4

    2. Default: 2

  4. Desktop layout

    1. Options: Grid, Slider

  5. Tablet layout

    1. Options: Grid, Slider

  6. Mobile layout

    1. Options: Grid, Slider

Selecting the right layout and column combination helps create an appealing, balanced display for every device.


Slideshow settings

These settings apply when using a slider layout. They enhance interactivity and the visual flow of product recommendations.

  1. Animation style

    1. Options: Default (slide), Fade

    2. Default: Default

  2. Animation speed

    1. Range: 0.1 to 5.0 seconds (steps of 0.1)

    2. Default: 0.8 seconds

  3. Autoplay delay

    1. Range: 0 to 10 seconds (steps of 1)

    2. Default: 4 seconds

  4. Autoplay slideshow

    1. Default: Disabled

  5. Loop slides

    1. Default: Disabled

  6. Pagination style

    1. Options: Dynamic, Fraction, Progress bar, Scrollbar

  7. Show navigation

    1. Default: Enabled

  8. Show pagination

    1. Adds pagination dots, bars, or numbers to indicate the current slide position.

Fine-tuning these settings creates a smooth, engaging browsing experience for your shoppers.

Supported block types

The Product recommendations section doesn’t include individual blocks. All customization is managed directly through the section’s settings, keeping configuration simple and efficient.

Usage notes

💡 Tip: Always preview the Product recommendations section on multiple devices to confirm that your chosen layouts, columns, text, and navigation are clear and inviting.

  1. Preview on multiple devices to confirm layout, spacing, and text clarity.

  2. Choose a balanced number of items to avoid visual clutter.

  3. Match column counts and layouts per device for best readability.

  4. In slider mode, enable both navigation and pagination for easy browsing.

  5. Keep animations smooth and subtle to enhance focus on the products.

  6. Ensure color contrast, text, and navigation controls remain accessible.

⚠️ Important: Taking time to fine-tune your Product recommendations section ensures it drives engagement, increases conversions, and fits seamlessly into your storefront design.