Product grid template

Settings	Description
Results per page	Sets how many products will be displayed on the page. You can choose from 2 to 36. *If the actual number of products, for example, is 20, and we have settings of max quantity – 36 products on the page, the page will show 20.
Products in row	Choose products quantity in a row: 2 columns 3 columns 4 columns
Products in row on mobile	1 column 2 columns
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.
Select a way to expand the list of products	To not show all images on the page, we have pagination or a “Show more” button. Choose one of the options.
Pagination style	Light pagination Bold pagination
Button label	This option allows you to add a label to the button on the page. *If you remove the label, the button will become invisible on the page.
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary
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 the line under the section	This allows you to visually separate different sections on your webpage.

Card settings

Settings	Description
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 cards. 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.
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, switching the toggle 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 this variant to your cart this variant.
Product variants	On the product page in the dashboard, you can create between 1 and 3 variant options. When enabled, these variants will appear on the product card in the Collection All page (Product grid template) by turning on the toggle. To hide the variants, simply turn the toggle off. See screenshots below the table.
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 the heading or body style in Theme settings /Typography. Any change in the Typography tab of theme settings will affect the whole theme.
Heading color	You can adjust the font size of the card heading using the following options: Main Secondary Heading
Heading font size	You can adjust the font size of the card heading using the following options: Small Medium Large
Heading style	This setting enables you to define the capitalization style for text. You have the following options: Default: No capitalization transformation is applied; you can enter sentence case or title case on the product detail page on the Dashboard. Uppercase: Converts all text to uppercase letters. For example, "Your cart" becomes "YOUR CART".
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.
Price font size	You can adjust the price font size using the following options: Small Medium Large Extra Large
Button color style	This feature allows you to customize the color style of buttons. You have two options to choose from: Primary Secondary By changing the colors in the theme settings, the new color style will be applied throughout the entire theme.
Show vendor	Shows vendors of the products under the image.
Show product rating	Shows the average product rating in stars with the number of reviews in parentheses, for example: ★★★★★ (10). Also requires a product review app such as Shopify Product Reviews, and metafield definitions for reviews, rating_count, and reviews. rating.

Filtering and Sorting

Settings	Description
Collection style	Using these styles, you can see different appearances of filter options and sorting at the top of the page on a desktop or tablet. Also, a mobile filter could be different, too. Choose the desktop and mobile appearance of the collection filter according to design preferences: No border filter Border filter Round border filter Underline Two underlines
Label style (Filter options, Sort By)	This setting enables you to define the capitalization style for text. You have the following options: Default: No capitalization transformation is applied; you can enter sentence case or title case on the product detail page on the Dashboard. Uppercase: Converts all text to uppercase letters. For example, "Your cart" becomes "YOUR CART".
Label size (Filter options, Sort By)	You can adjust label font size using the following options: Small Medium Large
Label weight (Filter options, Sort By)	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.
Enable filtering	Toggle the switch, and at the top of the collection, you will see a filter with price, product type, color, size, availability, and Brand.
Show label "Filter"	Toggle the switch to see the label.
Show label "Viewing"	Toggle the switch to see the label near a quantity of products under the filter options, which shows how many products are on the page with your filter selection.
Show checkbox	Adds checkboxes to select attribute options in filters.
Enable sorting	Toggle the switch to see sorting at the top of the collection (Sort By with a dropdown list).
Show navigation layout	Toggle the switch, and in the top right corner, you will see icons (2 squares in a row, three, and four). Click on these icons to put products on one row: two, three, or four products.
Show products count	Toggle the switch in the top left corner to see the general quantity of products or how many products the filter has found for you.
Collapse on larger screens	Toggle the switch, and the filter will look like a button on large screens, and when you click on it, a sidebar with options opens to you.
Collapsed filter button style	Choose the button that fits to style of your theme.
Show count for a mobile filter drawer	Add a number of filtered products to a mobile filter drawer.
Enable custom colors for a mobile	Toggle the switch to add custom colors for text and filter background.
Custom text color	Click the box containing the color circle and name to open the color picker. Then, select your desired color.
Custom background color	Click the box containing the color circle and name to open the color picker. Then, select your desired color.

Discount banner

Setting	Description
Image	Choose an image for the discount banner on the Collection page from the library, free images, or upload a new image to the library.
Heading	Type heading for the discount banner.
Color-changing text	To change the colors of words that are not next to each other, use a comma. Choose a color from the color palette below this option.
Custom color	Highlight individual words using a different color.
Button label	Add the label to the button. *If you remove the label, the button will become invisible on the page.
Button link	Paste a link or search from the dropdown list that appears after clicking to activate the button. *The dropdown list appears after clicking on the Button link field.
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.

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.