Featured grid

Set up a featured grid of images that by default will show two images across followed by a row of three images across.  Using the image content blocks you can add or remove any number of images that can be displayed in the grid.  By default the featured section is designed to show the images with spacing between each image, the image title below each image, and vertical spacing above and below the section.

For best results, all of the images you upload into the featured grid 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.