All section settings (Product list with banner)

Heading settings

Setting

Description

Heading

To add a heading to the product list section, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink.

Heading align

Change the position of the section heading and button “Discover more” if the checkbox to show button is marked:

Left
Right
Center

Button settings

Setting	Description
Show “Discover More” button	Check the checkbox to show “Discover More” button.
Button label	You can change the label for the button or remove it. *If you remove the label, the button 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.
Show button under section (turn on)	Displays the button under the section.
Show button under section (turn off)	Displays the button over product grid.
Button align	Left Center Right

Grid settings

Setting	Description
Collection	To display a collection of products in a section, you can either select an existing collection or create a new one.

Card settings

Setting	Description
Product style	Four styles are available: Buttons down hover Buttons center hover With borders Title on hover
Image ratio	The image ratio for the featured images of the collections: '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 this product has 2 or more images added in settings of the detail product page in your Shopify store.
Custom second image	You can add one image, which will be visible on hover on every product.
Zoom image on hover	Enabling “Zoom image on hover” feature allows customers to zoom in on product images by hovering over them with their cursor. This can give them a closer look at the product and help them make a more informed purchasing decision.
Show image border	This option will add a visible border around the product image. This can help to make the image stand out and give it a more defined look.
Content align	“Content align” option allows changing the alignment of content under products: 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: 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.
Show vendor	Shows the vendors of the products under the image.
Show product rating	Shows the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (10). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews.rating_count and reviews.rating.

Banner settings

Setting	Description
Select banner position	Change the position of the image and product list: Left Right
Image	Choose an image from library, free images or upload a new image to library.
Select vertical text position	This setting allows you to choose the vertical positioning of the text block within the image. The options are: Top: The text block will be positioned at the top of the image. Center: The text block will be positioned in the center of the image. Bottom: The text block will be positioned at the bottom of the image.
Select horizontal text position	This setting allows you to choose the horizontal positioning of the text block within the image. The options are: Left: The text block will have left alignment within the image Center: The text block will have center alignment within the image Right: The text block will have right alignment within the image
Text color	Choose the color of text : Light color Dark color
Banner background color	Choose a background color for the text block.

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.