Turbo Guide: Image with Text

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

• Image with Text Settings
• Examples
• Mobile Layout

Using the Image with Text section

The Turbo theme includes a highly configurable 'Image with Text' section which is available on the homepage. The 'Image with Text' section is perfect is you want to prominently display images. Whether these are product related, company related, or lifestyle shots; this section will show off any big or important images you have along with any applicable text and a call to action button.

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

Image with Text Settings

• Section Settings
• Content Block Settings

• Section Settings

  The section settings determine the look and layout of this section!

  
  
   

  Wide display

  You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:
  
  

   

  Images per row

  Here you can choose how many 'Image with text' blocks you'd like to show per row. Choose from 1 or 2:
  
  

   

  Text alignment

  Here you can choose the alignment of your text and button: left, center, or right:
  
  

   

  First image position

  This setting allows you to choose whether your first content block's image shows up on the left or the right. The following content blocks that you add, will then alternate so they appear staggered:
  
  

• Content Block Settings

  The content block settings are for configuring each image with text block. You can choose to add an image, enable image cropping, heading, text, button label/link, and colors for each 'image with text' block.
  
  
  
  

Examples

• Demo Shop Examples
• Additional Examples

• Demo Shop Examples

  Here's how we set up the 'Image with Text' homepage section in each of our demo shops for Turbo!

  • Portland
  • Seoul
  • Florence
  • Dubai

  • Portland

    
    
    Section settings

    Wide display - enabled

    Images per row - 1

    Text alignment - center

    First image position - right

    
    
    Section settings

    Wide display - enabled

    Images per row - 1

    Text alignment - left

    First image position - right

  • Seoul

    
    
    Section settings

    Wide display - enabled

    Images per row - 1

    Text alignment - center

    First image position - left

    
    
    Section settings

    Wide display - enabled

    Images per row - 1

    Text alignment - center

    First image position - left

  • Florence

    
    
    Section settings

    Wide display - enabled

    Images per row - 1

    Text alignment - left

    First image position - right

  • Dubai

    
    
    Section settings

    Wide display - disabled

    Images per row - 1

    Text alignment - left

    First image position - left

• Additional Examples

  Example 1

  
  Section settings

  Images per row - 2

  Text alignment - left

  First image position - left

   

  Example 2

  
  
  Section settings

  Images per row - 1

  Text alignment - center

  First image position - left

Mobile Layout

When viewed on a mobile device, regardless of your 'first image position', the image and text will stack vertically with the image showing first: