# Image with text

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/ira/readme/theme-retirement).
{% endhint %}

The **Image with text** section combines a feature image with a marketing call to action block. With a flexible layout and optional button, it's a great way to introduce a product collection or something new and exciting.

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/ira/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/ira/general/adapting-your-theme/dynamic-content-with-metafields).d
{% endhint %}

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add block** and select **Button**, then click the new button block.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-97e16350f744fe5c12df1d68377065820ddb5c96%2Fimagewithtext-button.jpeg?alt=media)
2. Select or paste a URL for the **Link**.
3. Change the **Link text** to display on the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Click **Save**.

</details>

## Add feature image

Upload a feature image to display on the left or right of the marketing text block. You can adjust the width and shape of your image.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Image with text** section to open the settings.
2. Click **Select image** to upload and select an image file.

   > There are no required images dimensions. We simply recommend uploaded images have a minimum width of **`2050px`** for optimal quality across all devices.
3. Choose to set the **Image width** to either **Standard** or **Larger**.

   > **Standard** is *1/2* the width of the section and **Larger** is *2/3* of the section.

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-9d0ac9607428e3a6805f550c99a9a7faf7dcaa3b%2Fimage-with-text-standard.jpeg?alt=media)

   ![](https://4075298574-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F072gQRkuxS6ZiYGtqLNG%2Fuploads%2Fgit-blob-cd3daa8cebf12eb8c2862831bc051b0cfeb39489%2Fimage-with-text-wide.jpeg?alt=media)
4. Select the **Image position** to display the image on the **Left** or **Right** side of the section.

   > The text content will display on the opposite side of the image.
5. Click **Save**.

</details>

## Add section headings

This section has blocks for three text headings. You can customize the alignment, color, and overall look of your text.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Text** blocks to change the **Heading** and **Subheading**.
2. (*Optional*.) Open the section settings to adjust the **Text max width** of your headings using the slider.

   > Experiment with this setting to find a clean visual shape for your text.
3. Click **Save**.

</details>

## Add call-to-action button

You can link to you collections or products or any other page with a custom call-to-action button.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click (**+) Add block** and select **Button**.
2. Click the new **Button** block to open the settings.
3. Select or paste a URL for the **Link**.
4. Change the **Link text** to display on the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
5. Click **Save**.

</details>

## Change section style

The section image displays on the left or right half of the section. Change the headings that display above the featured products.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured products** section to open the settings.
2. Choose to **Enable contrast** colors.

   > The **Contrast** style uses the Contrast colors in your **Theme Settings**.

   > Sections with contrast colors can improve the variety and flow of your page.
3. Choose to **Enable full width** to remove any borders around the section, letting it fill the entire width of the screen.
4. Click **Save**.

</details>

## Settings reference

Click the **Image with text** section to find the following settings.

| Setting           | Description                                                                                                                                                                                                                           |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Image             | Select or upload one image. There are no required image dimensions but we recommend an image that is square or landscape (wider than it is tall). We recommend uploading an image with a minimum width of 2050px for optimal quality. |
| Image position    | Display the image on the Left or Right side of the section.                                                                                                                                                                           |
| Image width       | Change the width of image in this section. Either Standard (50% of the page width) or Larger (66% of the page width).                                                                                                                 |
| Heading           | Enter heading text to display as a section title.                                                                                                                                                                                     |
| Text              | Enter text to display below the heading.                                                                                                                                                                                              |
| Text max width    | <p>Use the slider to adjust the maximum width of the heading and subheading text.<br><br>Experiment with this setting to find a clean visual shape for your text.</p>                                                                 |
| Link              | Select or paste a URL for a button. You can add up to three buttons below the section heading.                                                                                                                                        |
| Link text         | Add text to display as the button label.                                                                                                                                                                                              |
| Enable contrast   | Apply your store's Contrast colors to this section.                                                                                                                                                                                   |
| Enable full width | Remove the outer margins from this section to span the entire width of the screen.                                                                                                                                                    |

<br>

***

> **Related links**\
> [Slideshow](https://help.fluorescent.co/ira/sections/theme-sections/slideshow)\
> [Mosaic grid (2 columns)](https://help.fluorescent.co/ira/sections/theme-sections/mosaic-grid-2-columns)
