Back to the index

Text columns with images

The Text columns with images section lets you a 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 article.

This section can be used on the following page templates:

• The home page template
• The collection pages template

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

To set up this section:

1. From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.

   

2. Scroll down the list of home page settings until you see the Add section button.

   

3. Choose Text columns with images from the list of sections, and press the Add button.

   This opens the text columns with images settings.

4. Set how many Columns per row should be displayed.

   You may want to come back to this after adding some columns.

5. 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.

6. 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:

   

7. Add some columns using the Add column button.

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

8. Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:

   

9. Use the Save button in the top-right corner when you are finished editing.

Settings

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 50px 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.

Set up a text columns with images section on other pages

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

1. From your theme’s “Customize” screen, choose Collection pages from the pages drop-down menu at the top of the screen.

   

2. Scroll down the list of available settings until you find Text columns with images. Click on it.

3. Check the Enable checkbox to show the section.

4. Set how many Columns per row should be displayed.

   You may want to come back to this after adding some columns.

5. 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.

6. Check the Show image in circle checkbox to center-crop all images into circles.

   

   Note that when this setting is disabled, Ira uses your images’ aspect ratio. The images are not center-cropped into 1:1 squares:

   

   Note that, when this setting is disabled, images are displayed in their original aspect ratio.

7. Add some columns using the Add column button.

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

8. Use the Save button in the top-right corner when you are finished editing.

Settings

The text columns with images section has the following settings:

Enable

Check this checkbox to enable this section.

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 50px 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. This article explains how to add one.

Add a column

1. Make sure you are already editing the Text columns with images section that you want to change.

2. Under Content, use the Add column button to add a new column.

3. Choose or upload an Image.

   You can’t change the presentation of an individual image. Use the Image max width and Show image in circle settings at the top to change the presentation of all images in the section.

4. Add Text.

   We recommend making sure your text is the same length across all columns in the section.

5. 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.

6. Repeat this process until you’ve added all of the columns you need.

   You can reorder the content blocks using the drag handles:

   

7. Use the Save button in the top-right corner when you are finished editing.

Settings

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.

You can use the Remove content button inside any block to remove it entirely.

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.

Using text columns with icons

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:

1. Find some high quality icons.

   There are plenty of sites that offer high-quality icons in many styles, like The Noun Project and Iconfinder.

2. 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.

3. 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.

Related articles

• Home page
• Collection pages