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.

    • Related Articles

    • Featured Products Section - eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using the Featured Products Section The eComm Performance theme has a 'Featured Products' section which is an easy way to showcase products and ...

    • Rich Text and Image Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using Rich Text and Image The eComm Performance theme includes a 'Rich Text and Image' section that allows you to add a content block to your ...

    • Collection List Section in the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.   Using the Collection List Section The eComm Performance theme features a 'Collection List' section that is available on the homepage. The ...

    • Using the Page Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...

    • FAQ Template - eComm Performance Theme

      The theme will need to be published to use the 'page.faq'  template. The templates that you can select are limited to the templates available in the currently published theme.  Supported Versions: The details here apply to the most recent version of ...