Collection list
Add a section to display multiple collections, with links to their Collection pages.
Collection list
This section contains the "Header" and "Collection" blocks. Tip: Press "Add block" to use the "Collection" block. Each block can be added individually and customized in different ways.
Content
Collections per row Decide whether to display 2, 4, or 6 collections in each row on large screens.
Image ratio Choose the appropriate aspect ratio for collections. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios here.
Alignment Display the title and description either on the "Left" or "Center".
Show product count The enabled option shows the number of products available in each collection. Deactivate the option to hide the number.
Layout options
Check the layout option examples here.
The layout settings change the look and feel of the section.
Layout Change the "Header" content group position using the picker:
"Split". Puts the "Header" group in the content grid while keeping it on the right.
"Stacked". Displays title elements above the media content and aligns them to the left.
"Centered". Shows the centered title elements above the media content.
Mobile alignment Align the elements from the "Header" content group using one of the options:
"Auto". Uses the setting applied in the "Layout".
"Left". Displays content on the left. Note! The call-to-action button displays in full width on mobile by default.
"Center". Centers content. Note! The call-to-action button displays in full width on mobile by default.
Use swipe on mobile Enable this option to add a scrollbar on mobile devices instead of displaying content in a grid.
Dividing line Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.
Top spacing / Bottom spacing Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Transparent header
Allows the header to overlay the section when a transparent header is used.
Use inverted header colors Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "Background" item under Theme settings -> Colors -> Primary colors. If the option is disabled, the color of the Header elements is related to the "Base" item.
Collection
This block can be used several times to configure each collection individually.
Collection Choose the required collection by pressing the "Select" button.
Image To replace the collection's image with the desired one, use the image library or upload media from your device.
Description Introduce the collection by typing text in the field. Leave the field empty to remove the description.
Last updated