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