Product Cinematic and Frame Sets

Where to find: Catalog → Products → product edit screen → Frame Sets card Who it's for: Anyone who wants to feature a single product with a product video that plays as the page scrolls In short: You upload a product video or a sequence of photos; the system turns it into a frame set. That set is used by the Product Cinematic block on the product page.

---

What is it for?

For some products a flat image is not enough. A short clip showing a bag opening, a headphone turning or the sole of a shoe makes the customer feel as if they were holding the product. Product Cinematic places that clip on the product page; as the customer scrolls, the video moves forward or backward and a heading, a description or a buy button appears at chosen moments.

Before that, the video has to be converted into a frame set. This article explains what frame sets are and how to create them, and then how the block is composed and published in the theme editor.

What is a frame set?

A frame set is a video or photo sequence split into individual, ordered frames bound to a product. Every frame is stored in two sizes: 1440 pixels wide for desktop and 720 pixels wide for mobile. Frames are WebP files, small and quick to load.

• Each set belongs to one product. You can also bind it to a specific variant (a colour, for example).
• A product can have several sets; you pick which one to use in the block.
• Sets are not added to the gallery, so your gallery is not flooded with thousands of frames. Only the original video, if you chose one, is saved to the gallery as a regular video.
• Frames are produced in your browser and uploaded to your store. No video processing happens on the server, so the job takes anywhere from a few seconds to a minute or two depending on your computer.

Creating a frame set

1. Open the product under Catalog → Products. If the product has not been saved yet, save it first; the card is inactive on a new product.
2. In the Frame Sets card at the bottom of the form, click Create Frame Set.
3. Choose the source: Video or Photo sequence.

From a video

• Pick an mp4 (H.264) or webm file. The file can be up to 100 MB.
• Give the set a name. The file name is used by default.
• Choose the frame rate (fps). The default is 24; any value between 15 and 30 is accepted.
• If the product has variants, optionally pick a variant. Leave it empty and the set applies to all variants.
• The window shows how many frames these settings produce and the maximum your plan allows. If the limit is exceeded you can lower the frame rate with one click (see below).
• Click Start extraction. The video is uploaded to the gallery first, then frames are extracted and sent to your store. Progress is shown as "38 / 192 frames".
• When it finishes, the first frame is shown as a preview and the set appears in the list with the Ready badge.

If the same video is uploaded again the system notices and suggests using the existing set. You can still choose to create a new one.

From a photo sequence

• Select several photos. They are ordered by file name (names like 01.jpg, 02.jpg make this easy); you can drag to reorder.
• If the photos have different sizes, the aspect ratio of the first photo is used and the others are cropped from the centre.
• Every photo becomes one frame; no frame rate is asked.

Frame rate and duration tips

• 24 fps is enough for a scroll-driven sequence. 30 fps only makes a difference with very fast motion; 60 fps is not supported because it doubles the size without a visible gain.
• A clip of 5 to 15 seconds is ideal. An 8-second video produces 192 frames at 24 fps and 240 frames at 30 fps.
• The first frame of the video is printed on the page as the preview; make sure the clip starts with a frame that shows the product clearly.
• A fixed camera and steady lighting prevent jumps between frames.

Plan limits

Frame sets are limited by your plan. Frames count towards your storage quota; they are not counted separately.

When the frame count of a video exceeds the limit, the window warns you and suggests a frame rate that fits. For example a 15-second video produces 360 frames at 24 fps; on the Professional plan the limit is 240, so 16 fps is suggested. If the video does not fit at any rate, upload a shorter clip or upgrade your plan. When the set allowance for a product is used up, delete one before creating a new set.

The "Incomplete" status and uploading again

If you close the tab or press Cancel while frames are uploading, the set stays in the list with the Incomplete badge. In that case:

