- Films that play on their own are always silent, so they must tell the story without sound.
- Size and placement decide speed: one film per screen, short loops, and a light first frame.
- A good theme loads films only when they come into view and respects visitors who prefer less motion.
A two-second film of a serum dropping onto skin answers questions no photo can: how thick it is, how fast it sinks in, how it catches the light. Video is the most persuasive thing on a beauty store. It is also the easiest way to make a store slow.
Tell the story without sound
Browsers only let films start by themselves when they are muted, so a film in a hero or banner is a silent film. Choose shots that need no words: a pour, a swatch, a hand applying the product, the product in its setting. Six to fifteen seconds that loop without a visible cut is the sweet spot.
Sizes that keep pages light
| Where | Size | Aim for |
|---|---|---|
| Full-width hero or banner | 1920 × 1080 px MP4 | Under 20 MB |
| Portrait cards | 720 × 1280 px MP4 | Under 5 MB |
| Product page films | 1080 px square or portrait | Under 10 MB |
Export as MP4 with the H.264 codec, which plays everywhere, and upload it to Shopify rather than linking to a page: Shopify serves it from its own network.
Placement: one film per screen
Several films playing at once slow phones down and compete for attention. Give each screen one moving thing. Behind the scenes, a well-built theme should load each film only when it comes near the screen, pause it when it leaves, and show a still picture on phones where a film adds little.
Protect the first screen
Google treats a page as fast to load when its largest element appears within 2.5 seconds for most visits. If your hero is a film, its poster picture is often that element. Keep the poster small, and make sure the film's first frame matches it, so the switch is invisible.
Films that play as the visitor scrolls
A scroll-driven film, where the page scroll plays the film forward and back, lets a shopper control the story: ingredients becoming a product, a bottle being filled, a texture changing. It suits one hero product, near the end of the page, with the offer on the last frame.
Respect visitors who prefer less motion
Many people turn on "reduce motion" on their phone or computer because movement makes them unwell. A considerate store shows them the still picture instead of a playing film. It costs nothing and keeps the page usable for everyone.
A quick checklist
- Every film tells its story without sound.
- Each film has a light poster picture that matches its first frame.
- No screen plays more than one film.
- Films are MP4 (H.264) and within the sizes above.
- Visitors who prefer less motion see the picture.
The Acanthus guides to adding a film, the scroll film and keeping your shop fast show the setup.
Sources
I design and build websites, online stores and business systems for clients in the US, UK, Europe, Australia and Canada, from Colombo, Sri Lanka. When you work with iVishwa, you talk to me directly, from the first call to launch and after.
Building a beauty store on Shopify?
Acanthus is our Shopify theme for skincare and makeup brands: every tool in this series is built in, with a help center that walks you through each one.
