Gallery Section in the eComm Performance Theme

Gallery Section in the eComm Performance Theme

Supported Versions: The details shared in this article apply to the updated version of eComm Performance.
 
The eComm Performance theme has a section where you can display only images! The 'Gallery' section is a great way to showcase your lifestyle and product shots and features your visuals in an eye-catching way. 

This section can be configured entirely inside the theme editor and gives you three different style options for your layout and the option to select a 'lightbox,' which opens a window to scroll through.

To include and set up the Gallery, go into Customize (your Theme Editor) > Sections > Add Section > Gallery.

Section Settings

The section settings help design the look and layout of the entire section.

Content Block Settings

The content blocks are where you upload each of your images that you want to be added to your gallery.


Wide Display

You have the option to feature the gallery as a 'wide display,' so the section will spread out to the entire width of the screen. If this feature is not enabled, the section will sit in a 'container' on the homepage:

 
The gallery section can be displayed with three different layout styles: Classic, Horizational masonry, and vertical masonry.
  1. 'Classic' puts the images in a standardized grid-like design.
  2. 'Horizontal masonry' puts the images in an optimal position based on the available horizontal space.
  3. 'Vertical masonry' puts the images in an optimal position based on the available vertical space.

Images Per Row

This setting only applies to the 'Vertical masonry' and 'Classic' styles. You can choose anywhere from two to five images. 

Enable Lightbox

You can enable a lightbox for your gallery. What this does is when you click on an image featured in the gallery, a popup will appear where you can go through all the images by using the arrows either on the images or on your keyboard:

Demo Shop Example

Here is an example of how our 'Gallery' homepage section is set up in our eComm Performance demo shop!


Section Settings

  1. Wide display: Enabled.
  2. Gallery style: Horizontal Masonary.
  3. Number of Columns: 3
  4. Enable lightbox: Enabled.

Mobile Layout

When the gallery section is being viewed on a mobile device, and if it set to 'Vertical masonry' or 'Classic,' the images will automatically stack vertically:

If your style is set to 'Horizontal masonry,' the images will also stack vertically. However, if some of your images are smaller, these will be placed on available space. This means that some of the smaller images may be placed next to each other if there is room.