Collection list
The "Collections list" section can be used to display multiple collections with the links to Collection pages for each.
Collection list
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Heading
Use the "Heading" field to title the section. Start typing text in the field to view the additional settings:
The title size can be changed in the "Size" drop-down to "Small", "Medium", or "Large".
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
The number of collections per row can be set in the "Collections in row" picker. Decide whether to display 2, 4, or 6 items in each row.
Choose the appropriate collection image aspect ratio in the "Image ratio" drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Check each image ratio here.
The text alignment on all screen sizes can be defined in the "Alignment" picker. Display the title and description either on the "Left" or "Center".
The "Show product count" option shows or hides the number of products available in each collection. Deactivate the option to hide the number.
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 are displayed in the section. The following settings will be expanded after activating the option:
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three styles that can fit your store design: "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, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section 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 "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
To add a divider between sections, use the "Dividing line" to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden when you select the "None" option.
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.
Check the following examples of how the section might be displayed on desktop and mobile:
Collection
Tip: This block can be used several times to configure each collection individually.
Choose the required collection by pressing the "Select" button.
Image
If you need to add or change the collection's image, use the image library or upload media from your device.
Edit the "Description" field to introduce a collection. Leave the field empty to deactivate the description.
Here is how the block might be displayed in the section:
Last updated