# Shoppable video thumbnails: what to keep and what to cut

The first frame of a shoppable video does the selling before anyone presses play. Twelve frame patterns to keep, six to cut, and why.

By Rohin Aggarwal · 2026-10-14

Before anyone presses play, a shoppable video is a still picture. On a product page it sits in a row of other stills. The shopper taps the one whose frame answers a question. This piece is about choosing that frame.

**Quick answer**

- **The thumbnail is the poster frame.** It is what shoppers see before a clip plays.
- **It must show the product.** In a hand, on a body or in a room.
- **Keep frames that answer a question.** Fit, size, texture, result or what is in the box.
- **Cut logo cards, blurred frames and walls of text.** None of them say what is for sale.
- **Keep it light.** A video poster image can be the page's Largest Contentful Paint element.

## What the thumbnail is on a shoppable widget

On a product page, a video tile shows a still image until it plays. That still is the poster frame. Some players use the clip's first frame. Others let you pick one.

On Idukki's widget, video tiles paint the poster image first and fetch the video later. On desktop, hovering a tile plays a short preview from the start of the clip. So the poster and the opening seconds should match.

The poster also counts for speed. Google's web.dev guide lists video poster images among the elements measured for Largest Contentful Paint. Its target for a good LCP is 2.5 seconds or less.

## What the first frame must show

- **The product, large enough to recognise.** Check it at the size of a phone tile.
- **A person or a hand with it.** That tells the shopper a customer filmed this.
- **One reason to tap.** A result, a question or a detail the product photos miss.
- **Short text, if any.** A few words that stay readable on a small tile.
- **The same moment the clip opens on.** A poster that promises something else loses the viewer.

For on-screen text, WCAG 2.1 asks for contrast of at least 4.5:1. A caption on a busy background usually fails that. Add a solid strip behind it.

![A woman at a table holds up a skincare bottle. On-screen text reads: when you run out of all your skincare at the same time.](/demo/homepage/skin-care-slide-2-poster.webp)
_Sample frame from the Idukki demo store. Keep: the product is in her hand and the text names a moment shoppers know._

## Twelve thumbnail patterns we would keep

These are patterns, described in words. They are illustrative and do not come from a named store.

| Pattern | What the frame shows | Why keep it |
| --- | --- | --- |
| Product in hand | A hand holding the item, label facing camera | Shows real size and a real owner |
| The result | The after state: clear counter, styled shelf, finished look | The tile promises the payoff |
| Full outfit | Head-to-toe shot in daylight | Fit and the whole look in one glance |
| Texture close-up | Fabric weave, finish or grain filling the frame | Answers what it is made of |
| Problem line | Product in frame plus a few words naming a problem | The shopper sees their own problem |
| Reaction with product | A face mid-reaction, product visible in frame | Gives a reason to press play |
| Product in a real room | Sofa, lamp or rug in a lived-in space | Shows size against real furniture |
| Split before and after | Both states side by side in one frame | The claim is visible before play |
| Box contents laid out | Everything that ships, spread on a table | Shows exactly what arrives |
| Worn where it goes | Watch on a wrist, ring on a hand | The shopper sees it on a body |
| Tutorial step one | Hands on the product, step one under way | Signals a how-to before play |
| Sizing question as text | Product worn, with "true to size?" on screen | Promises the answer the shopper wants |

_Keep set. Illustrative patterns written for this guide._

![A woman in a cream two-piece, sunglasses and shoulder bag on a city street.](/demo/homepage/fashion-slide-1-poster.webp)
_Sample frame from the Idukki demo store. Keep: the full outfit in daylight, with every tagged item in view._

## Six thumbnail patterns we would cut

| Pattern | What the frame shows | Why cut it |
| --- | --- | --- |
| Logo card | A brand intro slate or end card | Says nothing about the product |
| Motion blur | A frame grabbed mid-movement | Looks broken at tile size |
| Mid-blink face | Eyes closed or mouth mid-word, no product | Unflattering, and nothing to buy |
| Wall of text | A full sentence or paragraph on screen | Unreadable on a phone tile |
| Product missing | Scenery, a pet or a ceiling | The shopper cannot tell what is for sale |
| Bait frame | A moment the clip never shows | Viewers leave, and it misleads |

_Cut set. Illustrative patterns written for this guide._

**One clip, two possible posters**
Auto-picked first frame:
- Phone being set down, image blurred
- Creator out of shot
- No product visible
Chosen poster:
- Creator in the jacket, facing camera
- Zip and collar in focus
- Short text: "size M, I'm 5'6"
_Illustrative. Same try-on clip, two frames a tool might pick._

## How to pick the frame

**Five checks per clip**
1. **Find the product moment** — Scrub to the first second the product is clear and in use.
2. **Shrink it** — View the frame at tile size. If the product blurs, pick another.
3. **Check the text** — A few words at most, on a solid strip for contrast.
4. **Match the opening** — Trim the clip so it starts on the poster moment.
5. **Check the row** — Look at all tiles together. Vary the frames so they do not repeat.
_Run them at the size the tile shows on a phone._

If your tool cannot set a custom poster, trim the start of the clip. The first frame then becomes the poster.

## Length and captions

The thumbnail earns the tap. Length and captions decide whether the shopper stays. See [how long a shoppable video should be](/blog/ideal-length-for-a-shoppable-video). Then read [captions and subtitles for shoppable video](/blog/captions-subtitles-shoppable-video).

For where the tiles sit on the page, see [where to place shoppable video](/blog/where-to-place-shoppable-video).

**The rule to apply:** If you cannot name the product from the poster at phone tile size, change the frame. Do that before you change the clip.

### FAQs

**Q: Should a shoppable video thumbnail have text on it?**

A: Only a few words, and only if they add a reason to tap. A problem, a size or a question works. Put it on a solid strip so it stays readable.

**Q: Is the first frame of the video always the thumbnail?**

A: Not always. Some players let you choose a poster image. If yours does not, trim the clip so it opens on the frame you want.

**Q: Does the thumbnail affect page speed?**

A: It can. Google's web.dev guide counts a video's poster image for Largest Contentful Paint. Keep the poster sized to the tile.

**Q: Should every tile in a row look the same?**

A: Keep the crop and style consistent. Vary the moment, so each tile answers a different question.

### Sources
- [Google web.dev, Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) — Video poster images count for LCP. Good LCP is 2.5 seconds or less. Checked 14 October 2026.
- [W3C, Understanding WCAG 2.1 SC 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) — Contrast of at least 4.5:1 for normal text.
- [Idukki demo store](/demo-store) — Source of the two sample frames above.

---
Canonical: https://idukki.io/blog/shoppable-video-thumbnails-keep-or-cut
Tags: shoppable-video, thumbnails, video-commerce, product-page, cro, ugc