• Click Upload again on the card and select the same video file. The system produces and uploads only the missing frames; frames already uploaded are not sent again. Picking a different file shows a warning.
• For a photo sequence, select the same number of photos again.
• Sets that are not completed within 24 hours automatically switch to Failed and their partial frames are deleted. Delete such a set and create it again.

Managing sets

For every set in the Frame Sets card:

• Rename — changes the set name. The name is only shown in the panel.
• Variant — binds the set to a variant or returns it to "All variants".
• Delete — permanently deletes the set and all of its frames. A cinematic block using this set is left empty on the storefront; pick another set in the block.

When you delete a product its sets are not removed immediately; they are cleaned up automatically after 30 days.

Adding the block to the page

Once a frame set is ready you add the block in the theme editor. The block works in two places:

• Per-product detail page — the most natural home. Open the editor from the Custom page for this product card on the product form (see Per-Product Detail Page); since the product is known, its frame sets are listed directly.
• Product Page Template — the block can also live on the general template. Pick a real product from your store with the preview product picker at the top right of the canvas; the block then shows that product's frame sets. Sample products have no frame sets, so the picker stays empty. On the storefront the block is simply not shown for products without a frame set.

In the left panel, under Product Page → Media and Path, click Product Cinematic or drag it onto the canvas. The block is optional; it can be added even when no other product blocks are on the page. When the block is selected the properties panel on the right shows these tabs: Source · Timeline · Layers · Progress · Appearance · Visibility · Advanced.

Source tab

• Frame set: the product's ready sets are listed with their poster, frame count and frame rate. Click one; the first frame appears on the canvas. From the same place, Create new frame set opens the same window as on the product form. Changing the set keeps the timeline and layers; if the frame count differs, review the ranges.
• Frame set per variant: the product's variants are listed; each row picks the set shown when that variant is selected (see the section below).
• Mode: Scroll cinematic or 360° spin. Choosing spin opens the sensitivity, auto-rotate and inertia settings underneath (see "360° spin mode").
• When the set is not ready: if the frame set is still processing or the visitor's browser cannot play the frame sequence, the block either plays the original video plainly or shows only the poster.
• Reduced motion preference: choose whether visitors with "reduce motion" enabled see the first frame with the layers or the plain video.

If no frame set is selected, the Timeline and Layers tabs say "Pick a frame set on the Source tab first" and the canvas shows a placeholder. Publishing is not blocked in that state; the block is hidden on the storefront.

Frame set per variant

If you want a different clip per color or pattern, attach a separate frame set to each variant. On the Source tab, the Frame set per variant table under the selected set lists the product's variants; use the picker on each row to choose a set for that variant, or leave it at Use default. Sets created with a variant selected come first in the list and carry a "Belongs to this variant" badge.

• On the storefront, when the visitor picks a color in the variant picker the block switches to that variant's set; variants without a mapping show the default set.
• The frame is kept across the switch: if the visitor is halfway through the clip, the new set continues from the middle. When frame counts differ, the frame is mapped proportionally (frame 95 of a 191-frame set becomes frame 18 in a 36-frame set).
• The timeline and layer ranges are built against the default set and applied at the same proportion on sets with a different frame count; a short hold stays a single frame in a short set.
• When a set is not ready or reduced motion is on, the poster and the plain video also come from the selected variant's set.
• You can see the switch in the editor even without a variant picker block: a Previewed variant picker appears above the frame slider on the Timeline and Layers tabs. It only affects the canvas and is never written to the published page.

Variant clips shot with the same camera angle and the same duration switch seamlessly.

Cinematic templates

If you would rather not build the composition from scratch, pick a ready-made package under Apply a cinematic template at the bottom of the Source tab. A template fills in the timeline, the layers and the progress indicator in one go; it leaves the frame set alone. Frame ranges are scaled to the set's frame count, so the same template yields a valid timeline for a 6-frame photo sequence and for a 191-frame clip.

The heading comes from the product name and the description text from the product's short description (if there is none, a placeholder sentence is used; fill it in on the product form). Colors use the theme colors; there are no fixed colors in a template.

