Text columns with images

The Text columns with images section lets you a multiple columns of text to your home page, each column with its own image and heading. You can use it to tell a story, explain how your company works, or list out the things that make your store unique.

On mobile devices, the columns stretch out into full-width sections, displayed from top to bottom::

There are many ways to use this section. If you need tips for using it with icons as images, check out our Using text columns with icons article.

Set up a text columns with images section

To set up this section:

STEPS

From your Customize theme editor, choose Home page from the pages drop-down menu at the top of the screen.
Scroll down the list of home page sections and click the Add section button.
Choose Text columns with images from the list of sections.
This opens the text columns with images settings.
Choose the Style for the section, either Default or Contrast.
If you select Contrast, this section uses Lorenza's contrast colors.
Set how many Columns should be displayed per row.
Choose between 1 and 4 columns per row. After adding some columns, you can always change this again if it doesn't look right.
Add a Small heading, Heading, and Subheading text, as well as a Link and Link text.
These optional fields are displayed as a header above your columns.
Use the Text alignment and Max width of text settings to tweak the look of your section heading.
Return to the list of Home page sections to find your new text columns with images section.
Use the drag handles to rearrange the order of your Home page sections:
Add some columns by using the Add Column button.
For more information about the settings for each column, see the Add column article.
Click Save.

Settings reference

The text columns with images section has the following settings:

Style

Choose a section style, either Default or Contrast. This affects the colors of the current section. Learn more about contrast colors.

Columns

Choose how many columns should be displayed per row. Choose between 1 and 4 columns per row.

Small heading

Change the small heading text displayed above the main heading.

Heading

Add heading text to be used.

We recommend keeping this to just a few words long.

Text

Add subheading text to be displayed below the heading text.

We recommend keeping this to a short sentence or two.

Link text

Change the text for a link in the header.

Link

Change the link for the link text for the section. If you're adding an external link, you need to type (or copy and paste) the full URL, starting with https://. For example: https://example.com/abc123.

Text alignment

Choose how the heading and subheading text and buttons should be displayed. Either Left or Center aligned.

Max width of text

Using the slider, choose how wide the heading text should appear, at a maximum.

For more information about settings for each column, see Add column.

Add columns

You can add many columns to the Text columns with images section. This article explains how to add one.

Add a column

STEPS

Make sure you are already editing the Text columns with images section that you want to change.
Use the Add Column button to add a new column.
Choose or upload an Image.
Use the Max image width setting to tweak how big or small the image should appear.
Add a Heading and Subheading.
We recommend making sure your text is the same length across all columns in the section.
Use the Max width of text setting to tweak how wide the text in this column should appear.
Add a Link and Link text.
The link is displayed below the text block.
Return to the list of Home page sections to find your Testimonials section with the content blocks nested below.
You can change the order of the blocks by using the drag handles:
Repeat this process until you've added all the testimonials you need.

You can also use the Remove block button to remove a testimonial from this section entirely.

Click Save.

Settings reference

Each column has the following settings:

Image

Choose or upload an image.

Heading

Add heading text.

We recommend keeping this to just a few words long.

Subheading

Add subheading text.

We recommend a single, short paragraph. We also recommend making sure the paragraph is about the same length as the paragraphs in your other text columns.

Max image width

Using the slider, choose how wide the current column's image should appear.

Link

Add a link to another page or website.

Link text

Add the anchor text for the link. The link cannot be displayed without it.

Max width of text

Using the slider, choose how wide the heading text should appear, at a maximum.

Settings reference

There are many ways you can use the Text columns with images section. One common way would be uploading icons as images. You can see an example of this in the image below.

Tips for making this section look great

If you want to use icons with the Text columns with images section, here are some tips for making the most of them:

STEPS

Find some high quality icons.
There are plenty of sites that offer high-quality icons in many styles, like The Noun Project and Iconfinder.
Use PNG image files.
PNGs support transparency, meaning a good icon does not have a background color and doesn't need to be changed when being used on two different page background colors.
Whether you're downloading an icon pack or making your own icons, we recommend making sure they have a transparent background.
Use the section's Max image width setting.
In the Text columns with images section settings, you can set the max width that all column images should be displayed at. If you're using icons, you probably want to use a smaller maximum width.
This depends on the style of your icons, but we recommend trying somewhere between 100px and 175px.

You can learn more about setting up a text columns with images section from the Text columns with images article.

Home page
Gallery
Rich text