Collections tabs settings

This section has a look of tabs. And each of them consists of a Product collection. The maximum number of collections that can be displayed on the page is 6. With adding a collection, a new tab appears on the page to show these collections. To see collections on the page, you just need to click on the tab.

For this section, you will need to have created a collection of products. For a short guide on how to create a collection, please refer to the article in this documentation titled 'General Instruction for Creating a Collection'.

Section heading	Add a heading to the collection list. The heading will be displayed on the left side of the section.
Heading align	You have three alignment options to choose from: Left: This aligns the heading to the left side of the section. Right: This aligns the heading to the right side of the section, Center: This aligns the heading and subtext to the center of the section.
Products in row	Choose collections quantity in a row: 2 columns 3 columns 4 columns
Products	Choose what number of products should be displayed under the collection tab. You can choose from 2 to 24. *If the actual number of products for example is 20, and we have settings of max quantity – 24 products on the page, the page will show 20.
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.

Tabs settings

Active tab underline color

Two color options for the active tab: Link or heading.

You can find this color palette in theme settings - colors tab, if change here color it will change globally on the whole website.

Text style

Choose a style for text: default (sentence case) or uppercase according to your design preferences.

Text weight

Control the thickness or boldness of the text by selecting the appropriate text weight.

Сard settings

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	The image ratio for the collections tabs: 1) Adapt to image 2) 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. 3) 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.
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.
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 add to cart button	Disable this option if you want to hide the "Add to cart" button on the product card.
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 color	The setting allows you to set up heading color. Three 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	The size of the card heading: Extra small Small Medium Large
Heading font weight	This option allows you to change the font weight for the card heading. Font weight refers to how thick or thin the characters in the text appear.
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.
Show vendor	Shows the vendors of the products under the image.

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 controls the space at the bottom of the section.
Background color	To change the background color of the section, simply click on the circle labeled "Background color" and select an appropriate color from the color picker. This will apply the chosen color as the background for the section, enhancing its visual appearance.