# UGC gallery layouts: 10 formats and where each fits

Grid, carousel, reel, stories, hotspots, lookbook and four more. What each layout looks like, the page it suits and its load cost.

By Rohin Aggarwal · 2026-10-14

Twelve customer posts can look like a magazine, a phone feed or a shop window. The layout decides which. Most stores pick one on day one and never revisit it. This is the map we wish they had on day one.

**Quick answer**

- **Product page:** a grid or carousel below the description. A floating mini frame for one hero product.
- **Homepage:** a stories ring at the top or a shoppable reel strip.
- **Campaign page:** a lookbook, or player hotspots on one hero video.
- **Gift guide or discovery:** a swipe stack on mobile.
- **Speed:** image layouts are the lightest. Video layouts should load only the clip on screen.

We make Idukki. Every layout below is one a merchant can pick in the Idukki builder today. The builder has more than 40. These ten cover most of what a store needs.

## The ten layouts at a glance

| Layout | What it looks like | Best page | Speed note |
| --- | --- | --- | --- |
| Grid | Rows of tiles | Product page, collection, UGC page | Lightest: images only |
| Masonry | Staggered tiles of mixed height | UGC page, homepage | Images only; reserve the height |
| Carousel | One row that swipes sideways | Product page short on space | Swipe code loads after first paint |
| Shoppable Reel | Vertical videos, one after another | Homepage, video-first product page | Only the clip on screen loads in full |
| Stories Ring | Circles that open into stories | Top of homepage or collection | Circles first, video on tap |
| Player Hotspots | One video with product pins | Campaign or landing page | One player, poster first |
| Lookbook | One look per screen, pinned | Campaign page, seasonal edit | One image per screen |
| Mini Frame | A small floating video | Product page for a hero product | Loads on every view |
| Swipe Stack | Cards swiped one at a time | Gift guide, mobile discovery | One card at a time |
| Product Page Hub | Reviews, media and Q&A in one block | Low on the product page | Text-heavy; sits below the fold |

_Layouts from the Idukki builder, checked 14 October 2026. Speed notes are qualitative._

## Image-first layouts

### 1. Grid

Rows of square or portrait tiles. Product tags can show as pins on each tile. It is the default because it works on almost any page.

- **Best page:** below the description on a product page. Also a collection page or a UGC page.
- **Speed:** the lightest of the ten. Each tile image downloads once, sized to the tile.
- **Watch:** pin your strongest post to the first row. It is the first to load.

### 2. Masonry

Tiles of mixed height, staggered like a pinboard. Portrait and landscape posts sit together without cropping.

- **Best page:** a UGC or inspiration page, or a homepage block for image-rich brands.
- **Speed:** images only. Reserve each tile's height so the page does not jump as images arrive.
- **Watch:** on a narrow product page it can read as clutter. Use a grid there.

### 3. Lookbook

One look per screen, with product pins on each item in the shot. The shopper swipes from look to look.

- **Best page:** a campaign page or a seasonal edit. Outfits and rooms with several products.
- **Speed:** one image per screen. The next look loads as the shopper swipes.
- **Watch:** tag every product in the look. An untagged item is a question nobody answers.

For lookbook against flipbook and grid, read [lookbook vs flipbook vs grid](/blog/lookbook-vs-flipbook-vs-grid-shoppable-formats).

## Swipe and story layouts

### 4. Carousel

One row of tiles that swipes sideways. It takes a fixed band of height, whatever the post count.

- **Best page:** a product page short on space, or a homepage strip.
- **Speed:** the swipe code loads after the first paint. Off-screen slides wait.
- **Watch:** show part of the next tile at the edge. Shoppers then know it scrolls.

### 5. Stories Ring

A row of circles at the top of the page. A tap opens full-screen stories, like on Instagram.

- **Best page:** the top of a homepage or collection page, on mobile.
- **Speed:** the circles are small images. Video loads only when a story opens.
- **Watch:** one theme per circle, such as a product range or a use case.

### 6. Swipe Stack

A stack of cards the shopper swipes one at a time. With a setting on, a like saves the product to a wishlist.

- **Best page:** a gift guide or a discovery page on mobile.
- **Speed:** one card shows at a time, so little loads up front.
- **Watch:** it suits browsing with no fixed product in mind. Keep it off the product page.

## Video layouts

### 7. Shoppable Reel

Vertical customer videos that play one after another, with the tagged product under each clip.

- **Best page:** a homepage strip, or a product page for a product that needs motion.
- **Speed:** the heaviest kind of content. In Idukki only the clip on screen loads in full.
- **Watch:** autoplay muted, with a tap for sound.

### 8. Player Hotspots

One video with product pins that appear as each product comes on screen.

- **Best page:** a campaign or landing page built around one strong video.
- **Speed:** one player. A poster frame paints first and the video follows.
- **Watch:** time each pin to when the product is in frame. A pin on an empty shot confuses.

### 9. Mini Frame

A small video that floats in a corner of the page. It can start as a bubble the shopper taps to open.

- **Best page:** the product page of a hero product, or a launch.
- **Speed:** it loads on every view of the page. Start it as a bubble.
- **Watch:** keep it clear of the add-to-cart button on phones.

**A Shoppable Reel clip on a phone**
Product: Bodycon Sunscreen SPF 50 ($64.76)
Hotspot: Tap to shop
- Vertical clip, muted: Plays in place. A tap turns the sound on.
- Tagged product: The product in the clip opens price and add to cart.
- Next clip waits: The clip below loads fully only when it scrolls into view.

## A layout for the bottom of the product page

### 10. Product Page Hub

One block that holds the rating summary, a photo and video strip, reviews and product Q&A. It is in early access.

- **Best page:** low on the product page, where the reviews section usually sits.
- **Speed:** mostly text and thumbnails. It sits below the fold, so it can wait for the scroll.
- **Watch:** it replaces a separate reviews block. Run one or the other.

Read more on the [Product Page Hub page](/product-page-hub).

## Which layout for which page

**Images or video, browsing or deciding**
Axes: Image-led → Video-led (x), Browsing → Deciding on one product (y)
- Grid (low, high)
- Carousel (low, high)
- Product Page Hub (low, high)
- Mini Frame (high, high)
- Masonry (low, low)
- Lookbook (low, low)
- Swipe Stack (low, low)
- Shoppable Reel (high, low)
- Stories Ring (high, low)
- Player Hotspots (high, low)

**Pick a layout in two questions**
Q: Which page is the gallery going on?
- A product page: **Grid or carousel first** — Below the description, tagged to the product on the page.
  - Plenty of customer video: Shoppable Reel, or a Mini Frame for one hero product.
  - Reviews matter most: Product Page Hub low on the page.
- The homepage: **Stories Ring or a reel strip** — Show the range in a small band of height.
  - Mostly photos: A grid or masonry block.
- A campaign or gift guide: **Lookbook, Player Hotspots or Swipe Stack** — Lookbook for outfits and rooms. Hotspots for one hero video. Swipe Stack for gifts.

## A speed note that applies to all ten

Every layout runs on the same Idukki script. Its core download is 79 KB gzipped, measured October 2026. The layout then decides what loads next.

- **Images:** lazy-load below the fold and reserve each tile's space.
- **Video:** load the clip on screen, show posters for the rest.
- **Floating layouts:** start small, because they load on every view.

Test the page in [PageSpeed Insights](https://pagespeed.web.dev/) with the gallery on and off. For the full budget, read [Core Web Vitals for UGC widgets](/blog/core-web-vitals-ugc-widgets).

New to galleries? Start with [what a UGC gallery is](/blog/what-is-a-ugc-gallery).

**The rule we use:** Pick the layout from the page, then from the content you have. A reel with four videos looks empty. A grid with four photos looks fine.

### FAQs

**Q: Can I change the layout later?**

A: Yes. In Idukki the posts, tags and rights stay with the collection. Switching layout does not touch them.

**Q: Can one page run two layouts?**

A: Yes. A stories ring at the top and a grid below the description is a common pair.

**Q: Which layout loads fastest?**

A: A grid of images. Video layouts cost more, so load only the clip on screen.

**Q: Do I need video for a good gallery?**

A: No. A grid of tagged customer photos works on most product pages. Add a video layout once you have enough clips.

### Sources
- Idukki builder layout list — Ten merchant layouts, checked 14 October 2026.
- Idukki widget core download — 79 KB gzipped, measured October 2026.
- [Google PageSpeed Insights](https://pagespeed.web.dev/)
- [Idukki, what is a UGC gallery](/blog/what-is-a-ugc-gallery)
- [Idukki, lookbook vs flipbook vs grid](/blog/lookbook-vs-flipbook-vs-grid-shoppable-formats)
- [Idukki, demo store](/demo-store)

---
Canonical: https://idukki.io/blog/ugc-gallery-layouts-where-each-fits
Tags: ugc-gallery, layouts, shoppable-gallery, shoppable-video, page-speed, ugc