Collection list template

Banner settings

Setting	Description
Heading	Add a main heading to your collection list page.
Heading size	The heading size setting offers three options to control the size of your site's headings: Small Medium Large
Heading weight	Choose the appropriate font weight for headings to ensure they stand out and align with your design.
Heading color	The “Heading color” setting offers four options to customize the color scheme of your section heading: Text main color Text secondary color Heading color Heading secondary color
Banner background image	Add an image as the background for your banner to enhance its visual appeal and match your overall design.
Banner background mobile	Choose a different background image for mobile devices to ensure the banner looks good and maintains visual consistency across different screen sizes.
Banner left overlay	Apply an overlay over the banner image on the left to enhance its visual appeal.
Banner right overlay	Add a second overlay to the banner image on the right, allowing for creative combinations of overlay.
Make section full width	Mark the checkbox, and the section will take up the full width of the page.
Shape position	Choose the position of shape: Top: The shape is displayed only at the top of the section. Bottom: The shape is displayed only at the bottom of the section. Both: The shape is shown at both the top and bottom of the section.
Type	Select the shape type that enhances the visual appeal of your banner the most.
Color	You can select the color of the shape to complement the color of the banner.
Width	Adjust the shape width using the slider. But notice that it has an impact on section width.
Background color	There are six options for banner view: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient	Use the gradient picker to create a custom gradient for your banner background.
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.

Collection list settings

You have the opportunity to add the custom collection list or set the view of default collections automatically added on your page. To add custom collections (only collections you want to be shown, not all) click on ‘Add custom collection’.

Sort Collections by:

This option is functional for all collections that have been created within the "Collections" block on the admin panel (Default collections). If on your page is one or a few custom collections, it won’t change anything.

The same is with Pagination:

This option is functional for all collections that have been created within the "Collections" block on the admin panel (Default collections). If on your page is one or a few custom collections, the pagination won't be displayed on the page. To activate pagination and access the second page, you need to have more than six collections created in Collection block on the admin panel.

First example of pagination: two screenshots when Enabled slider.

Second example of pagination when Disabled slider.

Collection list settings

Setting	Description
Sort collection by:	Select from the list to determine how you want to arrange your collections. Collections can be sorted alphabetically based on their names, chronologically by their addition date, or by the quantity of products they contain.
Image ratio:	The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to adjust collection image appearance near its products: Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions. Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height. Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. It is ideal for images that have a wider or landscape orientation.
Add image shape	Enable this option to apply a bubble shape to your collection image, surrounded by a borderline.
Heading size	The heading size setting offers three options to control the size of your collection's heading: Small Medium Large
Heading color	The “Heading color” setting offers four options to customize the color scheme of your collection’s heading: Text main color Text secondary color Heading color Heading secondary color
Heading weight	Choose the appropriate font weight for headings to ensure they stand out and align with your design.
Number of columns on desktop	The setting allows you to choose the number of columns in which your collections will be displayed on larger screens, and on tablets. You can select from 1 to 4.
Enable slider for desktop	Check the checkbox to display your collections as slides, allowing users to navigate through them using the mouse scroll wheel. If the checkbox is unchecked, collections will be displayed staggered one after the other. After making changes, click “Save” at the top of your theme to ensure the script functions properly.
Shape position	Choose the position of shape: Top: The shape is displayed only at the top of the section. Bottom: The shape is displayed only at the bottom of the section. Both: The shape is shown at both the top and bottom of the section.
Type	Select the shape type that enhances the visual appeal of your banner the most.
Color	You can select the color of the shape to complement the color of the banner.
Width	Adjust the shape width using the slider. But notice that it has an impact on section width.

Product card settings

Setting

Description

Image ratio

You have several options to adjust product card image appearance:

Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions.
Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height.
Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height.
Landscape: This option crops the images to a 3:2 ratio, where the width of the image is 1.5 times the height. It is ideal for images that have a wider or landscape orientation.

Show second image on hover

You can see the second image on hover if on the detail page of this product are 2 or more images in the list.

Mobile layout

Setting	Description
Number of columns on mobile	The setting allows you to choose the number of columns in which your collections will be displayed on mobile. You can select from the list: 1 column or 2 columns.

Pagination

These settings apply to inactive pages. For instance, if you're on page 1, pages 2, 3, 4, etc. will adhere to these color settings.

Setting

Description

Pagination color

The “Pagination color” setting offers four options to customize the color scheme of the pagination number:

Text main color
Text secondary color
Headings color
Headings secondary color

Pagination background

There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.

For the active page, such as when you're on page 1 and wish to modify the text color and background, navigate to the theme color settings/ Button primary.

Section settings

In addition to the banner, you have the option to incorporate background and paddings into the collection list section as well.

Setting	Description
Background color	There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient	Use the gradient picker to create a custom gradient for your section background.
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.