# Image with text

The image with text section provides an appealing and dynamic approach mixing media, message, and a call-to-action button. This is a great way to promote a product/collection or any exciting feature on your online store.

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

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Image with text.**
3. **Save.**
   {% endhint %}

## Section settings

### General and Layout settings

Select the Color scheme you want to use for your section.

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

You can also **enable boxed layout** for the section, and select the **Boxed color scheme**.

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

## Section header

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

Give your section a heading and a subheading, or simply leave them blank.

* Text alignment: Left/Center/Right;
* Mobile text alignment: Left/Center;
* Show header divider or not;
* Heading size: H2/H3/H4/H5.

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

### Grid settings

Adjust the gap between the image and content by adjusting the **Column gap** for desktop and moble view separately.

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

### Image settings

Select/Upload an image and insert the image link if needed.

You can also decide where to place your image by selecting **Image alignment** as Left or Right.

Set your preferred **Image container width**.

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

## Block settings

Add a Heading, Description, Subtext, and a Button to your section. You can reorder each block to change its position.&#x20;

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


---

# 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://docs.foxecom.com/megamog-theme/theme-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.