# Shoppable video on product pages: 9 placements compared

Nine places a customer video can sit on a product page. What each one suits, what it costs in load time, and where to start.

By Rohin Aggarwal · 2026-10-14

A product page has one job and about nine places to put a video. Most stores use the slot their theme offers first. That is often the slot that costs the most load time. This piece walks the page from top to bottom and says what each slot is for.

**Quick answer**

- **Ship first:** a carousel of tagged customer clips below the description. It loads after the first paint.
- **Ship second:** video inside the reviews section, with the reviewer's name and date.
- **Gallery video:** use a later slide. Keep the first slot a still photo.
- **Floating bubble:** suits one hero product. Keep it a poster image until tapped.
- **Load cost:** anything that loads before the scroll competes with your main image.

We make Idukki, a shoppable video app. The layouts below are sketches drawn in code. None is a screenshot of a real store, and we have not measured each slot.

## The placement map

A product page reads from top to bottom. The shopper moves from "what is it" to "is it for me" to "should I buy". Each slot sits at one of those points. The diagram shows where each one lives on a phone.

**Where the nine slots sit on a product page**
- **Image gallery — Slots 1 and 2: first image, later slides:** Keep the first image a still photo. A video works as a later slide.
- **Buy box — Slots 3 and 4: under the button, by the size picker:** Small thumbnails only. Nothing here should push the button down.
- **Middle scroll — Slot 5: carousel below the description:** Tagged customer clips where "is it for me" starts. The default first slot to ship.
- **Reviews band — Slot 6: video inside the reviews:** Video reviews with the name and date of the person who posted them.
- **Tabs and FAQ — Slot 7: how-to clips:** Short clips that answer set-up, care or sizing questions.
- **Page end — Slot 9: complete the look:** Clips showing this product with others, every product tagged.

## The nine placements, one by one

### 1. The first slot of the image gallery

- **Suits:** products where motion is the point. A coat's drape, a bag's size on a shoulder.
- **Load cost:** the highest of the nine. This slot usually holds the largest image on the page.
- **Watch:** Google times that image as Largest Contentful Paint. "Good" is 2.5 seconds or less.
- **If you use it:** show a still poster and play on tap. Never autoplay with sound.

### 2. A later slide in the image gallery

- **Suits:** almost any product. A shopper swiping the gallery is already looking closely.
- **Load cost:** low, if the video waits until the shopper reaches the slide.
- **Watch:** put a play icon on the thumbnail. Without one, shoppers swipe past it.

### 3. Under the add-to-cart button

- **Suits:** a short strip of three to five thumbnails. A tap opens the clip full screen.
- **Load cost:** low to medium. It sits near the fold, so ship thumbnails only.
- **Watch:** reserve its height. A strip that appears late pushes the button down mid-tap.

### 4. Beside the size or variant picker

- **Suits:** apparel and footwear. A clip of a person in a given size answers the fit question.
- **Load cost:** low. One or two thumbnails.
- **Watch:** label each clip with the size worn and the wearer's height.

### 5. A carousel below the description

- **Suits:** most stores, as the first slot to ship. This is where doubt starts.
- **Load cost:** low. On a phone it sits below the fold, so it can wait for the scroll.
- **Watch:** tag each clip to the product on the page. Untagged clips send shoppers hunting.

In Idukki's carousels, only the clip on screen loads in full. Off-screen clips show a poster and wait.

### 6. Inside the reviews section

- **Suits:** products that already get photo and video reviews.
- **Load cost:** low. Reviews sit far down the page.
- **Watch:** keep the reviewer's name and the date beside the clip. That is what makes it a review.

### 7. In a how-to or FAQ tab

- **Suits:** products with set-up, care or sizing questions. Applying sunscreen, changing a watch strap.
- **Load cost:** none until the shopper opens the tab.
- **Watch:** a shopper who opens the tab is close to buying. Keep the add-to-cart link in view.

### 8. A floating bubble

- **Suits:** a store with one hero product, or a launch week. The bubble follows the shopper down the page.
- **Load cost:** medium. It loads on every view of the page, wherever the shopper scrolls.
- **Watch:** start it as a small poster and load the video on tap. Keep it off the buy button.

### 9. A complete-the-look carousel near the end

- **Suits:** fashion, home and anything sold in sets. Each clip shows this product with others.
- **Load cost:** low. It is the last thing on the page.
- **Watch:** tag every product in the clip. A clip that sells three items needs three tags.

## The nine placements in one table

