Recommendations

Overview

Product recommendations are a critical component of any successful e-commerce storefront. They leverage user behavior, product data, and merchandising rules to proactively guide customers to relevant items, significantly boosting engagement, Average Order Value, and conversion rates.

To make these powerful features easily deployable, the Storefront Application provides all recommendation features in the form of Dynamic Product Carousels (sliders). These ready-to-use components handle everything from data fetching to display, ensuring a seamless experience.

Recommendation Types

The Storefront Application supports three primary types of recommendations out-of-the-box, each designed for a different goal:

• Similar Products: Displaying items related to the current product to encourage exploration.
• Recently Viewed Products: Enabling easy re-engagement with previously viewed items to reduce friction in the buying journey.
• Rule-Based Sliders: Merchandising products based on dynamic logic, such as "Trending Now" or "Bestsellers."

PDP Discovery Hierarchy

On the Product Detail Page (PDP), discovery is prioritized to ensure the most relevant products are seen first. By default, the Storefront evaluates and displays recommendation types in the following order: Similar > Trending > Recently Viewed.

Component Logic

The Storefront utilizes three distinct components, each dedicated to a specific recommendation type. To maintain a clean UI and prevent empty states, a component will only render if the underlying logic returns at least one product.

Filtering Products within the Slider

To refine the final product list displayed (e.g., removing sold-out items), you can apply custom filtering logic to the product array within the component's source code.

The example below demonstrates how to filter out sold-out products in SFSmartSortingProductsSlider.vue:

html

Copy

Flexible Placement & Testing

Recommendations are not limited to the PDP; they can be added to any page within your Storefront (e.g., Homepage, Category Pages, or Basket).

For the Recently Viewed Products and Rule-Based Sliders, we provide dedicated CMS Components. These components make it exceptionally easy to:

• Determine optimal placement by testing the slider's visibility across different areas of your site.
• Update content dynamically without code changes.