# 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="/files/uMNm5AAkQi3ZlgImPa1N" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://palo-alto.presidiocreative.com/theme-settings/settings/product-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.