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 Slideshow Section
The Turbo theme includes a flexible 'Slideshow' section that can be used for a variety of purposes on your store’s homepage. The 'Slideshow' section lets you add images that appear in sequence which can link to any URL (internal or external) and optional text and button fields.
This section is an easy way to grab your customer's attention with eye-catching banner images and bit of text to get them to engage more with your store, find out more information or explore your products.
The 'Slideshow' section can be used as a top 'hero' image, to promote sales or specials you may be having, simply as a 'gallery' to showcase some high-quality images, or to display introductory content that links out to more informative pages - just to name a few!
Additionally, you can configure some mobile specific settings for your slideshow such as image cropping and text position so you can get your images looking just right!
In order to set up the Slideshow, click into Customize (your Theme Editor) > Sections > Add Section > Slideshow.
Slideshow 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:
Text Animation
The 'text animation' setting allows you to choose which animation style for loading the slide's text. You can choose from: 'None', 'Fade In', 'Fade Up', or 'Fade Down':
Gallery Transition
The 'gallery transition' setting allows you to choose which transition style you'd like for your slides within the slideshow. You can choose from: 'Slide' or 'Fade':
Change slides every
The 'change slides every' setting allows you to adjust the amount of seconds it takes to change slides within your slideshow. Choose from 0 - 12 seconds. Choosing 0 seconds means that the customer will have to manually click through the slides instead of them changing automatically.
Enable adaptive height
In general, the slideshow section's height is determined by the largest image's height. So if you try to upload different sized images, often there would be a large whitespace underneath the smaller images as it's taking the height of the tallest image.
With the 'adaptive height' slideshow setting, this now allows the slideshow height to adjust based on the height of the individual images in each slide! No more whitespace below.
-
Content Block Settings
The content block settings are for configuring each slide block within the slideshow section. Along with your image, you can enable a 'preheading', 'heading', 'subheading', and change the 'text alignment' and 'text position'. You can enable a 'text background' if you need and add in slide links and button labels.
Examples
-
Demo Shop Examples
Here's how we set up the 'Slideshow' homepage section in each of our demo shops for Turbo!
-
Portland
Section settings
Wide display - enabled
Text animation - fade down
Gallery transition - fade
Change slides every - 6 seconds
Slide 1Preheading - added
Heading - added
Subheading - added
Text position - right
Text alignment - center
First slide link/button label - added
Highlight first button - enabled
Second slide link/button label - added
Slide 2Preheading - added
Heading - added
Text position - left
Text alignment - center
First slide link/button label - added
-
Seoul
Section settings
Wide display - enabled
Text animation - fade down
Gallery transition - slide
Change slides every - 5 seconds
Slide 1Preheading - added
Heading - added
Text position - center
Text alignment - center
First slide link/button label - added
Slide 2Heading - added
Subeading - added
Text position - right
Text alignment - center
First slide link/button label - added
Second slide link/button label - added
Highlight second button - enabled
-
Chicago
Sectionsettings
Wide display - enabled
Text animation - fade down
Gallery transition - slide
Change slides every - 6 seconds
Slide 1/2Only images uploaded
-
Dubai
Section settings
Setting
Wide display - enabled
Text animation - fade in
Gallery transition - fade
Change slides every - 6 seconds
Slide 1Heading - added
Subheading - added
Text position - left
Text alignment - left
First slide link/button label - added
Slide 2Heading - added
Text position - center
Text alignment - center
First slide link - added
Slide 3Heading - added
Subheading - added
Text position - center
Text alignment - left
First slide link/button label - added
-
-
Additional Examples
Example 1
Section settings
Wide display - enabled
Text animation - fade up
Gallery transition - slide
Change slides every - 3 seconds
Slide 1Heading - added
Subheading - added
Text alignment - center
Text position - center
Slide 2Heading - added
Text alignment - center
Text position - center
First button label & slide link - added
Highlight first button - enabled
Example 2
Section settings
Wide display - enabled
Text animation - fade down
Gallery transition - slide
Change slides every - 6 seconds
Slide 1Heading - added
Text alignment - left
Text position - left
p>First button label & slide link - addedHighlight first button - enabled
Slide 2 & 3Heading - added
Text alignment - center
Text position - center
Display text background - enabled
First button label & slide link - added
Highlight first button - enabled
First second label & slide link - added
Highlight second button - enabled
Mobile layout
When viewed on a mobile device, the Slideshow section either stacks vertically with the banner image displaying at the top and the text and buttons display underneath, or with the text/button displaying on top of the image – depending on your 'mobile' settings.
The 'mobile' settings allow you to choose the text position and specify different colors for text if you wish.
Show text below image
By default, the text and buttons will display below the banner image on mobile. If you'd like the text to display on top of the banner image, you can disable the 'show text below image' setting.
Text
You have the option to choose a specific color for the text on mobile.
Image cropping
This setting is located within the content block settings in each Slide.
By default, the section displays the entire banner image on mobile without any cropping/zooming which typically results in a narrow banner. If you'd like to allow a greater display area on mobile, you can enable 'image cropping' which will crop and zoom in on the image (left, center, right).