Featured products

Overview #

The Featured Products section is designed to showcase a selection of specific products in either a grid or slideshow format. This section allows users to highlight particular products, offering flexibility in presentation and layout to enhance the visual appeal and functionality of a storefront.

Key components and functionality #

Products

This setting allows you to select specific products to display within the section. It provides a straightforward way to curate a collection of featured items.

Layout settings

The layout settings control how products are displayed on different devices, ensuring a responsive design that adapts to both desktop and mobile views.

1. Desktop column count

   • Adjusts the number of product columns displayed on desktop devices.
   • Range: 1 to 8
   • Default: 4

2. Mobile column count

   • Adjusts the number of product columns displayed on mobile devices.
   • Range: 1 to 4
   • Default: 2

3. Desktop layout

   • Choose between a grid or slider layout for desktop.
   • Options: Grid, Slider

4. Mobile layout

   • Choose between a grid or slider layout for mobile.
   • Options: Grid, Slider

Slideshow settings

These settings enhance the slideshow experience, allowing for customization of animation styles and playback options.

1. Animation style

   • Select the transition style for slides.
   • Options: Default, Fade
   • Default: Default

2. Animation speed

   • Controls the speed of slide transitions.
   • Range: 0.1s to 5s
   • Default: 0.8s

3. Autoplay delay

   • Sets the delay between automatic slide transitions.
   • Range: 0 to 10 seconds
   • Default: 4s

4. Autoplay slideshow

   • Enables or disables automatic slide transitions.
   • Default: Disabled

5. Loop slides

   • Allows the slideshow to loop continuously.
   • Default: Disabled

6. Show navigation

   • Displays navigation controls for the slideshow.
   • Default: Enabled

7. Show pagination

   • Displays pagination indicators for the slideshow.

8. Show preview of next slides

   • Shows a preview of the next slides in the sequence.
   • Default: Enabled

Controls position

This setting determines the vertical position of slideshow controls.

• Options: Above content, Below content
• Default: Above content

Pagination style

Choose how pagination is displayed within the slideshow.

• Options: Dynamic, Fraction, Progress bar, Scrollbar

Usage examples #

1. Highlighting new arrivals: Use the Featured Products section to showcase the latest products in your store. Set the layout to a grid for a clean, organized look, or use a slider to create a dynamic presentation.

2. Seasonal promotions: During holiday seasons or special promotions, feature a curated selection of products to draw attention to limited-time offers. Utilize the autoplay and loop settings to ensure customers see all featured items.

3. Responsive design: Adjust the column count and layout settings to ensure your featured products look great on all devices, providing a seamless shopping experience for both desktop and mobile users.

By leveraging these settings, you can create a visually appealing and functional display of featured products that enhances the shopping experience and drives engagement.