Generate Image Gallery with Lightbox

Build a responsive image gallery with masonry or grid layout, lightbox zoom, lazy loading, and customizable columns.

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Create an image gallery block with lightbox:

Layout options:

  Grid layout (equal sizes)
  Masonry layout (varied heights)
  Carousel/slider mode


Features:

  Click to open full-size lightbox
  Previous/next navigation in lightbox
  Close button and click-outside-to-close
  Image captions (optional)
  Lazy loading for performance


Settings:

  Columns per row (2-5 on desktop)
  Gap between images
  Image aspect ratio (square/original/16:9)
  Border radius
  Hover effect (zoom/fade/overlay)
  Caption position (below/overlay)


Requirements:

  Support for up to 20 images
  Mobile responsive (2 columns on mobile)
  Keyboard navigation in lightbox
  Smooth transitions


Please generate the Liquid, CSS, and JavaScript for this gallery as code I can paste into my own theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/image-gallery.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” to place the gallery on the page you want.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions