> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/soul-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/soul-documentation/collection-page/collection/product-grid.md).

# Product grid

## Product grid section settings <a href="#product-grid-show-product-rating" id="product-grid-show-product-rating"></a>

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Products per page</td><td>The number of products that you want to display on each page. From 9 to 27. Defaults to 15.</td></tr><tr><td>Number of columns on desktop</td><td>Use the range scale to select the number of columns that display on desktop computers. Minimum is 2, maximum is 4.</td></tr><tr><td>Image ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image (default)</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.</li></ul></td></tr><tr><td>Show second image on hover</td><td>When the customer hovers their cursor over the product image, displays the second product image if the product has one.</td></tr><tr><td>Show vendor</td><td>Displays the vendor for each product.</td></tr><tr><td>Enable quick add button</td><td>The quick add button allows customers to add an item to their cart from the product card. If the product has variants, then the button will read <strong>Choose options</strong> and display the product details in a pop-up, where the customer can select the desired variants, add the item to cart, checkout immediately with <strong>Buy it now</strong>, or click to view the item's full details. <br><br>Note that this setting is dependent on the <strong>Buy it now</strong> button being activated on your <a href="https://help.shopify.com/en/manual/online-store/dynamic-checkout">product page</a>. If <strong>Buy it now</strong> button isn't activated on the product template, then customers have the option to add the product to their cart, but the quick <strong>Buy it now</strong> checkout workflow doesn't display. The Desktop media position setting for the page determines which side the media displays on in the quick add modal.</td></tr><tr><td>Enable filtering</td><td>Lets customers filter the products in the collection based on the filters in your Navigation settings.</td></tr><tr><td>Desktop filter layout</td><td>Choose between a horizontal (default), vertical, or drawer layout.</td></tr><tr><td>Enable sorting</td><td>Allows customers to sort search results.</td></tr><tr><td>Number of columns on mobile</td><td>Set a specific column layout for mobile devices. Choose between 1 and 2 columns.</td></tr><tr><td>Section padding</td><td>Add spacing to the top or bottom of the product grid. Use the range slider to add between 0px and 100px of space above or below the product grid.</td></tr></tbody></table>

### Banner with text below block

<table><thead><tr><th width="242">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Banner position</td><td>Set the position for the banner on the collection page. From 1 to 25. Banner position must be less than the number of products per page.</td></tr><tr><td>Image</td><td>Upload image for the banner block</td></tr><tr><td>Image ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image (default)</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.</li></ul></td></tr><tr><td>Heading</td><td>The heading of the block.</td></tr><tr><td>Button label</td><td>The text of the button</td></tr><tr><td>Button link</td><td>The link of the button</td></tr><tr><td>Button style</td><td>Select the style for the button. Choose between Filled, Text link, or Outlined.</td></tr></tbody></table>

### Banner with text on image block

<table><thead><tr><th width="242">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Banner position</td><td>Set the position for the banner on the collection page. From 1 to 25. Banner position must be less than the number of products per page.</td></tr><tr><td>Image</td><td>Upload image for the banner block</td></tr><tr><td>Image ratio</td><td><p>The image ratio for the product images:</p><ul><li><strong>Adapt to image (default)</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 2:3 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio.</li></ul></td></tr><tr><td>Image overlay opacity</td><td>Dims the banner images with an overlay.</td></tr><tr><td>Heading</td><td>The heading of the block.</td></tr><tr><td>Heading size</td><td><p>The size of the heading text:</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Heading font weight</td><td><p>The font weight of the heading text:</p><ul><li>Regular</li><li>Medium</li><li>SemiBold</li><li>Bold</li><li>ExtraBold</li><li>Black</li></ul></td></tr><tr><td>Button label</td><td>The text of the button</td></tr><tr><td>Button link</td><td>The link of the button</td></tr><tr><td>Button style</td><td>Select the style for the button. Choose between Filled, Text link, or Outlined.</td></tr><tr><td>Desktop content position</td><td><p>Sets the vertical position of the content on desktop:</p><ul><li><strong>Top</strong> - Displays the content at the top.</li><li><strong>Middle</strong> - Displays the content in the middle.</li><li><strong>Bottom</strong> - Displays the text at the bottom.</li></ul></td></tr><tr><td>Desktop content alignment</td><td><p>Sets the alignment of the content on desktop:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr><tr><td>Color scheme</td><td>Set the color of the block.</td></tr></tbody></table>

#### Mobile layout

<table><thead><tr><th width="229">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Mobile content alignment</td><td><p>Sets the alignment of the content on mobile:</p><ul><li><strong>Left</strong> - Aligns the content to the left.</li><li><strong>Center</strong> - Aligns the content to the center.</li><li><strong>Right</strong> - Aligns the content to the right.</li></ul></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://halosoft.gitbook.io/soul-documentation/collection-page/collection/product-grid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.