Skip to content

Text columns with images

This guide describes setting your store's Text columns with images section. The section adds areas of text with corresponding images, arranged in columns, to a store page. Use text columns with images to describe products, share details about product availability, as a space to display reviews or FAQs, etc.

The following video shows a text columns with images section on a store's homepage. In the video, the option to hide the 3rd column is selected, so that the number of columns displayed on the page changes from 3 to 2.

For general guidance with modifying sections, refer to Sections overview.

Set up a text columns with images section

To set up a text columns with images section on a store page:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template to contain the text columns with images section. For example, select the Home page template.

    Note

    The text columns with images section can be added into any page, except Checkout and Giftcard pages. Refer to Shopify help: Add a section.

  2. Select Add section > Text columns with images.

    A default section contains three columns (blocks). To configure a column, refer to Configure a column inside a text columns with images section.

    The add text columns with images section option in theme editor

  3. From the side menu, select Text columns with images.

  4. Select a setting described in the following table.

Section setting nameDescription
HeadingIn the Heading text entry field, enter a title to display in the text columns with images section.
Crop imagesSelect the Crop images dropdown to set the shape of the images inside the text columns with images section. The dropdown options are: No crop, Landscape, Square and Portrait.
Text alignmentSelect the Text alignment dropdown to align text inside the text columns with images section to the Left or Center.
Theme settingsSelect Theme settings to access additional settings. Refer to Section theme settings menu.
Remove sectionSelect Remove section to remove the text columns with images section from the current page template.

Configure a column inside a text columns with images section

To configure a column (block) inside a text columns with images section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a text columns with images section.

  2. In the side menu, expand the Text columns with images section menu.

  3. To configure a column block, select a Column block from the side menu.

    To add a column, choose Add column, and then select the column block.

    Column blocks selected in the text columns with images section menu in theme editor

    Note

    Inside a text columns with images section, you can add, remove, show/ hide, or move column blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and Blocks.

  4. In Text columns with images > Column, select a block setting described in the following table.

Block setting nameDescription
Show imageSelect the Show image checkbox to show/ hide the image within the column block, inside the text columns with images section.
ImageUse the Image menu options to set up an image within the column block, inside the text columns with images section.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store's file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
HeadingIn the Heading text entry field, enter a title to display within the column block, inside the text columns with images section.
TextIn the Text field, enter text to display within the column block, inside the text columns with images section.
Call to action > LinkUse the Link text box to enter a URL or select a store page to link to. The link is displayed within the column block, inside the text columns with images section. To remove a link, select the X icon inside the Link text box.
Call to action > TextUse the Text box to provide a label for the link inside the column block.
Color > Color schemeUse the Color scheme dropdown to set the color scheme for the column block to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Remove blockSelect Remove block to remove the column block from the text columns with images section.