The Text columns with images section lets you add multiple columns of text to your home page or collection pages. Each column has 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::
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 section.
Set up text columns with images 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 settings until you see the Add section button.
Choose Text columns with images from the list of sections.
This opens the Text columns with images settings.
Set how many Columns per row should be displayed.
You may want to come back to this after adding some columns.
Set the Max image width for all of the column images.
Note that images appear on top of a heading and some column text. You may want to come back to this after adding some columns.
Check the Show image in circle checkbox to center-crop all images into circles.
Here's an example with images in circles:
And an example with images not in circles:
Return to the list of Home page sections to find your new Text with columns 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:
Columns per row
Choose how many columns should be displayed per row. Choose between 1 and 4 columns per row.
Max image width
Choose how wide all of image should be. This helps to ensure all your columns appear uniformly.
Choose between 70px and 200px.
Show image in circle
Check this checkbox to center-crop your images into circles.
If this option is left unchecked, then images are displayed in their original aspect ratio.
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. Here's how.
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.
We recommend that each image you use in the section is the same size and shape. Use the Image max width and Show image in circle settings in the section to change the presentation of every image in the section.
Add Text.
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 features you need.
You can also use the Remove block button to remove a block from this section entirely.
Click Save.
Settings reference
Each column has the following settings:
Image
Choose or upload an image.
Text
Add 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.
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 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.