# Products with image

Build an engaging section showcasing products from a collection alongside a prominent image promotion. This modern design by Broadcast captures shoppers' attention while browsing your store pages.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2Fumg1DpKXo6aq3V34OkLF%2Fproducts-with-image.jpg?alt=media&#x26;token=1f43c0e4-291e-4cd6-b229-1bfcdf0fd43c" alt="products with image section"><figcaption></figcaption></figure>

### Section settings

<table><thead><tr><th width="218.59637451171875">Settings</th><th width="141.5130615234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Defines section width: <code>Full width</code>, <code>Full width padded</code>, or <code>Normal</code>.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Reverse block placement</td><td align="center"><code>checkbox</code></td><td>Reverse order of blocks on mobile.</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>Select section-wide color scheme.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Space above the section.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Space below the section.</td></tr></tbody></table>

### Customize

* Mobile placement can be reversed to show the image first or after the products.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FrqLnJQtTWOEZEdy9zSsQ%2Fmobile-reverse.gif?alt=media&#x26;token=39e5372b-a911-4320-94a6-6907f43bfd8c" alt="reverse block placement setting showcase"><figcaption></figcaption></figure>

* The mobile layout can have one or two items per row or a slider for less vertical scrolling.
* When using four products for your section, choose a tall image to span two rows of products. A wide-aspect ratio image will work best for two products.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FbzJETS9PwPa8lAn43ksz%2Fproducts-image-single.jpg?alt=media&#x26;token=e0600ab2-a4a3-4796-b8e9-b29184b29521" alt="products with image section"><figcaption><p><strong>Use a wide image for single row sections or a tall image for two rows</strong></p></figcaption></figure>

### Video Overview

This video demonstrates the section settings and block options for the **Products with image** section, including mobile layouts:

{% embed url="<https://www.loom.com/share/c372a87616c84ebe96d4b147eef6556c?sid=af314567-4f96-4fb2-8c1c-9785a363fc57>" %}
**Video walkthrough of the products with image section**
{% endembed %}