Signature section
La Coupe — 3D bonbon
An interactive WebGL cross-section of a bonbon — drag to rotate, slide to cut. It is engineered to be beautiful and fast: the 3D engine only loads when the section is about to enter view, and a photograph stands in wherever WebGL isn’t available.
Performance-first loading#
The heavy 3D engine (Three.js) is not loaded with the page. A tiny loader script watches the section and only fetches the engine when the visitor scrolls near it. On a homepage where La Coupe sits below the fold, this means it never touches your first paint — so it doesn’t weigh on Core Web Vitals.
You don't need to do anything
The photographic fallback#
When the 3D toggle is off, or a device can’t run WebGL, the section shows a still image instead — so it always looks intentional. Provide your own fallback image, or the theme uses a bundled macro photograph.
| Setting | Type | Default | Description |
|---|---|---|---|
enable_3d | checkbox | On | Turn the WebGL cross-section on. When off (or without WebGL), the photograph shows. |
fallback_image | image | — | Still shown when 3D is off/unavailable. Defaults to a bundled macro. |
kicker | text | — | Small eyebrow above the heading. |
heading | text | — | Section heading. |
text | textarea | — | Supporting copy. |
product | product | — | Powers the price and the add-to-cart button. |
price_fallback | text | — | Shown when no product is connected. |
button_label / button_link | text / url | — | Optional CTA when no product (or sold out). |
button_style | select | Framboise | Framboise / Gold / Ghost. |
color_shell / color_ganache / color_caramel | color | — | The three bonbon layers rendered in the 3D scene. |
show_wave | checkbox | On | A gilded ganache-wave divider under the section. |
Layer legend#
Add Legend rowblocks (up to four) to label the layers beside the scene — each with a swatch colour, a layer name and a short description (e.g. “The ganache — framboise & crème d’Isigny”).
Colours are shared with the model