Collection list

The "Collections list" section can be used to display numerous collections.

Tip: To hide the title, description, or button, leave the corresponding fields blank.

Collection list

Paste the section's title to the "Heading" field. The "Heading font size" can be changed to "Small", "Medium" or "Large" sizes. If you need to colorize the title, use the "Heading color" picker.

To represent the section, insert any text lines to the "Description" placeholder. If you need to change a paragraph color, use the "Description color" picker.

Layout

The layout settings change the look and feel of the section.

Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.

If you need to show a "Dividing line", choose "Top" or "Bottom" positions. It will be hidden once you use the option "None".

On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

Content

The number of collections per row can be set in the "Collections in row" drop-down. Decide if to display 2, 4, or 6 items in each row.

Choose the appropriate aspect ratio of the collection images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape" or ''Circle". Each image ratio, you can check here.

Enable swipe on mobile

Check the box to add scrollbars instead of displaying the list of collections on mobile view.

Button "View All"

Activate the "Enable "View all" checkbox to show the button on desktop and mobile if the section contains more collections than is displayed in the section.

Use the "Style" drop-down to change the button's appearance in the sections. The theme includes six styles that can work out in your store: "Primary", "Secondary", "Third", "Fourth", "Fifth" or "Link style". View each button style on the following help page.

Use the "Button color" picker to change the button background color for the "Primary", "Third" and "Fifth" styles. For the styles "Secondary" and "Fourth" the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

Check the following examples of how the section might display on desktop and mobile:

Desktop

Mobile

Collection

Tip: This block can be used several times to configure each collection individually.

Choose the required collection by pressing the "Select collection" button.

Edit the "Description" field to introduce a collection. Leave the field empty to deactivate the description.

If you need to add or change the collection's Image, use the image library or upload an image from your computer.

Here is how the block might display in the section: