Gallery Lookbook
Overview
Say hello to your storefront's most shoppable section! The Gallery Lookbook turns a beautiful set of images and videos into a gallery your customers can actually shop. They browse your visuals, tap a tile they love, and a friendly "Get the look" popup pops open with the exact products in that shot — so they can go from "ooh, I love that" to "add to cart" in a single tap.
It's perfect for seasonal lookbooks, editorial and lifestyle shoots, "shop the outfit" moments, and community photos. Add a little intro up top — a subheading, a heading, a line of copy, and a button — and you've got a gallery that tells a story and sells.
How It Works
There are three easy pieces to play with:
- Section settings – The big-picture stuff: grid or carousel, how your media looks, spacing, and the styling of that shoppable popup.
- Content Block – The little intro above the gallery. Drop in a subheading, heading, paragraph, and button.
- Media group – The gallery itself. Each Media block is one tile — an image or video, plus the products that show up when someone taps it.
Section Settings
| Full width | Want your gallery to stretch edge-to-edge for a bold, immersive feel? Turn this on. Prefer it tucked inside the standard page width? Leave it off. |
| Layout |
|
| Number of columns | How many tiles sit side by side — 2 or 3. Go with 3 to show off more of the gallery at once, or 2 to give each tile a little more spotlight. |
| Desktop layout | Pick how the gallery behaves on desktop: Carousel (tiles glide across the screen) or Grid (tiles sit neatly in rows). |
| Mobile layout | Same choice for phones: Carousel or Grid. A carousel is a lovely way to save space on smaller screens. |
|
Carousel settings These only come into play when you've chosen a Carousel layout above. |
|
| Enable animation | Flip this on and your carousel slides along all by itself. Leave it off if you'd rather let customers swipe and click at their own pace. |
|---|---|
| Slide duration | How quickly one slide glides into the next, in milliseconds (like 750 ms ). Smaller = snappier, larger = smoother and more relaxed. |
| Change slides every | How long each slide hangs around before the next one appears, in seconds (like 2 s ). Only matters when Enable animation is on. |
|
Block settings These shape how every tile in your gallery looks. |
|
| Media ratio | The shape of your tiles — for example Square (1:1). Every tile shares the same ratio, so your gallery always looks tidy and balanced. |
| Enable video autoplay | Turn this on and any video tile plays on its own. Don't worry — videos are always muted, so they play gently without startling anyone. |
| Column spacing | The gap between your tiles (like Small). Tighter spacing gives a cozy gallery-wall look; roomier spacing lets each tile breathe. |
|
Lookbook popup This is the magic bit — the shoppable popup that opens when someone taps a tile. On desktop it appears as a popup; on mobile it slides up as a neat bottom sheet. |
|
| Show popup | Keep this on to let customers shop each tile. Turn it off and your tiles simply become a lovely gallery with no popup. |
| Heading | The title at the top of the popup (like "Get the look"). Type your own, or connect it to a dynamic source. |
| Heading tag | The HTML tag for the heading (like H2). This one's for SEO and page structure — it won't change how big the text looks. |
| Size | The visible size of the heading (like H1), totally separate from the tag above. Reach for this when you want the heading bigger or smaller. |
| Heading text color | text colorPick the color of your popup heading (like #000000 ). |
Blocks
Your section is built from two block groups: a Content Block for the intro, and a Media group for the gallery tiles.
Content Block
This is the friendly little intro above your gallery. Click Add block inside the Content Block and pick from:
| Subheading | A short line above the main heading — lovely for a category or campaign label (like "Visual Journey"). |
|---|---|
| Heading | The star of the show — your main title (like "Seasonal Lookbook 2026"). |
| Paragraph | A short line to set the scene. Keep it snappy so shoppers can read it at a glance. |
| Button | Your call-to-action (like "Explore all"). Give it a label and link it to a collection, product, page, or URL. Leave the label empty and the button quietly disappears. |
|
|
|
Media group → Media block
The Media group is home to your gallery tiles. Click Add block → Media to add one. Each Media block is a single tile — an image or video, plus the products behind its popup.
| Video | Choose a video for this tile. It'll autoplay, loop, and stay muted all on its own. Optional — skip it if you'd rather show a still image. |
| Image | Choose the image for this tile. Added a video? This becomes the cover image shown while the video loads. No video? Then this image is your tile. |
| Lookbook popup (for each tile): |
|
| Collection | Pick a collection and every product in it shows up in this tile's "Get the look" popup. |
| Products | Hand-pick specific products to feature instead. These override the collection, so use them when you want the popup to show exactly what's in the photo — nothing more, nothing less. |
Handy Tips
➡️ Choose the visuals first, products second. Set each tile's image or video, then attach the products customers can shop from it.
➡️ Keep your tile shapes consistent. One media ratio keeps everything neat, especially in Grid layout.
➡️ Try Carousel on mobile, Grid on desktop. It's a reliable combo — space-saving on phones, generous on bigger screens.