# Products with image

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

<figure><img src="/files/HY5Nc8oDCMZlVts0MsBm" 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>


---

# 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/sections/sections/products/products-with-image.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.