Collection list

The "Collections list" section can be operated to display numerous collections with links to Collection pages for each.

Collection list

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

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.

Use the "Mobile align" settings to change the alignment of the heading and description to the "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.

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 "View All" button on desktop and mobile if the blog contains more articles than is displayed in the section.

Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.

Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style 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 be displayed 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 be displayed in the section: