> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Pair a picture with text using Facet's image with text

> Set up Facet's image with text section: place the picture left, right or behind the text, choose its shape, and color the card and the band.

The Facet image with text section pairs one picture with a heading, text and buttons. The picture can sit to the left or right of the text inside a card, or fill the card behind the text. This page covers the picture, layout and color settings and the blocks you can add.

![The Image with text section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/image-with-text/image-with-text-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=374f31aba1b7260b4ec6caed9d079fe2)

## What this section controls

* The picture, with a separate picture for phones.
* Where the picture sits and its shape.
* The alignment of the text.
* The colors of the card and of the band around it.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Add the section**

In the **Sections** panel, click **Add section** and choose **Image with text**. The section can't be added to the header or footer.

**3. Pick the picture**

Click **Image with text**, choose an **Image**, and set **Image position**.

**4. Write the text**

Edit the heading, text and button blocks.

![The theme editor with the Image with text section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/image-with-text/image-with-text-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=daa77b3106935fe7c8d12effee5b793c)

## Section settings

### Picture and layout

![Theme editor sidebar showing the Image with text section settings: Image, Mobile image, Image position, Content alignment, Common settings, Color scheme.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/image-with-text/image-with-text-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=896e6cff13bf71aa26d7ca1ab41b1e3e)

> [accordion] Image and Mobile image
>
> **Image** is the section picture. **Mobile image** is an optional picture for phones, for example a portrait crop. Without one, phones show **Image**. Until you choose a picture, a placeholder shows.

> [accordion] Image position
>
> * **Left** (default): the picture sits left of the text on screens 750 pixels wide and larger.
> * **Right**: the picture sits right of the text on screens 750 pixels wide and larger.
> * **Background**: the picture fills the card and the text sits on top of it. The card is at least 685 pixels tall on large screens and 480 pixels on phones.
>
> With **Left** or **Right**, phones show the picture above the text.

> [accordion] Image aspect ratio
>
> The shape of the picture: **Natural**, **1:1**, **4:5** (default), **3:4**, **2:3**, **5:4**, **4:3** or **16:9**. **Natural** keeps the picture's own shape. Appears only when **Image position** is not **Background**.

> [accordion] Content alignment
>
> **Left** (default), **Center** or **Right**. Blocks set to fit their content follow this alignment. A block set to fill the width keeps its own alignment.

### Common settings

![Theme editor sidebar showing the Image with text section settings (part 2, scrolled): Content alignment, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/image-with-text/image-with-text-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=b4963e14e4367b087a7cc74ef2dc147a)

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details.

* **Color scheme**: with the picture left or right, it colors the band behind the card. With **Background**, it colors the text over the picture.
* **Card color scheme**: the colors of the card that holds the picture and text. Appears only when **Image position** is not **Background**.
* **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large.
* **Page width**: Fluid (default) or Full.

## Blocks

### Heading, text and button

Add **Heading**, **Text** and **Button** blocks for the copy beside or over the picture. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

## Best practices

* **Check contrast with Background.** Text over a picture is easiest to read on a calm area of the picture, with a color scheme whose text color stands out from it.
* **Add a mobile image for Background.** A wide picture behind text loses its subject on a phone. A portrait crop keeps it in view.
* **Alternate sides.** When you stack several image with text sections, switch between **Left** and **Right** so the page doesn't feel repetitive.

## Related guides

> [card] [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md)
>
> Create the schemes for the card and the band.

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Settings for the heading, text and button blocks.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.