Featured collection

Overview #

The Featured Collection section is designed to showcase a selection of products from a specific collection in either a grid or slideshow format. This section is ideal for highlighting featured products and can be customized to fit various display preferences.

Key components and functionality #

Collection

This setting allows you to select the collection from which products will be displayed. It is essential for defining the source of the products shown in this section.

Number of items

This setting determines how many products from the selected collection will be displayed. You can choose any number between 0 and 50, with 0 displaying all available items.

Layout settings

These settings control the visual arrangement of products on different devices, ensuring a responsive design.

• Desktop column count: Choose between 1 and 8 columns for desktop displays, with a default of 4.
• Mobile column count: Choose between 1 and 4 columns for mobile displays, 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 enhance the slideshow experience for users, providing options for animation and control positioning.

• Animation style: Choose between default and fade animations.
• 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 between slides from 0 to 10 seconds, with a default of 4s.
• Autoplay slideshow: Enable or disable autoplay, with the default set to false.
• Controls position vertical: Choose whether controls appear above or below the content, with a default of above.
• Pagination style: Options include dynamic, fraction, progress bar, and scrollbar.
• Loop slides: Enable or disable looping of slides, with the default set to false.
• Show navigation: Enable or disable navigation controls, with the default set to true.
• Show pagination: Enable or disable pagination indicators.
• Show preview of next slides: Enable or disable the preview of upcoming slides, with the default set to true.

Usage notes #

• Responsive design: Ensure that the column count and layout settings are optimized for both desktop and mobile to provide a seamless user experience.
• Performance: Consider the number of items and autoplay settings to maintain fast loading times and smooth transitions.
• Accessibility: Use clear navigation and pagination styles to enhance accessibility for all users.

Usage examples #

1. Highlighting a seasonal collection: Use the Featured Collection section to display a seasonal collection, such as summer wear, in a grid format on desktop and a slider on mobile. Set the number of items to 10 to keep the display concise.

2. Promoting a new product line: Select a new product line collection and use the slideshow layout with fade animation to create a dynamic presentation. Enable autoplay with a 3-second delay to keep the viewer engaged.

3. Creating a curated product showcase: Choose a collection of best-selling products and display them in a grid layout with 4 columns on desktop and 2 on mobile. Use the pagination style to allow users to navigate through multiple pages of products.