Collections list
The "Collections list" page displays the list of collections available in your store.
Last updated
The "Collections list" page displays the list of collections available in your store.
Last updated
Tip: To edit the page, choose the Collections list template in the top drop-down. Then, press the "Collections list page" section.
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 "Title font size" drop-down.
Use the "Title color" option to change the color of the page heading. Set a color using the hex code, or specify the color directly in the paint pallet.
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 "Description color" picker. Set a color using the hex code, or specify the color directly in the paint pallet.
Here is how the described settings might display on the page:
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.
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 products count" option helps to show or hide the number of products available in each collection. Deactivate the option to hide the number.
In the "Select 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.
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 in a row on mobile.
Here you can pre-set the sorting order on the Collections list page. To Sort collections by: "Alphabetically, A-Z", "Alphabetically, Z-A", "Date, new to old", "Date, old to new", "Product count, high to low", "Product count, low to high".
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.
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:
Tip: To add the block, press the "Add Collection" button. You can add numerous content blocks to display collections on the page.
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:
"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. For how to edit the "" block, check the details below.
