Skip to main content
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.

​
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.

​
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.
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.
  • 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.
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.
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.
See Common settings 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.

​
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.

Colors

Create the schemes for the card and the band.

Theme blocks

Settings for the heading, text and button blocks.