The Spline element embeds an interactive 3D scene created in Spline into your Instant layout. Use it for product visualizations, animated hero backgrounds, or brand moments that flat images can't capture. Spline is available on all plans.
Insert a Spline scene
Open Insert in the left sidebar and switch to Elements.
Go to Advanced → Embed and choose Spline.
Drag it onto the canvas, or click to insert.
Instant inserts a Spline layer with a default sample scene so you can see how it renders before connecting your own. The default size is full width at a fixed 400px height — adjust it in the Size section of the Design panel.
Connect your Spline scene
Select the Spline layer and open the Spline section in the Design panel:
In Spline, export or publish your scene and copy the
.splinecodeURL.Paste the URL into the Viewer field.
The canvas preview updates to show your scene.
Use a hosted .splinecode URL that Spline provides for web embedding, not a local file path.
Target
The Target setting controls where the scene captures pointer events:
Global — the scene responds to pointer events across the page. This can interfere with scrolling or clicking other elements.
Local — interactions are limited to the Spline element's own area.
Choose Local for most layouts, and use Global only when you want a full-page interactive background.
Sizing and performance
Set width and height in the Size section to fit your section. 3D scenes are heavier than static images, so a few habits help:
Optimize polygon count and textures in Spline before embedding.
Avoid placing several Spline scenes on one page.
Test on mobile — complex scenes can stutter on lower-powered devices.
Spline scenes support Instant's standard spacing, conditional-visibility, and responsive breakpoint controls, and publish with the rest of your layout — no extra Shopify setup is needed beyond a publicly accessible scene URL.