Skip to main content

Image / Gallery Block

Display images and photo galleries from metafields on your storefront, with lightbox mode and flexible layout options.

Supported Metafield Types​

  • file_reference — single image display
  • list.file_reference — image gallery grid with multiple images
  • url — single image from an external URL
  • list.url — image gallery grid from multiple external URLs

Customization Features​

Heading​

Draw customers' attention to the image block with a custom title.

Enable or disable expanded modal view for images. When enabled, customers can click an image to view it in full-screen overlay. The lightbox displays the image at high resolution (up to 2000px) and supports keyboard navigation (Escape to close).

Specify the number of columns for distributing images across the block.

Mobile Optimization​

Adjust settings specifically for mobile devices to ensure images look great on smaller screens.

Advanced Settings​

  • Layout configuration Fine-tune the overall arrangement
  • Spacing Control gaps between images
  • Padding Set internal spacing within the block
  • Image sizing Control how images are scaled and cropped
  • Lazy loading Toggle deferred loading for performance

Using list.file_reference or list.url metafields transforms this block into a full image gallery. Multiple images are automatically arranged in a responsive grid layout.

  • File references Images uploaded to Shopify are served at optimized sizes (600px for thumbnails, 2000px for lightbox). Only files with an image media type are displayed, other file types are skipped.
  • External URLs Images from external URLs are displayed directly. Ensure the URLs point to publicly accessible image files.

The gallery grid respects the column count setting, so you can create anything from a two-column side-by-side comparison to a multi-column photo grid.

Use Cases
  • Product photo gallery Showcase additional product angles or lifestyle shots beyond the main product images
  • Certification badges Display a row of certification or award images
  • Before & after Use a 2-column layout for comparison images
  • Lookbook Create a visual gallery for a collection or brand page
Performance

Lazy loading delays image loading until the customer scrolls to them, improving page load speed. Keep this feature enabled for optimal storefront performance.