Collections list
The "Collections list" page displays the list of collections available in your store.
Tip: To edit the page, choose the Collections list template in the top drop-down. Then, press the "Collections list page" section.
Collections list page
Heading
If you need to display a title for the page, edit the "Heading". Leave the field empty to hide a title.
The heading size can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
Use the "Ccolor" option to change the color of the page heading. Set a color using the hex code, or specify a color directly in the paint palette.
Description
In the "Description" input field, insert short paragraphs to inform visitors about brands, collections, goals, store presentations, and more.
If you need to style text by color, use the "Color" picker. Set a color using the hex code, or specify a color directly in the paint palette.
Here is how the described settings might display on the page:
Content
To decide the number of collections displayed in each row, use the "Collections in row" drop-down. The theme allows setting up 2, 4, or 6 items per row. These settings work for large screens. By default, the theme displays two items per row on mobile.
Here you can pre-set the sorting order on the Collections list page using the "Sort by" drop-down. Sort collections: "Alphabetically, A-Z", "Alphabetically, Z-A", "Date, new to old", "Date, old to new", "Product count, high to low", "Product count, low to high".
In the "Collections to show", you can decide on the visibility of collections on a page:
"All". Set the option to display all collections available in a store.
"Selected". Activate the following option to specify the number of the selected collections. If you decide to use the selected list of collections, add each collection by pressing the "Add Collection" button underneath the section. Below are details on editing the "Collection" block.
Collection card
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 "Image ratio" can be changed from "Adapt to image" to "Portrait", "Square", "Landscape", or "Circle".
Use the "Image type" drop-down to predetermine whether to display the image of the first product in the collection or apply the image specified as the main image of the collection in your Shopify admin -> Products -> Collections. Select "First product" or "Collection image" from the drop-down.
The "Show products count" option helps to display or hide the number of products available in each collection. Deactivate the option to hide the number.
If you need to showcase a description for each collection, enable the "Show description" option. This option requires adding a collection description in your Shopify admin -> Products -> Collections.
Here is how the option works on the page:
In the following examples, you can view how the Collections list page might look on desktop and mobile:
Section layout
Use the "Dividing line" drop-down to specify whether to add the line separator on the top or bottom of the "Collections list page" section. If you need to use the line, select its position as "Top", "Bottom", or "Both". To hide the dividing line, use the "None" option.
The "Top spacing" option controls the space between the breadcrumbs/Header (if the breadcrumbs are disabled) and the "Collections list page" section. Use the scale from 0 to 100 pixels to set the desired parameter.
Handle the parameters on the "Bottom spacing" scale from 0 to 100 pixels to add or remove the space at the bottom of the "Collections list page" section.
Tip: To add the block, press the "Add Collection" button. You can add numerous content blocks to display collections on the page.
Collection
In the following block, you can decide what collection should be displayed on the page. Hit the "Select collection" button and connect a collection with the block.
Here is how the block might be displayed in the section:
Last updated