Gallery

Set up a gallery of images that will appear two, three or four across on each row.  Using the image content blocks you can add any number of images that can be displayed in the grid.  By default the gallery section is designed to show the images edge-to-edge with no vertical spacing above or below the section.

For best results, all of the images you upload into the gallery should be identical in size and ratio.

Layout Options

  • Expand full width - If checked, the grid or list will expand the full browser width. Unchecked, it will be limited to the 1180px site width.
  • Show spacing around section - If checked, the grid or list will add vertical spacing above and below the section. It is helpful to uncheck this option if you want the collections to appear directly next to another section on the homepage. 
  • Show spacing around images - If checked, the collections will have spacing between each image. Unchecked, the images will appear as a seamless grid.
  • Targeted images per row - Choose between 2, 3 and 4 images to be shown per row.  If you add a number of images that is not equally divided by the targeted images per row then a staggered layout will be used.  For example, if the targeted images per row is set to 3 and you upload 5 images the first row will show 2 across and the second row will show 3 across. At mobile device widths the collections will be vertically stacked.

Text and Overlay Options

  • Text placement - Choose if the image title should be displayed below the image or on top of the image as an overlay.
  • Colors - If you are using the Over image text placement it might be helpful to set a tinted overlay color on top of the image to give the text more contrast for readability.  Additionally you can set the color the overlay will be when you hover over the collection.
  • Image overlay opacity - Choose the level of opacity (0% to 100% opaque) to control how much the overlay and overlay hover tints the images.
  • Enable rollover zoom - If checked, a subtle zoom effect is applied when you roll over the images.

For best results, all  images should be identical sizes or ratios.  One recommended size that would work well for most shops would be 640 x 450px JPG.