We've recently relaunched all three of our themes. Watch the launch video here.

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.

Text columns with images
Text columns with images

On mobile devices, the columns stretch out into full-width sections:

Text columns with images on mobile
Text columns with images on mobile

The Text columns with images section can be used on the following page templates:

Add Text columns with images to the home page

To set up this section:

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

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Scroll to the bottom of the home page sections and choose Add section.

    Add section button
    Add section button
  3. Choose Text columns with images from the list of sections.

    This opens the Text columns with images settings.

  4. Choose to display 2, 3, or 4 Columns per row.

  5. Choose the Image shape to be Round or Square.

  6. Set the Text alignment to display the heading and subheading on the Left or Center of the images.

  7. 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 you Home page sections:

    Shopify section drag handles
    Shopify section drag handles
  8. Use the Add column button to add a text column with image.

    For more information, see the Add column section.

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

Add Text columns with images to other pages

You can add a Text columns with images section to your Collections and Products templates.

To enable a Text columns with images section on these pages:

  1. From your Customize theme editor, choose Collections or Products from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Click on the arrow beside Collection features or Product features.

  3. Use the Add block button to select the Image with features section.

    This opens the settings for the Text columns with images section.

    You can add up to 4 columns

  4. Choose to display 2, 3, or 4 Columns per row.

  5. Choose the Image shape to be Round or Square.

  6. Set the Text alignment to display the heading and subheading on the Left or Center of the images.

  7. Select an Image, change the Heading and Subheading text, and add a Button link and Button label for each column.

    If you want to link to a external page, you need to type (or copy and paste) the full URL starting with https://. For example: https://example.com/abc123.

  8. Return to the list of Product or Collection features. Use the drag handles to rearrange the order of the blocks:

    Shopify content block drag handles
    Shopify content block drag handles
  9. Use the Save button in the top-right corner when you are finished editing.

Text columns with image settings

The Image with features section has the following settings:

Configuration Settings

Columns per row

Choose to display 2, 3, or 4 features per row.

Image shape

Choose to display the image as Round or Square.

Text alignment

Choose to display the headings and subheadings of each feature to the Left or Right of each image.

Use alternate selection color

Set the background color to the Alternate Section Color as chosen in your Color Settings.

See Spark's Color settings documentation to learn how to set Alternate section colors.

Add columns

You can add many columns to the Text columns with images section. Here's how.

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

  2. Use the Add Column button to add a new column.

  3. Use the Select image button to select or upload an image.

  4. Add a Heading.

  5. (Optional.) Add a Subheading.

  6. Add a Button link and Button label.

    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.

  7. Return to the list of Home page sections to find your Text columns with images section.

  8. Repeat this process until you've added all the columns you need.

  9. You can change the order of the column blocks by using the drag handles:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    You can also use the Remove block button to remove a column from this section entirely.

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

Column settings

Each column has the following settings:

Configuration Settings

Image

Choose or upload an image.

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.

Heading

Change the heading displayed above the column.

We recommend keeping this to just a few words long.

Subheading

Add subheading 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.

Button link

Add a link to another page or website.

Button label

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.

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.