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

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 stretch out into full-width sections:

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

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 OS2 Theme Editor tutorial.

  1. In your theme editor (Customize), select the Template you wish to edit from the dropdown menu in the top bar.

    Drop-down menu of page templates
    Drop-down menu of page templates
  2. Click + Add section and select Text columns with images from the Theme Sections list.

    Add section button
    Add section button
  3. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your sections:

    Shopify section drag handles
    Shopify section drag handles

Add Columns

Add up to 15 Columns with a featured image, headings, and a call-to-action button.

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

    This opens the Column block settings.

  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.

    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. Change the Heading text.

    We recommended a short title of just a few words.

  4. Change the Subheading text.

    We recommend two to three short sentences.

    We also recommend trying to keep the subheading text for all Columns around the same length.

  5. Adjust the Max width of text of the Column text using the slider.

    The width will need to be adjusted when there are two columns per row on desktop.

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

  6. Add a Button label and Button link to display a call-to-action button underneath the column.

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

    To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

  7. Return to the list of your template sections in the sidebar and repeat this process until you've added all the Column blocks you need.

  8. (Optional.) Click and hold the ⋮⋮ drag icon to change the order of your Column blocks:

    Shopify content blocks drag handles
    Shopify content blocks drag handles

    Use the Remove block button in the block settings to remove a Column block entirely.

  9. Remember to click Save in the top-right corner.

Customize the Text columns with images section

The Text columns with images section settings apply to all Column blocks. You can set the number of columns per row to display, change the feature image shape, adjust the text alignment, and enable the alternate section color.

  1. Click on the Text columns with images section.

    This opens the Text columns with images section settings.

  2. Use the Columns per row slider to adjust the number of Column blocks per row, between 2, 3, or 4.

    On mobile, Column blocks are displayed in a single column.

  3. Change the Image shape of the feature images to either Round or Square.

  4. Select the Text alignment to make the Column content Left or Center aligned.

    This option applies to the Column image, heading, subheading, and button.

  5. (Optional.) Enable the Alternate section color.

    See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

  6. Remember to click Save in the top-right corner.

Text columns with image section settings

The following settings are found by clicking directly on the section title:

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 Column content as Left or Center aligned.

This option applies to the Column image, heading, subheading, and button.

Use alternate section color

Apply the alternate section colors as chosen in your Theme Settings.

See Spark's Color settings guide to learn how to create a secondary color scheme with alternate section colors.

Column block settings

The following settings are found by clicking directly on a Column block:

Configuration Settings

Image

Select or upload a feature 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 block.

We recommended a short title of just a few words.

Subheading

Change the subheading text. We recommend two to three short sentences.

We also recommend trying to keep the subheading text for all Columns around the same length.

Max width of text

Use the slider to adjust the maximum width of the Column text. The width will need to be adjusted when there are two columns per row on desktop.

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

Button link

Select or paste a link for the call-to-action button.

To learn how to change the style and shape of buttons across your site, see the Style section in our Theme Settings article.

Button label

Add custom text for your call-to-action button.

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

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.