Style Edit Mode

The mode for shaping how the published viewer looks. Only three tabs remain on the right — Style · Cinematic · Connection — and the viewport shows the actual published viewer, pixel for pixel. What you see here is what ships, so you can tune background, UI and presentation by eye. A local item that has never been saved gains access after its first save.

Getting started

Choose Style from the editor mode switcher. Style settings are stored per item, and the header at the top of the tab shows the current state.

• Save / Save changes — writes the style settings to the item. "Style saved" and "No saved style" tell you whether one exists
• Delete — removes the saved style and returns to defaults
• Preset settings — pick a preset registered for your organization and press Load to replace the current settings with it, then adjust individual items
• Share — buttons to copy the share link, open in a new tab, copy the HTML tag and view statistics

The Style and Cinematic tabs share this save header, so saving from either tab records both.

Style tab

The viewer's basic appearance and behavior, from top to bottom.

Background

• Background type — color · image · 360 image · transparent
• Color — background color and fallback color
• Image — upload a PNG/JPG/WebP (5 MB or less) and set fit (cover · contain · stretch), position (center · top · bottom · left · right) and opacity
• 360 image — wraps a 2:1 equirectangular image (10 MB or less) around the scene; 360 rotation turns it. It is a visible background only; the environment/reflection settings stay unchanged
• Transparent — the host page shows through in an iframe embed; the embed code picks this up automatically
• Reflection mode — how the background reflects on the splat surface

Loading

Turn on the custom loading logo and set the logo image, width/height, background color and breathing animation. If statistics show many exits before load, start here.

Rotation

• Rotate mode — Auto keeps turning at a constant rotation speed; Keyframe plays the camera keyframes from the timeline. This is the key setting for how the item moves when the viewer opens
• Return to initial view when idle — after the visitor moves the camera and then leaves it alone for the delay (seconds), the view eases back to the initial position and target

Animation

Animation mode is none · loop · once, deciding whether keyframe animation repeats or plays a single time. Building a timeline → Timeline and animation.

Thumbnail

Thumbnail options are use · don't use · popup. Use shows a thumbnail before loading the 3D scene; popup opens the viewer in a popup when the thumbnail is clicked and can show an exit button.

UI settings

• UI type — 360 White 1–7, 360 Black, Finger, Finger Anim, Toggle 3D, 3D Logo, SSF 360 or None for the interaction hint UI
• Position — middle · left top · right top · left bottom · right bottom, with X/Y offsets under detailed position
• UI scale and UI size (px) — set separately for PC and mobile

Dimension display

Show dimensions by default opens the viewer with the dimension UI visible. Dimensions themselves are authored in the Dimension tab of normal edit mode.

Status display

Shows states such as color variants in the viewer based on product metadata. Open Product metadata & management first and set the product group, color names, icons and order.

• Color bar — basic · labeled · underbar · bottom buttons · icon · icon labeled · hidden
• Color chip outline — default · strong · white · none

Controller

• Camera type — Object (orbit around the product) · Map · Pointer Lock · Walk · Presentation
• Move to double-clicked point — moves the camera target to the 3D point you double-click
• WASD movement — lets visitors move the camera with the keyboard

HTML settings

PC width, mobile width and aspect ratio (1:1 · 9:16 · 16:9 · custom) of the embed iframe. Copy HTML tag uses these values.

Viewer 3D area

The area inside the iframe that the actual 3D canvas occupies. Pick the compact · wide · full preset or set PC 3D area width and mobile 3D area height directly.

Performance

• Rendering quality — full (original) · high (1024) · medium (512) · low (256) · very low (128) · custom. Lower render resolution keeps frame rates up on weak devices
• Sort precision and sort throttle — precision and update rate of splat sorting
• Sharpen when idle (supersampling) — re-renders at a higher resolution once the camera stops
• LOD — filters detail splats by distance or screen size to reduce render load. Combine the two criteria with AND/OR and tune the always-visible percentage, render distance, fade width and minimum pixels

