“How do image with text sections work?”

Image with text sections allow you to set up bold, asymmetrical text and image features on your home page. Asymmetry is difficult to pull off, so you’ll want to pay close attention to the orientation, or sizing, of your images.

Asymmetrical feature example

You can enable up to three image with text blocks per section. Each block can be set to use the Portrait or Landscape block type. If you are having trouble getting the image to look right with the heading and content, check to make sure you are using the correct block type for your image’s orientation.

If you don’t know the difference between “landscape” and “portrait” orientations, one easy way to remember is that landscapes are wide and portraits are tall. Below is a diagram of the two orientations.

Orientation diagram

Content

Use the Add content button to add up to three blocks to your image with text section. When you use the button, you will be prompted to choose either the Portrait or the Landscape block type.

Landscape dimensions

If you are using the Landscape block type, ensure you are using a landscape-oriented image.

Width Height Aspect ratio
1040 pixels* 694 pixels* 3:2

* Minimum recommended dimensions. Use a landscape-oriented image with an 3:2 aspect ratio for best results.

Portrait dimensions

If you are using the Portrait block type, ensure you are using a portrait-oriented image.

Width Height Aspect ratio
1040 pixels* 1560 pixels* 2:3

* Minimum recommended dimensions. Use a portrait-oriented image with an 2:3 aspect ratio for best results.

Image
An upload form that takes a image for your block.

Upload a portrait- or landscape-oriented image (depending on whether you picked the Portrait or Landscape block) that’s at least 1040 pixels wide. See the Content section above for more image dimension recommendations.

Heading
The heading text. This is the most dominant text on the slide.
Link
Add a link to a page of your choice. This is generally another page in your store.
Text
The body text for the image with text block. We recommended adding two or three sentences.

You might also be interested to know that asymmetrical features use a parallax scrolling effect. It’s a subtle animation that makes your features jump out a bit. You can see it in action on the Heritage demo’s image with text section.