Turbo Guide: Text Columns with Images

Supported Versions

The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.

In This Article

• Text Columns with Images Settings
• Examples
• Mobile Layout

Using the Text Columns with Images Section

The Turbo theme includes a highly customizable 'Text Columns with Images' homepage section. The 'Text Columns with Images' section can be used to create an assortment of layouts by combining text, images, borders and buttons in up to 5 columns.

The 'Text Columns with Images' section can be used to focus on images and is great if you’re looking to feature or highlight promotions, products/services (single or multiple), or really - anything in your shop! This section can also be configured as a magazine article layout style which is perfect if you have some brief text with an accompanying image that you’d like styled in an elegant way. This section is quite flexible and the layout configurations are endless.

In order to set up the Text Columns with Images section, click into Customize (your Theme Editor) > Sections > Add Section> Text Columns with Images.

Text Columns with Images Settings

Show Image

In each of the columns, there is an option to enable the 'show image' setting which will add an image at the top of your column:

Heading/Heading Size/Text

This section comes with the option to enable a 'heading' as well as display additional text. You can also choose for the 'heading size' to be 'regular' or 'large':

Text Alignment

Here you can choose the alignment of your text and buttons (if you've added any!) Choose from left, center, or right:

Button Label/Button Link

You can choose to enable the 'button label' and 'button link' to add a button in your columns! This button can be linked in internal or external pages. You can change the 'button style' to either 'rounded', 'squared', or 'pill shaped' under Theme Settings > Colors > Buttons.

Border Style

You can enable a 'border' for each of your columns. The options are for the 'border style' are 'box', 'quote', and 'none':

Examples

• Demo Shop Examples
• Additional Examples

• Demo Shop Examples

  Here's how we set up the 'Text Columns with Images' homepage section in our demo shops for Turbo!

  • Chicago
  • Florence

  • Chicago

    Section settingsColumn 1

    Heading - added

    Heading size - large

    Text alignment - left

    Border style - quote

    Column 2

    Text - added

    Text alignment - left

    Border style - none

    Column 3

    Text - added

    Text alignment - left

    Button label - added

    Button link - added

    Border style - none

  • Florence

    Section settingsColumn 1 & 3

    Show image - enabled

    Border style - none

    Column 2 & 4

    Heading - added

    Heading size - large

    Text - added

    Text alignment - left

    Button label - added

    Button link - added

    Border style - none

• Additional Examples

  Example 1

  
  Section settingsColumn 1

  Heading - added

  Heading size - large

  Text alignment - left

  Border style - quote

  Column 2 & 3

  Text - added

  Text alignment - left

  Border style - none

  Column 4

  Show image - enabled

  Text alignment - left

  Button label & button link - added

  Border style - none

   

  Example 2

  
  Section Settings Column 1 - 4

  Show image - enabled

  Heading - added

  Heading size - regular

  Text alignment - center

  Border style - box

  Column 5

  Heading - added

  Heading size - regular

  Text alignment - center

  Border style - none

  Button label & button link - added

Mobile layout

When viewed on a mobile device, the 'Text Columns with Images' section will stack vertically: