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

# Image with products

Pair a large lifestyle image with up to four products. Use it to connect inspiration with products shoppers can buy.

***

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

The **Image with products** section shows a large image, with optional text and a button on it, next to a grid of up to four products. Use it to tell a story with an image and promote the products in it.

### 1. Our guide to set up an Image with products section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Image with products.**
* Click **Save.**
  {% endhint %}

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F44S5Hcq4nmDOaYs8iX1r%2FScreenshot%202026-04-21%20at%205.02.13%E2%80%AFPM.png?alt=media&#x26;token=be28af2f-7e2a-4f4d-966d-c03c7f05ed41" alt=""><figcaption></figcaption></figure>

The section is added with one **Image** block and one **Products** block. Drag them to swap sides.

### 2. Section settings

* **Color scheme:** The colors of the section's background, text and buttons.
* **Section header**
  * **Heading:** The title above the image and products. Leave it blank to hide it.
  * **Heading size:** 15–80px.
  * **Heading alignment:** Left / Center.
* **Corner radius**
  * **Image:** Rounds the corners of the large image, 0–40px.
* **Section**
  * **Top padding** and **Bottom padding:** 0–100px.

### 3. Image block settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FeNKBn7H2LQTtkrxiimZq%2FScreenshot%202026-04-21%20at%205.03.21%E2%80%AFPM.png?alt=media&#x26;token=8460b3ec-cfac-4ee2-a363-86e22a7ede2e" alt=""><figcaption></figcaption></figure>

* **Image:** The large image.
* **Image overlay opacity:** Darkens the image so the text on it is easier to read, 0–100%.
* **Text**
  * **Heading:** A title shown on the image.
  * **Heading size:** 15–80px.
  * **Description:** Supporting text under the heading.
  * **Content position:** Where the text sits on the image: Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right.
  * **Button label** and **Button link:** A button on the image. Leave the label blank to hide it.
  * **Use outline button style:** Shows an outlined button instead of a solid one.

### 4. Products block settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2Fv7I88DCUJgaw6nFgZmjm%2FScreenshot%202026-04-21%20at%205.03.30%E2%80%AFPM.png?alt=media&#x26;token=86ce21f0-dff7-40c3-a8d0-cd90622c1b68" alt=""><figcaption></figcaption></figure>

* **Product list:** Select up to 4 products.
* **Product card**
  * **Font size scale:** Size of the product titles, 100–200%.
  * **Content alignment:** Left / Center.
  * **Image ratio:** Adapt to image / Portrait / Square / Arch.
  * **Show second image on hover:** Shows the product's second image when shoppers hover over the card.
  * **Add image padding:** Adds space around the product image inside the card.
  * **Show image border:** Adds a border around the product image.
  * **Show vendor:** Shows the product's vendor.
  * **Show product rating:** Shows star ratings. Requires a product rating app.
  * **Show color swatches:** Shows color/variant swatches on the product cards. Set the swatch style in Theme settings → [Swatches](/articles/theme-settings/inspiredtheme-settings-intro/swatches.md).
  * **Enable quick add button:** Lets shoppers add a product to the cart without leaving the page.
* **Mobile layout**
  * **Columns on mobile:** 1 column / 2 columns.
  * **Enable swipe on mobile:** Turns the products into a swipeable slider on phones.

### 5. Tips

* Choose products that appear in the image, so shoppers can see them in context.
* Use four products for a full 2 × 2 grid next to the image.
* On mobile, turn on **Enable swipe on mobile** to keep the section short.