If the block already has a composition you are asked to confirm first, because the existing timeline and layers are replaced. Applying is a single step: Undo (Ctrl+Z) brings the whole previous composition back. The cards are disabled until a frame set is selected.

The five-minute flow: add the block, pick the set, apply a template, change two texts on the Layers tab, publish.

Key moments with AI

On the Source tab, below the template picker, the Key moments with AI section has a Suggest key moments button. It is enabled when a ready frame set is selected. Clicking it sends frames sampled from the set (every sixth frame, at most forty; the step grows for long sets) to a vision model at low resolution. The model also sees the product name and short description; its suggestion is listed in three groups:

• Scenes: the natural sections of the clip (for example "overview", "detail"), each with its frame range.
• Suggested holds: the frames where the product looks best.
• Layer drafts: heading, text, badge, callout or hotspot suggestions, each with a draft text and a frame range.

The Add button next to a row applies that suggestion with one click: a scene opens a new segment at that frame, a hold adds a single-frame hold segment, a layer draft creates a new layer with its text. Apply all applies the whole suggestion; if the block already has a composition you are asked to confirm first. Applying is a single step, so Undo (Ctrl+Z) restores the previous composition entirely. In 360° spin mode only layer drafts are listed, since scenes and holds do not apply there.

The suggestion usually arrives in under a minute, depending on model load. If it takes longer than a minute a "still working" note appears; Cancel stops waiting. A suggestion generated for a frame set is kept for one day: if the product name and description have not changed, pressing the button again returns the same result instantly without calling the model; use Regenerate for a different suggestion. Generation counts against your monthly AI quota (frame images cost far more tokens than text; a forty-frame request can be tens of thousands of tokens). If the quota is exhausted or your plan has no model that can inspect images, the button shows an explanatory warning. See Yapay Zeka Araclari.en for how the AI tools work in general.

The frame slider

A frame slider sits above the Timeline and Layers tabs. It lives on top of the segment strip: click and drag on the strip and the playhead moves to that frame, with the canvas following; typing a frame number in the box works too. The thin line under the strip shows the frame ranges of the layers; the selected layer is drawn darker. The frame number and the second are shown above.

While the slider rests on a frame the canvas ignores scrolling and the layers appear as they look on that frame, so you answer "where does the heading sit on this frame" by looking at the canvas. The frame is kept as long as the block stays selected; switching tabs does not reset it. Back to scroll mode or selecting another block returns the canvas to normal scrolling.

When you move quickly the canvas shows the nearest loaded frame and switches as soon as the target frame arrives; frames around the slider are loaded first, so the wait is short.

The Play button plays the composition in the editor: if the selected segment is an Automatic one and the playhead is inside it, only that segment plays with its own duration; otherwise the whole timeline runs to the end at an estimated pace (based on the frame rate, automatic segment durations and holds). The same button stops; Go to start moves the playhead to the start of the range. With the strip focused, Space plays/pauses, the arrow keys step one frame and Shift+arrow ten.

Timeline tab

The timeline consists of segments that decide how the frame set flows as the visitor scrolls. There are three kinds:

How it works:

• Add segment starts a new segment on the slider's frame. If the frame is in the middle of a segment, that segment is split in two; if there are no segments yet, one scroll segment covering all frames is created.
• Click a segment on the strip to open its settings: kind, start and end frame, duration and easing for auto, share for scroll, distance for hold. You can delete the segment there.
• Drag a segment's edge to lengthen or shorten it. A hold segment is a single frame, so dragging moves it.
• The line under the strip reports the timeline's state. It warns about gaps (frames in no segment) and overlaps (frames in more than one segment). Fill gaps and trim overlaps fills the gaps with scroll segments and trims the overflowing ones.
• While a gap or overlap exists, Publish is blocked and a dialog lists which block and which frames have the problem. A block without a frame set does not block publishing.
• Total scroll distance sets how many screen heights the block occupies on the page (200–800). You can give mobile its own value; when left empty, sixty percent is used. Each segment box shows its share of the total distance as a percentage.

