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 Gallery Section
The Turbo theme includes an adaptive 'Gallery' section which is available on the homepage. The 'Gallery' section is an excellent way to integrate your lifestyle and product shots and presents your visuals in an aesthetically pleasing way.
The 'Gallery' section is completely configured in within the theme editor and offers 3 style options for your layout as well as an option to enable a 'lightbox' which opens a modal window to scroll through.
In order to set up the Gallery, click into Customize (your Theme Editor) > Sections > Add Section > Gallery.
Gallery Section 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:
Gallery style
This section comes with 3 different layout styles: Horizontal masonry, Vertical masonry, and Classic.
'Horizontal masonry' places images in optimal position based on available horizontal space.
'Vertical masonry' places images in optimal position based on available vertical space.
'Classic' places images in a standard grid-like design.
Images per row
This setting applies to 'Vertical masonry' and 'Classic' gallery styles only! Choose from 2 - 5:
Enable lightbox
You can choose to enable a lightbox for your gallery. When enabled, when you click on an image in the gallery a popup modal will appear which you can click through by using the arrows on your keyboard or the arrows that appear on the image on hover:
-
Content Block Settings
The content block settings are where you upload each image that you'd like to add to your gallery.
Examples
-
Demo Shop Examples
Here's how we set up the 'Gallery' homepage section in our Seoul demo shop!
Seoul
Section Settings
Wide display - enabled
Gallery style - horizontal masonry
Enable lightbox - enabled
-
Additional Examples
Example 1
Section settings
Gallery style - vertical masonry
Images per row - 4
Example 2
Section settings
Wide display - enabled
Gallery style - classic
Images per row - 4
Enable lightbox - enabled
Mobile Layout
When viewed on a mobile device, if your 'Gallery style' is set to 'Vertical masonry' or 'Classic', the gallery images will stack vertically:
If your 'Gallery style' is set to 'Horizontal masonry', the gallery images will stack vertically as well. However, if there are smaller images these will still be placed based on available horizontal space. Meaning that if there's room, some smaller images could be placed beside each other:
