# Image with products

***

The **Image with products** section combines a visual banner with a curated product list, helping you highlight a lifestyle image while directly promoting related products. It’s ideal for storytelling and driving product discovery in a single layout.

### 1. Our guide to set up a 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="/files/XDlKPdX1IhGP0PMXFanE" alt=""><figcaption></figcaption></figure>

### 2. **Section settings**

<figure><img src="/files/6BMjQQNeBE5Lhebayc0g" alt=""><figcaption></figcaption></figure>

* **Heading:** Add a title for the section.
* **Heading size:** Adjust the prominence of the heading.
* **Color scheme:** Controls background, text, and button colors across the section.
* **Corner radius:** Adjusts the roundness of the Image block.

### **3. Image block settings**

<figure><img src="/files/NkRrdMIXYcy1mIWf2Y1f" alt=""><figcaption></figcaption></figure>

This block acts as the visual focal point of the section.

* **Image:** Upload the main image for the section.
* **Image overlay opacity:** Adds a dark/light overlay to improve text readability on the image.
* **Text settings:**
  * **Heading:** Add a title displayed on the image.
  * **Heading size:** Adjust text size.
  * **Description:** Add supporting text to provide more context.
  * **Content position:** Control where the text appears on the image.
  * **Button label:** Add CTA text.
  * **Button link:** Assign a destination link.
  * **Use outline button style:** Switch between solid and outline button styles.

### **4. Products block settings**

<figure><img src="/files/fwfnkH8PNUFbBCK3753R" alt=""><figcaption></figcaption></figure>

Displays a curated list of products alongside the image.

* **Product list:** Select up to **4 products** to feature in the section.
* **Product card settings:**
* **Font size scale:** Adjust product title size.
* **Content alignment:** Align product information within the card.
* **Image ratio:** Control how product images are displayed.
* **Show second image on hover:** Displays alternate product image on hover.
* **Add image padding:** Adds spacing inside the image container for a softer layout.
* **Show image border:** Adds a border around product images.
* **Show vendor:** Displays brand/vendor name.
* **Show product rating:** Displays product ratings *(requires a rating app)*.
* **Show color swatches:** Displays variant color options.
* **Enable quick add button:** Allows customers to quickly view or add products without leaving the page.


---

# 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://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/image-with-products.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.