In the image below you can see three content blocks:
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.
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.
|400 pixels*||400 pixels*||1:1 (square)|
|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.
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):
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):
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):
You can see some examples of possible layouts over on the Bright and Chic demos.
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.
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.
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.
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.