“What exactly is the image with text section and how does it work?”

The image with text section can be configured on your home page. Each image with text section that allows you to create up to five content blocks, each with its own call to action.

A single featured content block

In the image below you can see three content blocks:

Image with text criss-cross layout

Each block can be configured with its own layout. See Content block settings for more information about content setup.

On mobile devices, the layouts respond to the size of the customer’s screen. Images become full-width, and the text appears underneath each image.

Image with text on a mobile device

Headings
The color of the headings for each image with text block.
Text
The color of the text for each image with text block.
Background
The color of the background for each image with text block.
Border
The color of the border separating each image with text block.

Content block settings

Each image with text block has its own content block settings. This means that you can mix and match layouts as you add up to five content blocks. You could make an eye-catching criss-cross pattern or bolder, more straightforward rows.

We recommend preparing product and marketing images that are at least 400 pixels wide by 400 pixels high (square images), or at least 800 pixels wide by 400 pixels high (landscape-oriented images).

You can mix and match images of these sizes, along with the image with text content block settings, until you’re satisfied with the resulting layout.

Block image
An image upload form for a content block’s image.
Width Height Aspect ratio
400 pixels* 400 pixels* 1:1 (square)
or    
800 pixels* 400 pixels* 2:1 (double-wide)

* Minimum recommended dimensions. Using square or landscape oriented product images will result in less image cropping. Use these exact dimensions (1:1 or 2:1 aspect ratio images) for the best results.

Image width
Choose the image width for the selected content block. The settings available are 30%, 50% and 70%. See examples
Image position
Choose whether the image should appear on the Left or the Right side of the page. See examples
Text alignment
Align the text for this block. Choose from Left, Center or Right alignment.
Heading text
The heading text. This is the most dominant text on the block.
Text
This is typically used as description and should be kept to a short sentence or two.
Button text
The button text.
Link
Create a link to a page of your choice. This is generally another page in your store.

Image width and position settings

Using the image width and image position settings, you can create many different layouts for your image with text sections: from checkerboard patterns, to criss-crossing layouts, to straightforward rows and everything in between.

Here’s an example of two content blocks, both using the Image width setting of 30%, but using different Image position settings (one Left, the other Right):

Two image with text content blocks using the 30% image width setting

Here’s an example of two content blocks, both using the Image width setting of 50%, but using different Image position settings (one Left, the other Right):

Two image with text content blocks using the 50% image width setting

Here’s an example of two content blocks, both using the Image width setting of 70%, but using different Image position settings (one Left, the other Right):

Two image with text content blocks using the 70% image width setting

You can see some examples of possible layouts over on the Bright and Chic demos.

Criss-cross layout

Rows layout

How are my images cropped?

Because everybody has laptops and phones with different screen sizes, your image with text section may appear differently to different customers.

It is important to realize that your images will be cropped to some extent. This is why we recommend images with a 1:1 aspect ratio (square) or 2:1 aspect ratio (double-wide) for this section. A portrait-oriented photo would be too tall for these wider blocks, and much of the top and bottom would be cropped out.

2:1 (double-wide) images

When you are choosing a wide image for this section, consider the diagram below. The lines in the image demonstrate how much of your uploaded file could get cropped.

Image with text section with a 2:1 image

1:1 (square) images

When you are choosing a square image for this section, consider the diagram below. The lines in the image demonstrate how much of your uploaded file could get cropped.

Image with text section with a 1:1 image

If you are using the 50% or 70% image width setting for a square image, additional content from the top and bottom of the image could end up being cropped. For square images, we recommend only using the 30% image width setting.