360° spin mode

Choosing 360° spin on the Source tab turns the same frame set into a product turntable: visitors rotate the image by dragging horizontally with the mouse, a finger or a pen; horizontal trackpad and wheel scrolling also rotate, while vertical scrolling keeps scrolling the page. With the box focused, the arrow keys turn one frame, Shift + arrow one twelfth of a turn, and Home returns to the start. A "Drag to rotate" hint shows on the first frame (the hint switch on the Progress tab turns it off as well).

Settings:

• Sensitivity (1–10): at 5, dragging the width of the box makes one full turn; at 10 half the width is enough, at 1 you drag five times as far.
• Auto rotate and speed (turns per minute, 1–10): the product turns by itself once the block is visible; it stops when the visitor touches it and resumes three seconds later. Visitors with "reduce motion" enabled get no auto rotation; dragging still works.
• Inertia: after release the motion slows down gradually; when off, it stops on the frame you released.

In this mode:

• The Timeline tab is hidden; the existing timeline is not deleted and comes back unchanged when you return to scroll mode. The publish check ignores the timeline in this mode.
• Layers work with an angle range. The frame range fields stay the same, with the degree equivalent next to them (in a 36-frame set, frames 9–18 mean 90°–180°). The slider reads "Angle 90° · frame 9 / 35". Hotspots are the most useful layer here: a detail on the back of the product shows only at those angles.
• The progress indicator shows the angle: the ring naturally maps to one turn, bars show the fraction of a turn, the counter shows the frame number.

Which products? Anything people want to see from every side: shoes, bags, furniture, accessories, devices. For garments whose surface changes, scroll mode is more effective.

Shooting tips: place the product on a turntable, fix the camera, and shoot in equal angle steps (36 photos for 10°, 72 for 5°); 24 photos is the minimum, 36–72 look smooth. Keep the light and background identical in every frame and upload the photos in file-name order (From a photo sequence). If you use a video, pick a clip where the product makes exactly one turn and starts and ends at the same angle.

Hotspots

A hotspot is a dot on the frame that opens a small card when touched. Add one on the Layers tab with Add layer on this frame → Hotspot.

• Point: dragged on the canvas with the blue handle; it snaps to guides and 1 % steps. The X/Y fields in the panel are the fallback. Turning on "Move the point across the frame range" shows a second end point (ring) and the point travels between the two along the range, as with the callout line.
• Card: title, description and an optional linked product. The linked product uses the same component as the product card of the Complete the Look block: image, name, price and a Go to product link. Product data is fetched the first time the card opens and cached.
• Preview card shows the card content inside the panel; on the canvas the dot does not open the card in the editor, clicking it selects the layer.
• On the storefront the dot pulses gently (not when "reduce motion" is on). Hovering opens the card and leaving closes it; clicking pins it, clicking again or Esc closes it. The card never leaves the frame box; when there is no room it flips from top to bottom or right to left. Scrolling the page closes the card.
• Keyboard: the dot is a button; Tab focuses it, Enter or Space opens the card, Esc closes it. Screen readers announce the title as the button name and the description as the card's description.
• The dot is visible in its frame range; in 360° spin mode that range is an angle range, so the hotspot appears only at those angles. On the reduced-motion poster, hotspots are listed as cards below the poster.

Layers tab

Layers are pieces of content shown during a chosen frame range. There are eight kinds: Heading, Text, Badge, Button, Price, Image, Callout line and Hotspot.

