Text columns with images

The Text columns with images section lets you add columns of text to your home page or product pages. Each column has its own image, heading and subheading. On desktop, the columns display three per row. 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.

Of course, images are optional if you would rather just display one, two or three columns of text.

This section can be used on the following page templates:

The home page template
The Product pages template

Set up a text columns with images section on the home page

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.
Add a Heading and Subheading to the whole section.
These appear above the row of columns.
Choose whether or not to make it an Outline section.
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 using the Add Column button.
For more information about the settings for each column, see the Add column article.
Click Save.

Settings reference

When being added to the home page, the text columns with images section has the following settings:

Heading

Add optional text for the heading of this section.

Subheading

Add an optional subheading or description. We recommend keeping this to a line or two.

Outline section

When you enable an Outline section setting, it removes the section background, letting your store's global background color to show through. It then adds a border around the section, which uses your store's border color setting.

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

Set up a text columns with images section on the product page

In addition to the home page, this section can be added to the Product pages template.

STEPS

From your Customize theme editor, choose Products from the pages drop-down menu at the top of the screen.
Click the arrow next to the Text columns with images section.
Add some columns using the Add Column button.
For more information about the settings for each column, see the Add column article.
Choose whether or not to make it an Outline section.
Click Save.

Settings reference

The text columns with images section has the following settings on the product page template:

Outline section

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

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.
Select or upload an Image.
Typically PNG icons with transparent backgrounds work the best here.
Set Max image width
The minimum width is 10% of the column, and the maximum width is 100% of the column.
Add a Heading.
We recommend keeping this to one or two words.
Add a Subheading.
We recommend making sure your text is the same length across all columns in the section.
Add a Link and Link text.
The link is displayed below the text block.
If you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://example.com/abc123.
Return to the list of Home page sections to find your Text columns with images 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 columns 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.

Max image width

You can manually set how large the column's image should appear.

The minimum width is 10% of the column, and the maximum width is 100% of the column.

Heading

Add text for the heading of the column.

Subheading

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.

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.

Note that if you want to link to a external page, like an Instagram profile page, you need to type (or copy and paste) the full URL starting with https://. For example: https://example.com/abc123.

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 transparency background.
Use the columns' Max image width settings.
You can set the max width that the column image 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 70px and 100px.

Home page
Product pages