Supported Versions
The details shared here apply to the most recent versions of Turbo. To keep your theme up to date, check out this helpful document.
In order to use the 'page.gallery' template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.
If you are unable to currently publish your theme and would still like to set up the ‘page.gallery’ template, we have instructions on how to access unpublished templates here.
Turbo's Gallery Template
The Turbo theme includes a 'page.gallery' template which allows you to configure gallery pages using content blocks within the theme editor! There are multiple styles to choose from for the gallery style, including a Horizontal or row-based grid, a Masonry or column-based grid, and a Classic style where you specify the number of images shown per row.
As seen in our Turbo Seoul demo shop:
In This Article
- Setting up the Gallery Template
- Configuring the Gallery Page
- Creating multiple, unique Gallery Pages
- Instructional Video Guide
Setting up the Gallery Template
- Make sure you have Turbo published to access the page template.
- Head into Online Store > Pages > Add Page
- Select "page.gallery" as the Template > Template Suffix:
- Head into Customize and navigate to your Gallery page.
Configuring the Gallery Page
-
Adding Images
The Gallery page in Turbo is configured by adding Image blocks in the theme editor. Once you've navigated to your Gallery Page in the Theme Editor, under Sections > Gallery > Click 'Add Image':
-
Formatting Settings
The Formatting Settings determine the overall look of the gallery page. You can configure the gallery layout, lightbox, widedisplay, images perrow, and divider (which will show/hide an underline under the page title):
Enable Lightbox
If you choose to enable the lightbox, when you click on one of your gallery images, a popup will appear where you can click through to view all the images:
Gallery Style
The 'Gallery Style' setting comes with 3 layout options: 'Horizontal Masonry', 'Veritcal Masonry', and 'Classic'. 'Horizontal Masonry' and 'Vertical Masonry' are great options to choose when your images are different sizes and orientations. 'Classic' is best suited when images are the same in size and orientation:
Wide Display
You can choose whether you'd like your gallery images to be a standard width and sit inside the page's container, or you can enable the wide display which will remove marigns around the images and allow them to span the full screen:
Images Per Row
This setting applies to the 'Vertical Masonry' and 'Classic' gallery styles. You can choose from 2 - 5 images per row:
Creating multiple, unique Gallery Pages
If you'd like to create multiple galleries, you will need to duplicate and create an alternate Gallery template! We have a helpful video guide on duplicating templates, but you can also follow the steps here below if you wish.
Please note that this tutorial is considered an advanced customization and is not supported by Out of the Sandbox. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.
To do this, go to Admin > Online Store > Themes > Actions > Edit Code > Templates - Add a new Template. Select 'page' as the template type, and name it 'gallery-2'.
**Note: The name MUST start with 'gallery' in order to work.**
Then, in Edit Code > Templates open the original page.gallery.liquid and COPY ALL the code to your clipboard.
Next, replace the code in your new page.gallery-2.liquid with this code.
Then, within the new page.gallery-2.liquid template, look for this code:
{% section 'page-gallery-template' %}
... and replace it with this code:
{% section 'page-gallery-2-template' %}
... where you are calling on a duplicate copy of the gallery section code.
Then, in Edit Code > Sections - Add a new section, and name the section to match the change you made to the alternate gallery template (page-gallery-2-template):
Then, in Edit Code > Sections open the original page-gallery-template.liquid and COPY ALL the code to your clipboard.
Next, open your alternate gallery section code (page-gallery-2-template.liquid), delete all the existing code, and PASTE the code you just copied from the original gallery section code:
Awesome! You just created a duplicate gallery template, calling on a duplicate copy of the gallery section code. Now you're ready to assign this template to another gallery page.
To do this, go to Admin > Online Store > Pages. Select your Page for this duplicate gallery. In the bottom right corner of the page, select page.gallery-2 as the template, and save:
