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.
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.
In this article
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 |
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.
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
Sample customer clip
Bodycon Sunscreen SPF 50
$64.76
- 1
Vertical clip, muted
Plays in place. A tap turns the sound on.
- 2
Tagged product
The product in the clip opens price and add to cart.
- 3
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.
Which layout for which page
Images or video, browsing or deciding
Pick a layout in two questions
Start here
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 with the gallery on and off. For the full budget, read Core Web Vitals for UGC widgets.
New to galleries? Start with what a UGC gallery is.
FAQs
Can I change the layout later?
Yes. In Idukki the posts, tags and rights stay with the collection. Switching layout does not touch them.
Can one page run two layouts?
Yes. A stories ring at the top and a grid below the description is a common pair.
Which layout loads fastest?
A grid of images. Video layouts cost more, so load only the clip on screen.
Do I need video for a good gallery?
No. A grid of tagged customer photos works on most product pages. Add a video layout once you have enough clips.
Sources
- 1Idukki builder layout list · Ten merchant layouts, checked 14 October 2026.
- 2Idukki widget core download · 79 KB gzipped, measured October 2026.
- 3Google PageSpeed Insights
- 4Idukki, what is a UGC gallery
- 5Idukki, lookbook vs flipbook vs grid
- 6Idukki, demo store
More from Rohin Aggarwal
- Strategy
Build vs Buy: the real cost of building shoppable UGC galleries in-house
A shoppable gallery is a weekend; the platform behind it is a roadmap that never closes. Where building wins, and the hybrid most teams pick.
- Strategy
Grounded answers plus a human handoff beat fully autonomous AI on the PDP
Full autonomy is the wrong default on a PDP, where a confident wrong answer costs a return and a one-star review. Grounded answers plus a clean handoff convert better.
- Strategy
How to Add Shoppable UGC to BigCommerce (No-Code, Step by Step)
Put shoppable UGC on BigCommerce without code: paste one embed script, tag products for one-click add-to-cart, place the gallery, keep Core Web Vitals green.