How to Set Video Thumbnails for Shoppable Videos
Set poster thumbnails for beyondRegular shoppable video widgets from the dashboard or inline with data-bn-poster. Sizes, formats, Shopify path, and fixes.
Set video thumbnails for beyondRegular shoppable videos from the dashboard under Videos, then open a video and use the Thumbnail tab. You can grab a frame at a chosen timestamp, upload a custom JPG or PNG, or pick a poster from the storyboard grid. The chosen thumbnail is what shoppers see before the video autoplays, and it acts as the poster image for lazy loading.
Where to set the thumbnail in the dashboard
Log in to your beyondRegular dashboard and click Videos in the left sidebar. Pick the video you want to edit, then open the Thumbnail tab at the top of the editor. You will see three options: Auto-frame, Upload custom, and Storyboard.
Auto-frame lets you scrub to a timestamp and lock that frame as the poster. Upload custom takes a JPG, PNG, or WebP up to 2 MB. Storyboard shows six evenly spaced frames from your clip so you can pick one in a click. Hit Save, and the widget cache refreshes within a minute on all storefronts using that video.
Recommended dimensions and format
Match the thumbnail to the widget orientation. For vertical carousel and reel feed, use 1080 by 1920 in a 9:16 ratio. For horizontal carousel, use 1920 by 1080 in a 16:9 ratio. The floating bubble crops to a circle, so keep the subject centred inside a 720 by 720 square.
Export as JPG at 80 to 85 quality for the smallest file, or PNG if you need transparency behind product cutouts. Keep the file under 300 KB where possible. The widget serves the thumbnail as the poster attribute on the underlying video element, so a lighter file means a faster first paint before the shopper taps play.
Override the thumbnail per embed
If you want the same video to show a different thumbnail on a specific page, override it inline on the embed div. This is useful when the same clip runs on the home page and a PDP but needs a different poster for each.
Add the data-bn-poster attribute pointing to any public image URL. Example: <script async src="https://www.itsbeyondregular.com/embed.js"></script> followed by <div data-bn-preset="PRESET_ID" data-bn-poster="https://cdn.yourstore.com/posters/summer-drop.jpg"></div>.
The inline value wins over the dashboard setting for that placement only. Other placements of the same preset keep the dashboard thumbnail.
Shopify theme editor path
On Shopify, you do not need to touch code to place widgets, but thumbnail management still lives in the beyondRegular dashboard, not in Shopify admin. Open your Shopify admin, go to Online Store, then Themes, then Customize, then the section where the beyondRegular app embed is enabled.
The app embed reads the preset ID and pulls the current thumbnail from beyondRegular each time the page loads. So the flow is: update the thumbnail in the beyondRegular dashboard first, then reload the storefront. There is no thumbnail field inside the Shopify theme editor block itself, which keeps the two systems from drifting apart.
Troubleshooting stale or missing thumbnails
If the old thumbnail still shows after saving, the two most common causes, ranked by how often we see them. First, browser cache, hard-refresh with Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac. Second, CDN cache on your custom domain, wait up to 60 seconds or purge from your CDN dashboard.
Less common: the uploaded file exceeded 2 MB and silently reverted to the auto-frame, so re-export smaller. Or the custom poster URL in data-bn-poster returns a 403 or 404, so open the URL in an incognito tab to confirm it loads publicly. If none of these apply, check the browser console for a bn-widget warning line, it will name the exact fallback that kicked in.
Common questions
Can I set different thumbnails for mobile and desktop?
Yes, but not from the same dashboard field. Use two embed divs with a simple CSS media query to show one on mobile and one on desktop, each with its own data-bn-poster. For example, wrap one div in a class that hides above 768px and the other in a class that hides below. Both point to the same data-bn-preset so analytics stay unified. The widget only initialises the visible instance, so there is no double-load cost. Keep the mobile poster at 720 by 1280 to save bandwidth on cellular connections.
Does the thumbnail affect page speed or LCP?
The widget is async and the video lazy-loads, so the thumbnail is what shoppers actually see during the LCP window if the widget sits above the fold. A lighter poster file, under 150 KB where you can manage it, keeps LCP clean. The widget bundle is around 26 KB gzipped and does not block render, so the thumbnail file size is the main lever you control. Serve the poster from a CDN with a long cache header and use JPG at 80 quality unless you need transparency, in which case use WebP with an alpha channel.
What happens if I do not set a thumbnail at all?
The widget falls back to the first frame of the video as the poster. This is fine for clips that open on a clean product shot, but risky for clips that open on a black frame, a face mid-blink, or a title card that has not animated in yet. If you skip the thumbnail step, at least scrub through the first second in the dashboard preview and confirm frame zero looks intentional. For reel feed and floating bubble formats, a strong poster lifts tap-through more than any other single setting, so treat it as required, not optional.