> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/sections/sections/products/products-with-image.md).

# Products with image

The products with image section can help you display a collection of products.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FbL7KMQevoiWov1bqHNfX%2Fproducts-with-image.gif?alt=media&amp;token=8cbe0817-3792-49a6-86ad-9a5f91c2c5d3" alt=""><figcaption></figcaption></figure>

## Section settings

<table><thead><tr><th width="233.9169921875">Settings</th><th width="140.41796875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Collection</td><td align="center"><code>collection</code></td><td>Select a product collection to feature.</td></tr><tr><td>Product list</td><td align="center"><code>product_list</code></td><td>Manually select specific products to display.</td></tr><tr><td>Image position</td><td align="center"><code>select</code></td><td>Position of the background image relative to products: <code>Image left,</code> or <code>Image right</code>.</td></tr><tr><td>Products</td><td align="center"><code>range</code></td><td>Number of products to display.</td></tr><tr><td>Products per row on desktop</td><td align="center"><code>select</code></td><td>Number of products per row on desktop: <code>1</code> or <code>2</code>.</td></tr><tr><td>Products per row on mobile</td><td align="center"><code>select</code></td><td>Number of products per row on mobile: <code>1</code> or <code>2</code>.</td></tr><tr><td><strong>Background image</strong></td><td align="center"></td><td></td></tr><tr><td>Desktop image</td><td align="center"><code>image_picker</code></td><td>Upload background image for desktop view.</td></tr><tr><td>Mobile image</td><td align="center"><code>image_picker</code></td><td>Upload background image for mobile view.</td></tr><tr><td>Overlay opacity</td><td align="center"><code>range</code></td><td>Set overlay darkness.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Position</td><td align="center"><code>select</code></td><td>Text block alignment over image: <code>Top left</code>, <code>Middle center</code>, <code>Bottom center</code>, and etc.</td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Main heading (supports HTML, including italic highlights).</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjust heading size.</td></tr><tr><td><strong>Highlight</strong></td><td align="center"></td><td></td></tr><tr><td>Type</td><td align="center"><code>select</code></td><td>Highlight style for emphasized words in the heading: <code>Circle</code>, <code>Underline</code>, <code>Stroke</code>, and etc.</td></tr><tr><td>Highlight color</td><td align="center"><code>color</code></td><td>Color used for highlight.</td></tr><tr><td>Text color</td><td align="center"><code>color</code></td><td>Color of the highlighted text.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Descriptive or promotional content under the heading.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjust supporting text size.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label. Leave blank to link the whole image area.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL to navigate to on button click.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Choose button color style: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Button design: <code>Solid</code>, <code>Outline</code>, <code>Text</code>, and etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a colored background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Set section background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr><tr><td><strong>Mobile layout</strong></td><td align="center"></td><td></td></tr><tr><td>Enable slider</td><td align="center"><code>checkbox</code></td><td>Enable horizontal scrolling slider for mobile devices.</td></tr><tr><td><strong>Section spacing</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Section width: <code>Full width padded</code> or <code>Page width</code>.</td></tr><tr><td>Padding top</td><td align="center"><code>range</code></td><td>Top spacing in pixels.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Bottom spacing in pixels.</td></tr></tbody></table>