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.