• Move the slider to the frame you want and press Add layer on this frame; pick a kind. The layer starts on that frame and ends thirty frames later; you can change the range afterwards.
• Every layer in the list shows its kind, its text and a small strip for its frame range. The eye icon hides the layer on the storefront, the arrows change the order, the bin deletes it.
• Clicking a layer moves the slider to its first frame, highlights the layer on the canvas and opens its settings:
  • Kind and frame range. Changing the kind resets the content to that kind's default.
  • Position: pick the anchor on the 3×3 grid and fine-tune with the X and Y fields in percent. The main way is dragging on the canvas (see below); these fields are the fallback.
  • Max width, enter and exit animation (fade, slide, blur and duration).
  • Content by kind: text, typography and color for heading and text; text and tone for badge; label, action (Add to cart, Scroll to variant picker or a link) and button style for button; whether to show the compare-at price for price; an image from the gallery, width and alt text for image; text, target point, optional moving end point, label end, straight or elbow line, elbow point, thickness, dot at the tip and label alignment for the callout line; point, optional end point, title, description and linked product for the hotspot (see "Hotspots").
  • The Typography field starts as "Theme default" and shows the storefront size for that kind (48 px semibold for a heading, for example); Customize writes the actual values so you can edit them. Back to theme default reverts. This way a heading does not shrink just because you touched the field.

Image layer

The image layer places a gallery image on top of the frame: a detail photo, a logo, a certificate. Width is a percentage of the frame box; the image is positioned by dragging on the canvas. When alt text is left empty the product name is used. In reduced-motion mode the image is listed below the poster together with the other layers.

Positioning by dragging on the canvas

In the editor the layers on the canvas are grabbed and moved directly. While the slider rests on a frame, the layers visible on that frame are outlined; the selected layer's outline is blue.

• Drag a layer with the mouse or by touch; when you release, the new position shows up immediately in the panel's X/Y fields. Positions are stored as percentages of the frame box, so they stay in place across screen widths.
• Dragging snaps to 1 % steps. Hold Shift while dragging for finer control.
• Alignment guides: while dragging, when the layer gets close (about 1 %) to the center or the edges of the frame box, or to the center or an edge of another layer, a line in the theme color appears and the layer aligns to it. Box lines are slightly faded, layer lines are solid. The callout line's handles use the same guides. With Shift held, both guides and snapping are off.
• Nudge the selected layer with the arrow keys by 1 %, with Shift + arrow by 5 %, with Alt + arrow by 0.1 %. When navigating with the keyboard the focused handle shows a ring.
• The callout line has four handles: the target point (blue circle), the moving end point when enabled (ring), the elbow point on an elbow line (orange square) and the label end (green diamond). Each is dragged separately; grabbing the label text also moves the label end.
• Every move enters the editor history as a single step; Undo returns the layer to its previous place and the canvas reflects it at once.
• Per-device position: switch to the tablet or mobile view in the top bar and move a layer, and the change is saved for that device only; the desktop position stays. A "Mobile only" badge and an arrow to return to the desktop value appear next to the field in the panel. When no mobile value is set, the desktop value is used. On mobile, callout labels that would overflow on the right are automatically placed below the line.

Progress tab

Choose the indicator that shows visitors how far they have scrolled. Each card has a small preview:

• A top, bottom or left bar: thickness is in pixels.
• Dots: one dot per segment; the active segment's dot is elongated.
• Ring: an arc that fills up in the top right corner. Thickness sets the stroke width and the size of the ring.
• Counter: a small pill in the top right corner; Counter format switches between percent (42%) and frame / total (81 / 191).
• None.

The color comes from the theme colors or a custom color. You can turn off the "Scroll" hint shown on the first frame. The indicator works with the same style on the plain video that plays when the set is not ready; the reduced-motion poster has no scrolling, so no indicator is drawn there.

Publishing

When the composition is done, press Publish. On a per-product page only that product's page is published. If the timeline has a gap or an overlap, publishing stops and asks you to fix it. After publishing, open the product page on the storefront on desktop and on a phone and scroll through it; frames, layers and the indicator should flow as they did in the editor. In 360° spin mode the timeline is not used, so that check is skipped.

Sharing the composition

To let other merchants reuse a composition you like, use the Share composition with the community button at the bottom of the Source tab. Enter a name, description and tags and press Submit for review; the composition enters the community queue as a composition template. The flow is the same as community sharing in the Component Studio: it passes admin review and, once approved, is listed in other stores' editors under the Community tab with a "Composition template" badge (see Bilesen Paylasimi.en).

The frame set is not part of the share; it belongs to your product and is large. The template carries only the timeline, the layers (with their texts and positions), the progress indicator, mode, scroll length and appearance settings. Store-specific fields are cleared on export: variant mappings, poster and fallback video, the linked products of hotspots, button links and preview data. A submitted template cannot be edited; if you change the composition later, you submit a new share.

In the installing store the block arrives in the "select a frame set first" empty state with a note showing how many frames the template was made from. When that store selects its own frame set, the timeline and layer ranges are scaled once to the set's frame count; for example a 191-frame composition holds on frame 18 in a 36-frame set. A template can only be added to the product page template or a product-specific page.

How it looks on the storefront

Once the Product Cinematic block is on the product page and a frame set is selected, this is how it behaves:

• Scrolling: The block takes up the scroll distance set in the block (four screen heights by default). While the visitor scrolls through that area the picture sticks to the top of the screen and the frames run forward or backward. With a sticky menu the picture sits right below the menu. When the distance is used up the page continues as usual.
• Page load: The first frame of the set arrives with the page; the remaining frames start loading in the background, in sparse steps, when the block gets close to the screen. If a frame has not arrived yet the nearest loaded frame is shown, so scrolling never waits.
• Automatic intro: If the timeline has an automatic segment, that part plays once on its own when the block becomes visible. As soon as the visitor scrolls, playback stops and scrolling takes over.
• Holds: In a hold segment the frame stays fixed; the visitor keeps scrolling but the picture does not change. Layers can appear and disappear during a hold.
• Layers: Headings, text, badges, buttons, prices and callout lines appear within their frame range and enter or leave with the animation you chose. Text is real text: it can be selected and is read by screen readers. The add-to-cart button uses the variant and quantity selected on the product page.
• Progress bar: A thin bar above, below or to the left of the block shows scroll progress; the dots style shows one dot per segment. A "Scroll" hint is shown on the first frame and disappears on the first scroll. The ring and counter styles will arrive in a later release; for now no indicator is drawn when they are selected.
• Mobile: On phones the frames load from the smaller size and the scroll distance drops to sixty percent automatically; you can set a separate mobile distance in the block settings. Touch scrolling works the same way.
• Reduced motion: If the visitor has enabled "reduce motion" on their device, the frame sequence and sticking are disabled. Depending on the block setting, either the first frame with all layers is shown as a plain list, or the plain video plays if there is one.
• Video and poster fallback: If the frame set is not ready, has been deleted, or the browser cannot play the frame sequence, the block is never left empty. With the "Video" fallback the original video plays muted in a loop and layers appear in sync with time. Without a video, or with the "Poster" fallback, the first frame and the layers are printed.
• No frame set selected: The block is not shown on the storefront at all; in the theme editor a placeholder says "select a frame set first". The block is not part of the quick view dialog.

Cinematic completion report

The Cinematic completion card on the management dashboard shows how much of the Product Cinematic block visitors watched. While the block is on screen the storefront tracks whether 25, 50, 75 and 100 percent of the frame flow was reached, how long the block stayed visible and, in spin mode, how many drags happened; it sends these as a single event when the visitor leaves the page or scrolls away from the block for ten seconds without returning. Previews in the theme editor are not counted.

The card follows the dashboard period picker and lists per product: views is the number of visits where the block was on screen; 25% / 50% / 75% / 100% is the share of visits that reached that point (frame percentage in scroll mode, share of a full turn in spin mode, share of the duration in the video fallback); average duration is the average time the block stayed on screen. Open the card for the full per-product table; clicking a product opens its editor. With no events yet the card says "No cinematic views yet".