Collection list page settings

Setting	Description
Show breadcrumbs	By enabling this option, breadcrumbs will be displayed on the collection list page template, providing navigation links to help visitors back to main page – homepage.
Heading	Enter the desired heading for the collection list page template.
Sort collections by:	Choose the sorting option for displaying collections on the collection list page template. This can include options like alphabetical order, price, or date. *These settings are designed specifically for default collections added to the Collection section on the Dashboard, allowing you to sort them according to your preferences. However, when utilizing a custom collection block, use other settings for changing their appearance.
Collections per page	Set the number of collections to be displayed per page on the collection list page template. *These settings are designed specifically for all default collections added to the Collection section on the Dashboard. However, when utilizing a custom collection block, use other settings for changing their appearance.
Select a way to expand the list of products	Button Show More: This option displays a button labeled "Show More" that users can click to load additional products, expanding the list dynamically without requiring a page reload. Pagination: This option divides the list of products into separate pages, with each page containing a set number of products. If the number of items in a collection exceeds a certain threshold, you can choose to implement either a "Button" or "Pagination" feature to allow users to navigate through the collection. *These settings are designed specifically for all default collections added to the Collection section on the Dashboard.
Button label	This option allows you to add a label to the button on the page - “Show more” or “Load more”
Button color style	This feature allows you to customize the color style of a button show more. You have two options to choose from: Primary Secondary
Button style	You can choose style for button show more from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.
Image ratio	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. Portrait: This option crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation. Square: This option crops the images to a 1:1 ratio, where the width and height of the image are equal. It creates a square-shaped display for your images. Height 11 to width 10: When the height is set to 11 and the width is set to 10, it means that the image will have a slightly taller appearance compared to a perfect square. The height will be slightly greater than the width, maintaining the ratio of 11:10. Height 75%: When set to “height 75%”, the images will have a height that is 75% of their original size, while the width will be adjusted proportionally to maintain the image's aspect ratio. This setting can be useful if you want to display slightly smaller images with a reduced height to fit within the designated space on the collection list page.
Enable full width section	Section becomes on full width if the checkbox is marked.
Grid sheme	Choose the desired grid scheme for displaying collections: 1 column 2 columns 3 columns 4 columns
One column style	Default style: On the page visible: collection image, collection name, and button to collection detail page. With products: On the page visible: collection name, collection products, and button to collection detailed page.
Collection card on hover	There are four options available: Default: This option causes the image to zoom slightly when hovered over. Italic and link color: This option is similar to the default, but it also changes the font color of the links on the card to a different color and applies an italic style. Rounded image and heading color: This option rounds the corners of the image and changes the heading font color to a different color. Rounded image and heading icon: This option rounds the corners of the image and adds an arrow icon to the heading.

Collection card heading settings

Text color

Three available options for card heading color to use: Main, Secondary, Heading.

*Colors for these styles you can set in theme settings, but it’ll impact the whole theme.

Text style

Choose a style for the heading: initial or uppercase according to your design preferences.

Text weight

Control the thickness or boldness of the heading by selecting the appropriate font weight.

Product card

Product style	Four styles are available: Buttons down hover (When hovering over a product image, the “Add to cart” button and “Quick view” icon are displayed side by side at the bottom of the image) Buttons center hover (When hovering over a product image, the “Add to cart” button is displayed in the center of the image with horizontal alignment) With borders feature enhances your product display by adding a sleek border to all product card. When a user hovers over a product image, the "Add to Cart" button elegantly appears beneath the border, positioned after the heading and price. Title on hover (When hovering over a product image, a heading with the price is displayed in the center of the image. The 'Quick View' icon appears at the top center of the image, allowing users to quickly preview the product. Additionally, the 'Add to Cart' button is positioned at the bottom center of the image, providing users with a convenient option to add the product to their cart).
Image ratio	Sets the image ratio for the product images: 'Adapt to image' uses the aspect ratio of the images. This prevents the images from being cropped. 'Portrait' crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation. 'Square' crops the images to a 1:1 ratio, where the width and height of the image are equal. It creates a square-shaped display for your images.
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.
Custom second image	You can add one image, which will be visible on hover on every product.
Show add to cart button	Disable this option if you want to hide the "Add to cart" button on the product card.
Zoom image on hover	See the image in enlarged form.
Show image border	Shows distinct borders of the image.
Show badges	You can show or hide badges for the section, marking the checkbox or removing the checkmark according to your design preferences.
Show quick view icon	Shows a quick-view icon. Clicking on the icon opens a pop-up with short information about the product. You can choose product variant options and add to your cart this variant.
Content align	Sets the alignment of the content: Left - Aligns the content to the left. Center - Aligns the content to the center. Right - Aligns the content to the right.
Heading font	'Heading' settings for the font as for heading-font 'Body' settings for the font as for body-font *Change the font family, font size, and font weight of heading or body style in Theme settings /Typography. Any change in the Typography tab of theme settings will affect the whole theme.
Heading style	This setting enables you to define the capitalization style for text. You have the following options: Default: No capitalization transformation is applied. Uppercase: Converts all text to uppercase letters. For example, "Your cart" becomes "YOUR CART".
Heading color	You can adjust the font size of the card heading using the following options: Main Secondary Heading *To choose or change colors for the heading, go to the “Colors” tab in the theme settings and locate the “General colors" block with text color options. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Heading font size	You can adjust the font size of the card heading using the following options: Small Medium Large
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary *To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.

Grid settings

Column gap	Choose the spacing between columns in the grid layout. You have options for "None", "Small", or "Large" gaps, allowing you to adjust the spacing between product images accordingly.
Column gap mobile	Similar to the column gap setting, this option specifies the spacing between columns specifically for mobile devices. Choose between "None" or "Small" gaps to optimize the grid layout for mobile viewing.
Row gap	This setting determines the spacing between rows in the grid layout. You can select from "None," "Small," or "Large" options to control the vertical spacing between product images.
Row gap mobile	Similar to the row gap setting, this option specifies the spacing between rows specifically for mobile devices. Choose between "None", "Small", or "Large" gaps to ensure a consistent grid layout across different screen sizes.

Button settings

Show card button	If after collection card should be a button, click on “Show button”. A button will be presented after each collection card.
Button label	This option allows you to add a label to the button on the page. *If you remove the button label, it will be invisible.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary This setting can be applied to buttons, links, and underlined links within the section. To choose or change the colors for these button styles, go to the “Colors” tab in the theme settings and locate the* “Primary button” and “Secondary button” blocks. By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Button style	You can choose from seven different button styles: Default button: This is the standard button style with a solid background color and text. Default button with icon Outline button: This style features a transparent background with a colored outline and text. Outline button with icon Inline button: The inline button style blends seamlessly with the surrounding text, appearing as a link with the same color. Inline button with underline: Similar to the inline button style, this option adds an underline to the text, making it more noticeable. Inline button with underline on hover — this option adds an underline to the text on hover.

Section settings

Setting	Description
Section top space	The "Section top space" setting allows you to adjust the amount of space at the top of the section using a slider.
Section bottom space	The "Section bottom space" setting functions similarly to the “Section top space” setting but, but controls the space at the bottom of the section.