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

Adjust the alignment of the section heading and the “Discover more” button (if the toggle to show the button is enabled):

Left
Right
Center

Note: The “Discover more” button will only appear if the corresponding toggle is enabled.

Button settings

Setting	Description
Show “Discover More” button	Enable this toggle to display the “Discover More” button in the section.
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	Choose from seven button styles: Default: Solid background with text. Default with icon: Same as Default, plus an icon. Add icon in Theme Settings > Buttons > Add icon to inline button option by pasting SVG code. For detailed steps on adding an SVG icon, see the “Buttons” article in Theme Settings, and look for the “Add icon to inline button” option. For example, you can use an arrow icon. Outline: Transparent background with colored outline and text. Outline with icon: Outline style with an icon. Add icon the same way as Default with icon style. Inline: Looks like a text link. You can also add an icon using the same steps as the Default with icon style. Inline with underline: Inline style with a permanent underline. Inline with underline on hover: Inline style with underline appearing on hover.
Show button under section	Use this toggle to control the position of the “Discover More” button: Toggle ON: Displays the button below the section. Toggle OFF: Displays the button above the 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 (When hovering over a product image, the “Add to cart” button is displayed on full width of cart at the bottom of the image) Buttons center hover (When hovering over a product image, the “Add to Cart” button appears horizontally centered and vertically aligned to the bottom of the image). 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 '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 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 add to card button	Toggle this option to display or hide the “Add to Cart” button. When enabled, the button works well with all product styles. When disabled, it pairs nicely with hover title styles (product style: title on hover) or bordered layouts (product style: with borders) for a cleaner look.
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	You can choose whether headings use the Heading or Body text style. To change the font family, font size, or font weight of heading or body style, go to Theme Settings > Typography. Note: Changes in the Typography tab will apply across the entire theme.
Heading color	Choose a color for your headings. Available options include: Main Secondary Heading To change heading colors, go to the “Colors” tab in the theme settings and find the “General Colors” section with text color options. Any changes made here will be applied across the entire theme.
Heading font size	Choose font size of the card heading: Small Medium Large
Button color style	Customize the color styles of your buttons with two available options: Primary Secondary To select or change the colors for these styles, navigate to the “Colors” tab in the theme settings. There, locate the “Primary Button” and “Secondary Button” sections. Any changes made will automatically apply across the entire theme.
Show vendor	Shows the vendor 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.