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
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 if 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
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
Here's how we set up the 'Image with Text' homepage section in each of our demo shops for Turbo!
-
Portland
Section settingsWide display - enabled
Images per row - 1
Text alignment - center
First image position - right
Section settingsWide display - enabled
Images per row - 1
Text alignment - left
First image position - right
-
Seoul
Section settingsWide display - enabled
Images per row - 1
Text alignment - center
First image position - left
Section settingsWide display - enabled
Images per row - 1
Text alignment - center
First image position - left
-
Florence
Section settingsWide display - enabled
Images per row - 1
Text alignment - left
First image position - right
-
Dubai
Section settingsWide 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 settingsImages 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: