Turbo Guide: Slideshow

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

• Slideshow Settings
• Examples
• Mobile Layout

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
• 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:
  
  

   

  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
• Additional Examples

• Demo Shop Examples

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

  • Portland
  • Seoul
  • Chicago
  • Dubai

  • Portland

    Section settings

    Wide display - enabled

    Text animation - fade down

    Gallery transition - fade

    Change slides every - 6 seconds

    Slide 1

    Preheading - 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 2

    Preheading - 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 1

    Preheading - added

    Heading - added

    Text position - center

    Text alignment - center

    First slide link/button label - added

    Slide 2

    Heading - 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/2

    Only images uploaded

  • Dubai

    Section settings

    Setting

    Wide display - enabled

    Text animation - fade in

    Gallery transition - fade

    Change slides every - 6 seconds

    Slide 1

    Heading - added

    Subheading - added

    Text position - left

    Text alignment - left

    First slide link/button label - added

    Slide 2

    Heading - added

    Text position - center

    Text alignment - center

    First slide link - added

    Slide 3

    Heading - 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 1

  Heading - added

  Subheading - added

  Text alignment - center

  Text position - center

  Slide 2 

  Heading - 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 1

  Heading - added

  Text alignment - left

  Text position - left

  p>First button label & slide link - added

  Highlight first button - enabled

  Slide 2 & 3

  Heading - 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).