Supported Versions
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 Section
The Flex theme includes a versatile 'Gallery' section available on the homepage. The 'Gallery' section is an excellent way to integrate your lifestyle and product shots and beautifully presents your visuals.
The 'Gallery' section 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.
In order to set up the Gallery, click into Customize (your Theme Editor) > Sections > Add Section > Gallery.
Gallery Section Settings
The 'Gallery' section settings determine the look and layout of this section! The settings are divided into general, layout and advanced settings.
General Settings for the Gallery
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.
Crop images
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.
Show gutter
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.
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 within the lightbox.
Colors
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.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Gallery section loads in.
Width
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.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
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)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!
Examples
Example 1 - Fresh demo shop
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:
