Snug Gallery / Guides

Video thumbnails in a Shopify gallery: pick the poster

Where the poster frame of a YouTube, Vimeo or uploaded video comes from in Snug Gallery, why some look blurry, and how to replace it with your own image.

A video in a gallery is, until someone clicks it, a picture. The grid shows one still frame with a play badge, and that frame decides whether anyone presses play. Merchants ask us why one video tile looks soft when the others are crisp, why a YouTube clip shows a frame they never chose, and whether the still can be swapped for a product photo. The answers depend on where the video came from, because Snug Gallery gets the poster from a different place for each of its three video sources. This guide explains each one and shows how to replace a poster when you want control.

Three sources, three posters

Snug Gallery accepts videos three ways: uploaded files (MP4, MOV or WebM up to 250 MB), YouTube links and Vimeo links. In every case the gallery stores a poster image in your store's Files and shows that poster in the grid; the player only exists once a shopper clicks. The video gallery guide covers why that matters for page speed. Here we care about the poster itself: which image it is, how big it is and who picked it.

For an uploaded video, the poster is the preview frame Shopify generates while it processes the file. For a YouTube video it is the thumbnail YouTube serves for that video ID, which is the custom thumbnail if the channel set one. For a Vimeo video it is the thumbnail Vimeo reports for the link. The app never guesses a frame itself; it asks the host, downloads the result once, and saves it as an image in Shopify Files next to your product photos.

YouTube: why some posters are blurry

YouTube publishes thumbnails at fixed sizes under predictable names. When you paste a link, Snug Gallery first checks the video through YouTube's oEmbed endpoint to confirm it exists and is embeddable, then tries the 1280 by 720 image (YouTube calls it maxresdefault). Not every video has one: it exists only when the upload was at least HD or the channel uploaded a custom thumbnail at that size. If it is missing, the app falls back to the 480 by 360 image (hqdefault), which is always there.

That fallback is the usual cause of a soft tile. A 480-pixel poster stretched across a 600-pixel masonry column looks fine on a phone and slightly fuzzy on a desktop, and it is noticeable next to photos served at full resolution. Old uploads, screen recordings exported at 480p and videos whose custom thumbnail was uploaded small are the common cases. The fix is either to set a proper custom thumbnail on the YouTube side and re-add the video, or to replace the poster in the gallery editor with your own image, which is covered below.

Two more YouTube details. The 1280 by 720 image includes black bars for videos that are not 16:9, because YouTube pads them; a vertical Short gets a letterboxed poster. And the thumbnail is fetched once, when you add the video. If the channel changes its thumbnail later, the gallery keeps the old one until you replace it, which is a feature when a channel you do not control swaps a good frame for a worse one.

Vimeo: the thumbnail the owner chose

Vimeo's oEmbed response includes a thumbnail URL, and Snug Gallery asks for it at 1280 pixels wide, so a Vimeo poster is almost always sharp. Vimeo lets the video owner pick any frame or upload an image as the thumbnail, and whatever is set at the moment you paste the link is what the gallery stores. The app only accepts posters hosted on Vimeo's own image CDN, so a private video that returns a placeholder instead of a real thumbnail is rejected with an error rather than saved with a grey box.

If the video is yours, set the thumbnail in Vimeo first and then add it. If it belongs to a brand or a creator and the frame they chose does not suit your page, add it anyway and replace the poster afterwards.

Uploaded videos: Shopify picks the frame

When you upload a video file, the app sends it to Shopify, which transcodes it into several sizes and generates a preview image. Until that finishes, the editor shows a processing notice and the storefront skips the item, because there is nothing to show yet. Once the video is ready, the preview image becomes the poster. You do not choose the frame and the gallery editor does not offer a Replace poster button for uploaded videos, because the poster belongs to the video record in Shopify rather than being a separate file the app can swap.

In practice that means the first second of your clip matters. If the clip opens on a black frame, a fade from white or a slate, that is what shoppers see in the grid. Trim the export so the video starts on the frame you would pick as a thumbnail. If you need a poster that is not in the video at all (a styled product photo, text, a logo), host the clip on YouTube or Vimeo as unlisted, add it by URL, and replace the poster; the playback is then an embed, with the trade-offs the video guide describes.

How to replace the poster of a YouTube or Vimeo video

  1. Prepare the image. Export a JPG, PNG or WebP at the aspect ratio of the video (16:9 for most clips, 9:16 for vertical), at least 1280 pixels on the long side so it stays sharp on desktop. Keep it under 20 MB like any gallery image.
  2. Open the gallery in Snug Gallery and click the video tile. The detail panel opens on the right with the current poster at the top.
  3. Click Replace poster. For external videos the button carries that label; for photos it says Replace image. Choose your file.
  4. Wait for the upload to finish. The new image is stored in your Shopify Files, the item keeps its caption, alt text, tags, link and position in the gallery, and the video URL is unchanged, so clicking the tile still plays the same clip.
  5. Check the storefront. The poster goes through the same responsive image pipeline as every other gallery image, so it is resized for each screen and lazy-loaded. If the old frame still shows, you are looking at a cached page; a hard refresh or an incognito window clears it.

Making a video tile obviously a video

Shoppers scroll past stills they assume are photos. The gallery already overlays a play badge on video posters, and with the default settings a click opens the player in the lightbox. If you want the grid itself to move, the block setting Autoplay uploaded videos muted makes uploaded clips loop silently in their tiles instead of showing the poster; the autoplay guide explains the bandwidth cost and the reduced-motion behaviour. It applies to uploaded videos only, because YouTube and Vimeo players cannot be shown without loading their scripts, which is the thing the poster exists to avoid.

A poster can also carry a caption. Caption title and text are shown below or over the tile depending on your block settings, and the alt text you write for the video is what search engines and screen readers get, since neither can watch the clip. A poster that is a real frame from the video, a caption that says what happens in it and alt text that describes the scene is the whole job.

What happens to the poster later

The poster is a normal file in Content > Files. If you delete it there, the tile shows a missing-file state in the editor and the storefront skips it, and the detail panel lets you upload a replacement poster while keeping the video URL, the same recovery described in the missing tile guide. Removing the video from the gallery removes the item; the poster file stays in Files unless you delete it, because it is yours.

An external video that is later deleted or made private on YouTube or Vimeo keeps its poster in your gallery, since the poster was copied at add time. The tile looks fine and the click opens a player that reports the video unavailable, so a quarterly click through your video tiles is worth the five minutes. Replacing the URL means removing the item and adding the new link, then replacing the poster if you had customised it.

Frequently asked questions

Can I use a product photo as the thumbnail of a video in my Shopify gallery?

Yes, for YouTube and Vimeo videos. Open the video in the gallery editor, click Replace poster and upload the photo. It is stored in your Shopify Files, the caption, tags and position are kept, and the click still plays the same video. For an uploaded video the poster is the preview frame Shopify generates and cannot be swapped in the app, so trim the clip to open on the frame you want.

Why is my YouTube video thumbnail blurry in the gallery?

YouTube only provides a 1280 by 720 thumbnail for videos uploaded in HD or given a custom thumbnail at that size. For other videos Snug Gallery has to use the 480 by 360 version, which looks soft in a wide column. Set a proper custom thumbnail on YouTube and re-add the video, or replace the poster in the editor with your own image.

Does the gallery update when I change the thumbnail on YouTube or Vimeo?

No. The poster is fetched once, when you add the video, and saved as an image in your Shopify Files. A later change on the hosting side does not reach the gallery. Replace the poster in the editor, or remove and re-add the video, to pick up the new thumbnail.

Does replacing a poster change what plays when a shopper clicks?

No. Replace poster swaps only the image file attached to the item. The video URL, caption, alt text, tags, link and position are unchanged, and the lightbox opens the same YouTube or Vimeo video as before.

More guides