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.

Flexible Placement & Testing

Recommendations can be added to any page within your storefront (e.g., Homepage, Category Pages, PDPs, 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.

Recommendation Types

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

1. Personalized Recommendations: Displaying associated or complementary products (e.g., "Complete the Look").
2. Recently Viewed Products: Enabling easy re-engagement with previously viewed items.
3. Rule-Based Sliders: Merchandising products based on dynamic logic (e.g., "Trending Now" or "Bestsellers").

Dynamic Product Carousels (sliders) are essential tools for maximizing product discovery and engagement across your storefront. These components automatically populate with items based on user behavior (like recently viewed products), merchandising rules (like bestsellers), or algorithmic recommendations. They ensure that users are always guided toward relevant products, driving continued exploration and increasing conversion opportunities.

Personalized Recommendations

The recommendation slider displays associated products—such as similar items, complementary products, or those from the same brand—directly on the PDP.

• Component: <ProductRecommendations />
• Activation: Displays only if at least one product ID is specified.
• Data Fetching: The component automatically fetches the necessary product data for display based on the provided IDs.

html

Copy

For configuration details on how to populate recommendedProductIds, please refer to our Configuration Guide.

Recently Viewed Products

The "Recently Viewed Products" slider provides a convenient, personalized list of items a user has recently browsed. This feature encourages re-engagement by helping customers easily revisit products they've shown interest in.

Key Features:

• Client-Side Storage: Stores recently viewed product IDs directly in the user's browser.
• Shop-Specific Persistence: The list is unique to each shop and remembers items even if the user leaves and returns to that specific shop.
• Limited Display: Shows up to 10 unique recently viewed products.
• Smart Prioritization: If a product is viewed again, it moves to the top of the list. If the list is full, the oldest item is replaced.
• Integrated Display: Utilizes the recommendation slider component for a familiar UI on the PDP, appearing below other recommendations.

The "Recently Viewed Products" slider is implemented using the useRecentlyViewedProducts composable. This composable is responsible for saving up to 10 product IDs to local storage and loading the associated product data.

Whenever a product is viewed, it can be added to the list via the addProductId() function. The full product data for the stored IDs can then be loaded using loadMissingProducts().

typescript

Copy

To display the last seen products, simply place the <SFRecentlyViewedProductsSlider /> component anywhere in your layout. Once loadMissingProducts() finishes, the component will automatically display all loaded products.

Rule-Based Sliders

The <SFSmartSortingProductsSlider /> component dynamically recommends products by leveraging SCAYLE Smart Sorting Keys. This is ideal for powerful merchandising use cases.

• Core Requirement: Requires the mandatory smart-sorting-key attribute to specify the algorithm for fetching products (e.g., new arrivals, top seller, recently popular).
• Refinement: Optional attributes like title, brand-id, category-id, and limit allow you to customize the product set and slider appearance.

Example: Bestsellers

The following code renders a slider with the top 15 selling products from the brand ID 550 in category ID 12.

html

Copy