Other settings

Toggle the viewer info, dynamic loading and viewer logo.

Cinematic tab

Advanced effects applied to the viewer for a wide range of presentations, in three sections.

Cinematic

• Depth of field (background blur) — focal length (longer is more telephoto; portrait feel around 85 mm), f-stop (lower is shallower), sharp range (give it the product's thickness to keep the product sharp and blur only the background), depth sensitivity, focus distance (0 = auto focus on the surface at screen center)
• Ground shadow — Radial is a soft round shadow independent of shape and always cheap; Silhouette projects the product's actual footprint from the splat or the collider. Adjust height falloff, opacity, softness, light slant, shadow direction, size, aspect, angle and position; auto-fit on load sizes and places it from the product
• Vignette — darkens the edges slightly to draw the eye to the product
• Reveal fade — the product fades in after loading
• Camera intro — on load the camera eases in from a slightly pulled-back angle; any interaction cancels it
• Gyro parallax — the view follows the tilt of a mobile device

Reveal fade and camera intro are viewer-only and do not play in the editor preview.

Cinematic+ (look and presentation)

• Look presets — reset the settings below and apply a combination in one step; adjust individually afterwards or return to defaults
• Look grading — color filter (none · mono · sepia · cool · warm · vivid · fade), color temperature, exposure/contrast/saturation. Applied at the compositing stage (CSS) with no render cost, but not included in video recording or thumbnail capture
• Overlays — spotlight, ambient wash (top environment light) and its color, film grain, letterbox (cinema bars) and bar height, vignette color, ground shadow tint, title card (product name)
• Frame · background — corner radius, card shadow, background gradient for solid-color mode (start color · end color · direction)
• Camera motion — intro style (swing · dolly · rise), reveal fade duration, mouse parallax (PC), idle drift, swing rotation and angle, pause auto-rotate on hover, camera damping

Viewer UX (feel, convenience, quality)

• Feel — rotate sensitivity, zoom sensitivity, flick spin (inertia), double tap zoom (mobile), double-click on empty space resets the view, haptics (mobile), grab cursor
• Convenience — scroll guard (tap before interacting in embeds), first-visit controls hint, screenshot button, copy-current-view link button, content protection (block right-click), long idle sleep (4 minutes)
• Quality · accessibility — auto quality (lower resolution on weak devices), mobile lite (turns heavy effects off), respect reduced-motion settings, loading progress display, canvas fade-in, dark-mode background color

When visitors leave without realizing the viewer is interactive (many bounced sessions in statistics), auto rotation, the first-visit controls hint and idle drift help.

Connection tab

Connecting two items adds a switch button to the viewer so visitors can move between them.

• Connection kind — open/closed (for example a lid open and closed) and variation (for example color variants). An item can belong to only one connection of each kind, so disconnect first to create a new one
• This item's state and item to connect — set this item's role (open or closed) and search the partner by name or ID. Items already in a connection of the same kind cannot be chosen
• Viewer button — the display style of the viewer's shortform, dimension and open/closed buttons (TYPE 1 · TYPE 2), shared by the whole item. Button labels are stored separately with Save label
• Transition crossfade — on, the switch blends over the previous frame; off, it jumps straight to the loading display
• Go to → opens the partner item's editor; Disconnect removes the link

Switch clicks and load success are collected under "Connected item switches" in statistics.

Product information

Product metadata & management in the Status display section holds the product name, brand, model number, price, color, linked website, and the product group, color names, icons and order used by the status display. It also appears in the library and on the detail page.

Publishing and embedding

• After saving, get the embed code from Copy HTML tag in the Style tab or Copy tag on the item detail page and drop it into your store or website as one line. The width, aspect ratio and transparent background from HTML settings are included. Details → Library › Publish and share
• Platforms that block script embeds (such as Smart Store) can use a 3D rotation video instead