| Placement | Best for | Load cost | When to ship |
| --- | --- | --- | --- |
| 1. First gallery slot | Products where motion is the point | High: competes with the main image | Rarely, and as tap-to-play |
| 2. Later gallery slide | Almost any product | Low if it waits for the swipe | Early |
| 3. Under the buy button | A short thumbnail strip | Low to medium | Second wave |
| 4. Beside the size picker | Apparel and footwear | Low | Early for fashion |
| 5. Below the description | Most stores | Low | Ship first |
| 6. In the reviews | Stores with video reviews | Low | Ship second |
| 7. How-to or FAQ tab | Set-up and care questions | None until opened | When questions repeat |
| 8. Floating bubble | One hero product or a launch | Medium: loads on every view | Test it last |
| 9. Complete the look | Products sold in sets | Low | Once tagging is in place |

_Load cost is our reading of what loads before the scroll. We have not measured each slot._

**How close to the doubt, and what it costs to load**
Axes: Low load cost → Higher load cost (x), Far from the buying doubt → Right at the buying doubt (y)
- Below the description (low, high)
- In the reviews (low, high)
- Beside the size picker (low, high)
- Later gallery slide (low, high)
- First gallery slot (high, high)
- Under the buy button (high, high)
- How-to tab (low, low)
- Complete the look (low, low)
- Floating bubble (high, low)

## Load cost: what decides it

Load cost comes down to one question. Does the video download before the shopper scrolls? Video above the fold competes with the main image. Video below the fold can wait its turn.

- **Preload nothing off screen.** The video tag's preload="none" hint asks the browser not to fetch early.
- **Paint a poster first.** A still frame shows at once. The video streams in behind it.
- **Reserve the space.** Give the player a fixed size so nothing jumps. "Good" layout shift is 0.1 or less.
- **Autoplay muted only.** Chrome always allows muted autoplay. Sound needs the shopper to interact first.

The full budget, with what to defer, is in [Core Web Vitals for UGC widgets](/blog/core-web-vitals-ugc-widgets).

**Slot 5 after a tap: the clip opens full screen**
Product: Airlift Overcoat Brown ($190.76)
Hotspot: Tap to shop
- Opened from the carousel: The shopper tapped a thumbnail below the description. Nothing loaded before that tap.
- One product pin: The coat in frame is tagged. A tap opens the price and sizes.
- Add to cart stays put: The buy action sits at the bottom and never moves while the clip plays.

## Which placement to start with

**Pick the first slot from the question shoppers ask most**
Q: What do shoppers ask most often before they buy?
- "Will it fit?": **Beside the size picker** — Fit clips labelled with size and height. Add the carousel below the description next.
- "Is it as good as it looks?": **Below the description** — A carousel of tagged customer clips. Then move video reviews into the reviews section.
- "How do I use it?": **A how-to tab** — One short clip per common question, with the product linked in each.

**A rollout you can measure**
1. **Pick 20 pages** — Your top product pages by traffic. Few enough to watch closely.
2. **Ship slot 5** — The carousel below the description. Posters first, video on scroll.
3. **Add slot 6** — Video in the reviews, once video reviews come in.
4. **Test one more** — A gallery slide or the size picker. One change at a time.
5. **Read add-to-cart** — Compare add-to-cart rate with and without the slot. Ignore view counts.

## Where this sits next to the rest of the store

This piece stays on the product page. For the homepage, collections and cart, read [where to place shoppable video across the store](/blog/where-to-place-shoppable-video). For inline against floating in more depth, read [inline vs floating widgets](/blog/inline-vs-floating-widgets).

**The rule we use:** Video earns its load cost where the shopper has a question. Above the fold, they have not asked one yet.

### FAQs

**Q: Should a product video autoplay?**

A: Muted autoplay is fine below the fold. Above the fold, show a poster and play on tap. Browsers block autoplay with sound until the shopper interacts.

**Q: How many clips should one product page carry?**

A: Enough to answer the common questions. We start with three to five tagged clips in one carousel.

**Q: Can one clip sit in two places?**

A: Yes. A clip can sit in the carousel and in the reviews. Clear the rights once for every place you use it.

**Q: Is a floating bubble bad for speed?**

A: It can be, because it loads on every view. Start it as a small poster and load the video only on tap.

### Sources
- [web.dev, Web Vitals](https://web.dev/articles/vitals) — LCP of 2.5 seconds or less and CLS of 0.1 or less count as good.
- [Chrome for Developers, autoplay policy](https://developer.chrome.com/blog/autoplay) — Muted autoplay is always allowed. Sound needs user interaction.
- [MDN, the video element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) — The preload and poster attributes.
- [Idukki, where to place shoppable video](/blog/where-to-place-shoppable-video)
- [Idukki, inline vs floating widgets](/blog/inline-vs-floating-widgets)
- [Idukki, demo store](/demo-store)

---
Canonical: https://idukki.io/blog/shoppable-video-placements-on-product-pages
Tags: shoppable-video, product-page, pdp, placement, core-web-vitals, ugc