# Image with text

<div data-full-width="true"><figure><img src="/files/dHaPBf9wiTvRsPXBrcnP" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=foxecom&#x26;utm_medium=help_center_foxify_image_with_text&#x26;utm_campaign=anchor-text&#x26;utm_term=explore_foxecom_affiliate_program_perks_now">Explore FoxEcom Affiliate program perks now</a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

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

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.

## How to customize an image with text&#x20;

An image with text section's layout is defined by the grid layout you set. A grid comes with a number of columns.&#x20;

### Section settings

#### Grid layout

The settings let you decide on your grid layout on different screen sizes. Use the device mode selector on the top bar to view the section on desktop/laptop/tablet/mobile.&#x20;

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

#### Content position

You can also adjust the content position and gap between columns of that grid (between 0 and 100px).&#x20;

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

Then, you can add child blocks to each of the columns accordingly to create an image with text section as you wish.&#x20;

### Block settings

You can add different child blocks in one column that you can mix and match:

* Buttons
* Image
* Text
* Heading
* Custom code

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

## Some practices of the Image with text section

Here are some ways to use the image with text section for your storefront:

* About us content: Use a picture with a short paragraph of text to let visitors know more about your brand.

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

* Explainers and introduction: Explain how your products are made.

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

* Spotlight products: Display your featured products with a button to direct customers to the product pages/collection page.&#x20;

<figure><img src="/files/841AHz3xdtm5y0w14yrD" alt=""><figcaption></figcaption></figure>

* Sale promotions: Promote an event or sale by showcasing your special offers.

<figure><img src="/files/SRlJh1dRRqYsJc8iuzUO" 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/foxify-app/legacy-editor/sections-and-presets/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.