Shoppable video on product pages: 9 placements compared

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.

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

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.

Which placement to start with

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. For inline against floating in more depth, read inline vs floating widgets.