Collection list

Overview #

The Collection List section is designed to display a grid or slideshow of collections. This section is versatile, allowing you to showcase multiple collections in a visually appealing manner. It is particularly useful for highlighting featured collections or organizing products into categories for easy navigation.

Key components and functionality #

Collections

This setting allows you to select which collections to display in the section. You can choose from your existing collections to feature them prominently on your page.

Layout settings

The layout settings control how collections are displayed on different devices. These settings ensure that your collections are presented optimally across various screen sizes.

• Desktop column count: Adjusts the number of columns displayed on desktop devices. The range is from 1 to 8, with a default of 4.
• Mobile column count: Adjusts the number of columns displayed on mobile devices. The range is from 1 to 4, with a default of 2.
• Desktop layout: Choose between a grid or slider layout for desktop. Options include "grid" and "slider".
• Mobile layout: Choose between a grid or slider layout for mobile. Options include "grid" and "slider".

Slideshow settings

These settings enhance the slideshow functionality for collections, allowing for dynamic and engaging presentations.

• Animation style: Choose the style of animation for the slideshow. Options include "default" and "fade", with "default" as the default setting.
• Animation speed: Set the speed of the animation in seconds, ranging from 0.1 to 5, with a default of 0.8 seconds.
• Autoplay delay: Set the delay between slides in autoplay mode, ranging from 0 to 10 seconds, with a default of 4 seconds.
• Autoplay slideshow: Enable or disable autoplay for the slideshow. The default is false.
• Controls position: Choose the vertical position of the slideshow controls. Options include "above" and "below", with "above" as the default.
• Pagination style: Select the style of pagination for the slideshow. Options include "dynamic", "fraction", "progressbar", and "scrollbar".
• Loop slides: Enable or disable looping of slides. The default is false.
• Show navigation: Display navigation controls for the slideshow. The default is true.
• Show pagination: Display pagination indicators for the slideshow.
• Show preview of next slides: Show a preview of the next slides in the slideshow. The default is true.

Usage notes #

• Responsive design: Ensure that the column count and layout settings are optimized for both desktop and mobile devices to provide a seamless user experience.
• Performance: Consider the number of collections and images used in the slideshow to maintain fast loading times.
• Accessibility: Ensure that navigation and pagination controls are easily accessible and visible to all users, including those using assistive technologies.

Usage examples #

1. Highlighting seasonal collections: Use the Collection List section to showcase seasonal collections, such as summer or winter collections, in a grid layout on desktop and a slider on mobile for a dynamic browsing experience.

2. Organizing product categories: Display different product categories as collections in a grid format, allowing customers to easily navigate through various product types.

3. Featuring new arrivals: Use the slideshow feature to highlight new arrivals, with autoplay enabled to automatically cycle through the latest collections.