# 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.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2Fh3i5KBu2yPGPeMKhoBss%2Fproduct-grid-theme-settings.gif?alt=media&#x26;token=ed9aa36e-bfc6-43c1-aaef-87dc2c76db5b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="307.9210205078125">Settings</th><th width="114.9417724609375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Content alignment</td><td align="center"><code>select</code></td><td>Aligns product content: <code>Left</code>, <code>Center</code>, or <code>Inline</code>.</td></tr><tr><td>Heading style</td><td align="center"><code>select</code></td><td>Choose a font for product titles: <code>Heading</code> or <code>Body</code>.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjust heading font size.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjust product detail text size.</td></tr><tr><td>Bold product price</td><td align="center"><code>checkbox</code></td><td>Toggle bold styling for product prices.</td></tr><tr><td>Products per row on desktop</td><td align="center"><code>range</code></td><td>Number of products shown per row (desktop).</td></tr><tr><td>Products per row on mobile</td><td align="center"><code>select</code></td><td>Choose between <code>1</code> or <code>2</code> products per row (mobile).</td></tr><tr><td>Image size</td><td align="center"><code>select</code></td><td>Choose how images scale: <code>Stretch</code> (<code>cover</code>) or <code>Fit</code> (<code>contain</code>).</td></tr><tr><td>Aspect ratio</td><td align="center"><code>range</code></td><td>Controls image height vs. width.</td></tr><tr><td>Show gray background behind images</td><td align="center"><code>checkbox</code></td><td>Adds a gray background behind images.</td></tr><tr><td>Image hover effect</td><td align="center"><code>select</code></td><td>Choose what happens on image hover: <code>Slideshow</code>, <code>Show secondary image</code>, or <code>None</code>.</td></tr><tr><td>Image hover animation</td><td align="center"><code>select</code></td><td>Pick how the hover effect is animated: <code>Fade in</code>, <code>Wipe</code>, or <code>Slide</code>.</td></tr><tr><td><strong>Cutlin</strong></td><td align="center"></td><td></td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose a color for the cutline text: <code>Body text</code>or <code>Accent</code>.</td></tr></tbody></table>