About this section
A scene with depth: a background that shifts with the pointer or the tilt of a phone, with product hotspots placed in it.
How to add itCustomize → Add section
Where it can goAny page
Settings17 · 2 block types
Good to know: Use a wide, uncluttered background and two or three products.
Settings
Heading
| Setting | Type | What it does |
|---|
| Eyebrow | Text | — |
| Cinematic heading | Text with bold, italic and links | Set a word in italics to show it in the accent typeface and color. |
| Subheading | Text | — |
| Text position | Choice | Choose Top left, Top center, Top right. Top center to start. |
| Heading size | Slider | From 32 to 120 px, 72 px to start. |
| Text color | Color | #FFFFFF to start. |
| Eyebrow and italic word color | Color | #E3CFA5 to start. |
| Shade behind the text | On / off | A soft gradient that keeps the words legible over a bright picture. On by default. |
Scene
| Setting | Type | What it does |
|---|
| Deep background image | Image | Upload a high quality, wide environmental image. Choose an image from your files. |
| Vertical focus | Slider | The part of the picture that stays in view on wide screens: 0% the top, 100% the bottom. Set it to where your products stand. From 0 to 100 %, 50 % to start. |
| Match products to the light | Slider | Tints and shades transparent product images so they sit in the picture’s light. From 0 to 100 %, 40 % to start. |
| Light comes from | Choice | Choose Left, Right, No particular side. Right to start. |
| Hotspot position | Choice | Choose On the product, Above the product. On the product to start. |
3D parallax settings
| Setting | Type | What it does |
|---|
| Enable 3D depth engine | On / off | Activates mouse tracking (Desktop) and Gyroscope (Mobile) hardware parallax. On by default. |
| 3D movement intensity | Slider | From 0 to 100 %, 80 % to start. |
Section padding
| Setting | Type | What it does |
|---|
| Top padding | Slider | From 0 to 120 px, 36 px to start. |
| Bottom padding | Slider | From 0 to 120 px, 36 px to start. |
Blocks
Blocks are added inside the section with Add block, and can be reordered by dragging.
Midground object
| Setting | Type | What it does |
|---|
| Transparent object image | Image | For example clouds, leaves or abstract shapes (.png) Choose an image from your files. |
| Desktop horizontal position | Slider | From 0 to 100 %, 50 % to start. |
| Desktop vertical position (where it stands) | Slider | From 0 to 100 %, 50 % to start. |
| Desktop size (share of the scene width) | Slider | From 3 to 60 %, 14 % to start. |
Mobile settings
| Setting | Type | What it does |
|---|
| Mobile horizontal position | Slider | From 0 to 100 %, 50 % to start. |
| Mobile vertical position (where it stands) | Slider | From 0 to 100 %, 50 % to start. |
| Mobile size (share of the scene width) | Slider | From 3 to 60 %, 14 % to start. |
Depth settings
| Setting | Type | What it does |
|---|
| Z-Depth level (parallax speed) | Slider | Higher values move faster/appear closer to the screen. From 1 to 100, 20 to start. |
Product hotspot (3D)
| Setting | Type | What it does |
|---|
| Select product | Product | Choose a product. |
| Transparent product image | Image | Leave blank to use default Shopify product image. Choose an image from your files. |
| Desktop horizontal position | Slider | From 0 to 100 %, 50 % to start. |
| Desktop vertical position (where it stands) | Slider | From 0 to 100 %, 50 % to start. |
| Desktop size (share of the scene width) | Slider | From 3 to 60 %, 14 % to start. |
Mobile settings
| Setting | Type | What it does |
|---|
| Mobile horizontal position | Slider | From 0 to 100 %, 50 % to start. |
| Mobile vertical position (where it stands) | Slider | From 0 to 100 %, 50 % to start. |
| Mobile size (share of the scene width) | Slider | From 3 to 60 %, 14 % to start. |
Depth settings
| Setting | Type | What it does |
|---|
| Z-Depth level (parallax speed) | Slider | From 1 to 100, 50 to start. |
