Product grid

Let you control the appearance and layout of products displayed in collections or featured areas. From typography to grid structure to image behavior, these settings help you tailor your product presentation for a clean, user-friendly shopping experience.

Overview

Settings
Type
Description

Content alignment

select

Aligns product content: Left, Center, or Inline.

Heading style

select

Choose a font for product titles: Heading or Body.

Heading size

range

Adjust heading font size.

Text size

range

Adjust product detail text size.

Bold product price

checkbox

Toggle bold styling for product prices.

Products per row on desktop

range

Number of products shown per row (desktop).

Products per row on mobile

select

Choose between 1 or 2 products per row (mobile).

Image size

select

Choose how images scale: Stretch (cover) or Fit (contain).

Aspect ratio

range

Controls image height vs. width.

Show gray background behind images

checkbox

Adds a gray background behind images.

Image hover effect

select

Choose what happens on image hover: Slideshow, Show secondary image, or None.

Image hover animation

select

Pick how the hover effect is animated: Fade in, Wipe, or Slide.

Cutline

paragraph

Use the metafield theme.cutline to show a short description under product titles. Learn more

Color

select

Choose a color for the cutline text: Body textor Accent.

Last updated