Product recommendations

Overview #

The Product Recommendations section is designed to display a curated set of recommended products. This feature leverages a recommendation API to suggest products based on order history and product information, enhancing the shopping experience by providing personalized suggestions that improve over time.

Key components and functionality #

Number of items

This setting controls how many recommended products are displayed in the section. You can choose a number between 0 and 50, with the default set to 0.

Layout settings

These settings determine how the recommended products are displayed on different devices.

• Desktop column count: Choose between 1 and 8 columns for desktop view, with a default of 4.
• Mobile column count: Choose between 1 and 4 columns for mobile view, with a default of 2.
• Desktop layout: Select between a grid or slider layout for desktop.
• Mobile layout: Select between a grid or slider layout for mobile.

Slideshow settings

These settings apply when the slider layout is selected.

• Animation style: Choose between default and fade styles. The default is default.
• Animation speed: Set the speed of the animation from 0.1 to 5 seconds, with a default of 0.8s.
• Autoplay delay: Set the delay for autoplay from 0 to 10 seconds, with a default of 4s.
• Autoplay slideshow: Enable or disable autoplay. The default is disabled.
• Controls position: Choose whether the controls are positioned above or below the content, with the default being above.
• Pagination style: Choose from dynamic, fraction, progress bar, or scrollbar styles.
• Loop slides: Enable or disable looping of slides. The default is disabled.
• Show navigation: Enable or disable navigation controls. The default is enabled.
• Show pagination: Enable or disable pagination controls.
• Show preview of next slides: Enable or disable the preview of upcoming slides. The default is enabled.

Usage notes #

• Responsive design: Ensure that the column count and layout settings are optimized for both desktop and mobile views to provide a seamless user experience.
• Performance: Consider the number of items and autoplay settings to balance visual appeal with page load times.
• Accessibility: Ensure that navigation and pagination controls are clearly visible and easy to use for all users.

Usage examples #

1. Displaying a small number of recommendations: Set the number of items to a lower value, such as 5, to keep the section concise and focused.

2. Using a grid layout for desktop and slider for mobile: Configure the desktop layout to grid and the mobile layout to slider to optimize the viewing experience across devices.

3. Enabling autoplay with a fade animation: Set the animation style to fade and enable autoplay to create a dynamic and engaging display of recommended products.