# Image with Text

The **Image with Text** section allows you to display an image alongside text, creating a visually appealing layout that enhances storytelling, promotions, or brand messaging.

{% hint style="success" %}

1. **Go to** Shopify Admin > **Online Store > Themes**.
2. Click **Customize** on your active theme.
3. In the Theme Editor, click **Add Section > Image with Text**.
   {% endhint %}

<figure><img src="/files/7efgYe5tUi2NZ3aE9RBA" alt=""><figcaption></figcaption></figure>

### **Settings & Customization**

<figure><img src="/files/0n3LghGio6tstwZddYZI" alt=""><figcaption></figcaption></figure>

#### **Layout Settings**

* **Expand to Full Width:** Enable this option to stretch the section across the entire screen width.
* **Color scheme :** You can customize the section’s appearance by changing the **text color, background color**, and more using preset color options.
* **Background Opacity:** Adjust the transparency level (Range: 0–100, Default: 100). This setting applies to the background image, which can be customized in the theme settings.

#### **Image Settings**

* **Upload Image:** Select an image or explore free images.
* **Desktop image width :** Choose from **Small, Medium, or Large.** Image width is automatically optimized for mobile.
* **Banner Height:** Set the banner height to **Adapt, Small, Medium, or Large**.
* **Image Placement:** Choose **Image First** or **Image** **Last** . Image First is the default mobile layout.

#### **Content Alignment**

* **Desktop Content Alignment:** Set text alignment for Desktop alignment **(Left, Center, or Right).**
* **Mobile Content Alignment:** Set text alignment for Mobile Alignment **(Left, Center, or Right).**

#### **Section Padding**

* **Top Padding:** Adjust the spacing above the section.
* **Bottom Padding:** Adjust the spacing below the section.

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.

### Block Settings

* **Caption :** Customize the caption text.
* **Heading :**
  * **Heading**  Set a custom title.
  * Choose from **Small, Medium, or Large.**
* **Text :**  Add a brief text description to provide additional details about the image feature.
* **Bullet Points :** Add the bullet points in addition details about the sections.


---

# 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://themessupport.gitbook.io/lollipop/sections/image-with-text.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.