Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Text columns with images

The Text columns with images displays multiple columns of text blocks with feature images, great for highlighting your values, how your company works, or explaining key elements of your product.

Text columns with images
Text columns with images

On mobile devices, the columns display as separate full-width sections.

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

Text columns without images
Text columns without images

Add a text columns with images section

The Text columns with images section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select text columns with images.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add columns

Add up to 6 Columns with a featured image, headings, and a link.

In the theme editor (Customize):

  1. Click + Add Column and/or click on the Column block you want to edit.

  2. Under Image, click Select image to upload an image or icon to display at the top of the column.

    We recommend a 160px x 160px .png image and that all images are the same shape and size.

    Typically PNG icons with transparent backgrounds work the best here.

    If you would like to add an icon, there are plenty of sites that offer high-quality icons in many styles, like The Noun Project and Iconfinder.

  3. To make your images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of each image.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  4. If your Column images are different sizes, use the Max image width slider to make them uniform.

    Choose to display a maximum width between 10% - 100%.

    Text columns with images, smaller max image width
    Text columns with images, smaller max image width
  5. Change the Heading text.

    We recommended a short title of just a few words.

  6. Change the Subheading text displayed below the image and heading.

    We recommend two to three short sentences.

    We also recommend trying to keep the subheading text for all Columns around the same length so they appear clean and uniform.

  7. Adjust the Max width of text of your headings using the slider.

    Experiment with this setting to find a uniform visual shape for your text.

  8. Add a Link and Link text to display a clickable link underneath the column.

    Column with link text
    Column with link text

    The most effective link text ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  9. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  10. Click Save.

Change the section headings and style

Add section headings to display above the columns and adjust the style and layout of the whole section.

In the theme editor (Customize):

  1. Click on the Text columns with images section to open the section settings.

  2. (Optional.) Add Heading text to display a title at the top of the section.

    We recommend keeping this to one or two words.

  3. (Optional.) Add Subheading text to display below the heading.

    Use the formatting buttons to add bold, italic, or linked text.

  4. Choose a Text alignment for this section, either Left or Center.

  5. (Optional.) Choose to enable the Outline section style for an alternate look.

    This option removes the section background and adds a border around the section, which uses your store's border color setting.

    Outline section disabled (left) and enabled (right)
    Outline section disabled (left) and enabled (right)
  6. Remember to click Save.

Text columns with images section settings

The Text columns with images section has the following settings:

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

Max width of text

Use the slider to adjust the maximum width of the heading and text.

Experiment with this setting to find a clean visual shape for your text.

Text alignment

Choose how the text in this section should be aligned. Either Left or Center.

Outline section

Enable this option to remove the section background and add a border around the section, which uses your store's border color setting.

Column block settings

Each Column block has the following settings:

Configuration Settings

Image

Choose or upload an image.

Image aspect ratio

Choose to display your images as Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of each image.

Max image width

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.

Add a link to another page or website.

Add custom text for your column link.

The most effective link text ask your customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

Max width of text

Use the slider to adjust the maximum width of the heading and text.

Experiment with this setting to find a clean visual shape for your text.

Using text columns with icons

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.