The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Gallery Page
The Flex theme includes a 'Gallery' page template which is a perfect way to create lookbooks, integrate your lifestyle and product shots, and beautifully presents your visuals.
The 'Gallery' page template is completely configured in within the theme editor. The images are added as content blocks and can be optionally linked to a URL. The gallery includes 3 style options for your layout: classic, horizontal masonry and vertical masonry, as well as an option to enable a 'lightbox' which opens a modal window to scroll through.
Custom CSS and layout options can be included in this section as well for further flexibility.
When adding a Page in your Shopify Admin (Online Store > Pages), the page.gallery template is named
page.gallery and can be selected under Template > Template Suffix:
Once you've added your page content, you can head into the Theme Editor (Customize) > Select your Page.gallery from the drop-down page selector. Your theme editor on the left will then update with the page settings.
Gallery Page Settings
This gallery page template includes 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.
This setting applies to the 'classic' gallery style only! If you're using images that are different in size and/or image aspect ratio, they may look unaligned with large white space in between. To make them uniform, you can enable the 'crop images' setting which will align the different sized images by cropping them.
When enabled, the 'show gutter' setting will add space (margin) in between your gallery 'image' content blocks. If you don't want space between the images and want them to be flush with each other, you can disable this setting.
Images per row
This setting applies to 'Vertical masonry' and 'Classic' gallery styles only! Choose from 2 - 5 images per row.
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 within the lightbox.
Overlay and Icons
If the 'lightbox' is enabled, or, if you have links added to your images, you can then choose the 'overlay' and 'icons' color settings for the overlay that appears when you hover over your gallery images.
The layout settings include options to adjust the spacing and width for the page.
The options under the 'width' setting include: 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width.
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
In the advanced settings, you can add in your own CSS class and custom CSS.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Adding Gallery Images
The gallery images get added as content blocks through the Theme Editor (Customize) by navigating to your Gallery page, under Sections > Gallery > scroll down to Add image.
Here, you can select an image and optionally add a link for the image as well!
If you choose to link your image, when that image is hovered over, a link icon will appear. If you have both the 'lightbox' and 'link' added, the magnifying glass icon and link icon will appear on hover!
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: