Collection list settings

This guide describes the Collection list section.

The Collection List section helps you efficiently organize and showcase collections in a flexible, visually engaging layout. Designed with enterprise needs in mind, it supports multiple layouts, including grid view on desktop, column view on mobile, and carousel/slideshow formats on both.

Key Features:

🧩 Content Settings

Customize the section heading.
Add an optional “View All” button linking to the main collection page.

🖼️ Layout Customization

Choose the number of columns for grid layout.
Enable swipe mode as an alternative to the standard grid layout.
Configure autoplay settings for carousels.

🌟 Featured Item

Add an image or video as the main visual element to enhance the section’s appeal.

📦 Collection Cards

Adjust the image ratio for all collection cards.
Optionally display collection descriptions.
Select the appropriate collection for each block.

Demo Example: A carousel-style collection list section displayed on the homepage, showcasing multiple collection cards, each with an image, title, and optional description. A featured video is displayed on the left side of the section, drawing attention and enhancing visual engagement.

Collection list demo example

How to access the Collection list section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Collection List”

Note: Section cannot be added to the Password page.

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Collection list section

Basic Components

The “Collection list” section consists of two primary components:

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Available block types include:

Featured item. To learn about all available block settings, see the related article "Featured item"
Collection. To learn about all available block settings, see the related article "Collection"

To insert a new block between existing ones or to add a block when none have been added yet, refer to the article "Sections and blocks" and locate the section titled “How to add a block”.

General settings

Select a setting described in the following table:

Setting	Description
Color scheme	Select a color scheme from the list and customize it with appropriate colors for text, headings, buttons, and background. Applying a color scheme to the entire collection list section (excluding the collection columns) automatically updates all related colors based on the settings defined in the theme's color schemes.
Heading	To add a heading to the section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the section.
Heading size	The heading size setting offers three options to control the size of the section heading: • Small • Medium • Large
Number of columns on desktop	The "Number of columns on desktop" setting allows you to select the number of columns in which your content will be displayed on larger screens, and on tablets. You can select from 2 to 5.
Enable swipe	Allows users to swipe through collection cards using touch gestures (finger) or by clicking slider navigation buttons.
Autoplay	Automatically scrolls through the collection carousel without user interaction. Enhances visibility of all items over time.
Change every	Sets the interval duration (in seconds) for how often the carousel should automatically move to the next slide when autoplay is enabled. Example: Change every 5 seconds.
Scroll speed	Controls how fast the slide transition animation occurs during autoplay or manual scroll.
Enable "View all" button if list includes more collections than shown	The "View More" button redirects to a page displaying all collections. This button is visible only when a main heading is added to the section.
View all position	Chooses where the "View all" button appears: Top (next to the heading) or Bottom (centered below the collection grid).
Button style	When you enable the View all button, the Button style setting becomes available. Choose the button's appearance: • Primary: Uses the primary button color defined in color scheme. • Secondary: Uses the secondary button color defined in each color scheme. • Outline: A button with a border and no fill. • Link: A minimal button style aligned with the text. • Link with dot (new): A minimal text-only link with a small dot marker next to it.
Mobile button style	A separate button style used only on mobile, and only shown when View all position is set to Top.

Card settings

Setting	Description
Card style	The Card style setting controls the overall visual layout of each collection card — how the image, title, and other card elements are combined and positioned. You can choose from the following options: • Default – Shows the collection image with the title (and optional description/count) displayed below or on top of it, in the theme's standard card layout. • CTA button – Overlays a solid, button-style label with the collection name directly on the image, turning the whole card into a call-to-action tile. When this style is selected, Show description, Hide arrow button, and Show count are hidden since they don't apply to this layout.
Image style	The Image style setting controls how the collection image fills its space within the card. You can choose from the following options: • Top – Displays the image at its set aspect ratio at the top portion of the card. • Cover – Stretches and crops the image to completely fill the card area, edge to edge.
Image ratio	The Image ratio setting allows you to control how collection images are displayed based on their width-to-height proportion. This helps ensure a consistent and visually appealing layout across devices. You can choose from the following options: • Adapt to image – Maintains the original aspect ratio of the image. • Portrait – Displays the image in a vertical (taller) format. • Square – Crops or scales the image into a 1:1 square shape. • Landscape – Displays the image in a horizontal (wider) format.
Show description	Swipe the button to the right to show collection description added on collection page (Shopify admin).
Hide arrow button	Swipe the button to the right to hide the small arrow icon shown on the collection card.
Show count	Swipe the button to the right to show the number of products included in the collection, displayed on the card.

Note: Show description, Hide arrow button, and Show count are only available when Card style is set to Default (they're hidden in the customizer when CTA button is selected).

Section paddings

Setting	Description
Top padding	The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.
Top padding mobile	The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile	The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.