Product grid

Set the number of products to be displayed per page on the collection page template. For example, if a collection has 10 products and you set it to show 5 products per page, pagination will appear at the end of the product list, allowing the customer to navigate to the second page to view all products.

*If you set to show all available products of the collection, pagination won't be visible.

Choose an appropriate color scheme for collection page with products and filter.

*Applying a color scheme automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.

Image Ratio controls how your images look based on their shape. Here are the options:

• Adapt to Image: Keeps the original shape of the image, no cropping.
• Portrait: Makes the image taller.
• Square: Makes the image a perfect square.
• Custom: Allows to set image height in the next option.

You can check and choose from the following shapes for product cards in the dropdown:

• Default
• Arch
• Blob
• Chevron left
• Chevron right
• Diamond
• Parallelogram
• Round

To view the changes:

• Select the Standard style in the Theme Settings under the Product Card tab to explore different image shapes.
• If the style is set to Card, ensure the product background is different from the card background in color scheme.

The heading size setting offers four options to control card heading size:

• Extra small
• Small
• Medium
• Large

Font weight defines the thickness or boldness of card heading. Available options:

• Normal (400): The default font weight for body text, which can also be applied to headings.
• Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
• Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
• Bold (700): Strongest weight for maximum emphasis.

Enable this option to display a "Quick View" button on product cards that have variants.

When the "Quick View" button is clicked, a pop-up window appears where customers can:

• Select the desired product variants (e.g., size, color, etc.)
• Add the product directly to their cart

Behavior when the option is disabled:

If this option is turned off, product cards that have more than one variant will appear without any action buttons.

In that case, customers need to visit the product detail page to choose and add a variant to their cart.

Note: If a product has only color variants and color swatches are displayed directly on the product card. In this case, instead of the "Quick View" button, an "Add to Cart" button will be shown — allowing customers to:

• Select the desired color directly from the product card
• Add the product to their cart without navigating to the product detail page

Enable this option to show color swatches. This option works with Color Variant Name option.

In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section.

Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”.

Controls how filters are arranged on desktop. Options:

• Horizontal (Default) — filters sit in a bar above the grid.

• Vertical — filters sit in a sidebar beside the grid.

• Drawer — filters open in a slide-out panel.

Drawer is the default mobile layout regardless of this setting. Only available when Enable filtering is on.

Controls which theme font is used for the filter headings. Options:

• Heading

• Body (Default)

Only available when Enable filtering is on.

Font weight defines the thickness or boldness of the filter headings. Available options:

• Normal (400) — default weight for body text.

• Medium (500) — slightly thicker, suitable for emphasized body text or light headings.

• Semi-Bold (600) (Default) — heavier, ideal for subheadings or highlighted text.

• Bold (700) — strongest weight for maximum emphasis.

Only available when Enable filtering is on.

Font weight defines the thickness or boldness of text on your store. Available options for heading:

• Normal (400): Default weight for body text.
• Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
• Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
• Bold (700): Strongest weight for maximum emphasis.

Select the preferred column layout for mobile devices:

• 1 column
• 2 columns