Experience & Atmosphere Builder

PRO VISUAL SUITE

Select any store product, assign photos from your Shopify catalog, customize the Cinematic Section (ratio & crop), the Description Card, and tune the Ambient Background Blobs.

🎛️ Studio Hub ← Back to Store

📥

Import Existing Metafield JSON Pick up edits exactly where you left off without starting all over

Step 1: Product & Media Library

Select Product & Browse Photos

Click any product to reveal all its high-res media photos

BARBANERA

2 photos

BLACK PEARL

6 photos

CE-1 Ensemble Crunch

1 photos

Chorus Ensemble

1 photos

JF Fuzz

2 photos

Malombra

2 photos

Scar Fuzz

3 photos

Triungulo Lab HARAFNA

2 photos

Triungulo Lab Keychain

1 photos

Triungulo Lab Major

2 photos

WH-X

4 photos

WH-X V2

8 photos

WH10 Potentiometer

5 photos

Step 2: Interactive Customizers & Live Previews

Customize Sections & Atmosphere

🎬 Cinematic Settings

Section ON

Cinematic Image URL:

Glass Box Aspect Ratio: Auto (Natural)

🎯 Interactive Crop & Focal Point 50% 50%

Horizontal Focus (X) 50%

Vertical Focus (Y) 50%

Image Zoom & Scale 1.0x

Fill Mode:

Eyebrow Badge Text:

Dynamic Subheading Text: (type \n or press Enter for newline)

Atmosphere Back Glow Colors: Add, remove, or customize glow colors

Crafted Without Compromise

Hand-assembled in Italy with bespoke components, pristine tolerances, and uncompromised tone.

🖐️ Click & drag photo to reposition

💡 Hover card to test smooth zoom & glowing back spheres

📖 Description Glass Card

SLIDESHOW SELECTOR

In your storefront Product Description section (directly below the Hero), a floating liquid glass panel displays an angle/detail shot from your product slideshow. Pick which image number to showcase!

🔢 Product Slideshow Photo:

Active: Photo #2

Or click directly on any photo thumbnail:

Select a product in Step 1 above to view and click its photo cards here.

📱 Mobile Placement: Top (Above Text)

Choose where this glass card is positioned on mobile phones (on desktop it is always placed at the side of the description text).

Photo CDN URL (Auto-syncs with number):

Glass Card Reflection Tint:

Saved into custom.visual_experience.description_card.

Liquid Glass Card Preview Live visual demonstration of the floating glass card & mobile placement

Mobile: Top Photo #2

✨ Rendered as Apple Liquid Glass with dynamic tint reflections.

9:41

5G 🔋

TRIUNGULO LAB CART (0)

The details

Why magicians keep this in rotation

Active: Top

💎 Description Glass Card (Placed at Top)

Milled and hand-finished with meticulous attention to detail. Every unit is individually inspected to ensure flawless operation and durability.

✔ 100% Hand-assembled in Italy

✔ Bespoke audio-grade components

Next Storefront Section: 🎬 Cinematic Image Section

📍 Mobile Placement: Top (Above Description Text)

🖼️

Phantom Hotspots View

Active Target Photo

3 Hotspots Placed

100%

💡 Click image to drop pin • Drag pin to reposition X: 0% Y: 0%

🎯 Product Hotspots

Hotspots ON

Presentation Layout:

Single Photo mode displays one large centered glass frame.

💡 Powers the animated marquee ticker, glowing glass frame, and interactive feature callouts (+ pins). If toggled OFF, this section is hidden from the storefront.

Image & Frame Styling

Hotspots Base Image URL:

Pick Photo 1 From Selected Product Photos:

Infinite Marquee Ticker Text:

Glass Card Frame Tint (Border & Glow):

📍 Placed Pins

Click any pin to inspect & edit

Pin #1 Inspector

Feature Title:

Callout Description:

X Axis (%) 48.0%

Y Axis (%) 66.0%

⌨️ Tip: You can also use arrow keys (or Shift + arrows) on your keyboard to fine-nudge the selected pin.

✨ Atmosphere & Blobs

Blobs ON

🛡️ Strict Base Canvas Isolation: These atmosphere blobs apply exclusively to the base page background canvas (.page-backdrop). They will not bleed into or alter the Hero, Hotspots, or Product Video sections.

Base Page Background:

Blob Color Palette:

Blob Count 8

Blur Amount 100px

Opacity 0.65

Drift Speed (Duration) 32s

Live Ambient Blobs Simulator

💡 Sliders on the left update this drift canvas live in real time. Hardware-accelerated CSS keyframe transforms.

📄 PDF User Manual

Button ON

💡 Product Page Behavior: When a PDF manual is configured, a floating Apple Liquid Glass pill button appears between your Product Hotspots and Video section. If no manual is selected (or toggled OFF), the button disappears completely from the product page!

📂 Load from Shopify Files Easily select uploaded PDF manuals from your store catalog or open Shopify Files.

↗️ Open Shopify Files (Admin)

⚡ Quick Select from Uploaded Product Manuals:

🔍 Quick Filename Matcher (Shopify CDN):

Enter the filename of any file uploaded to Shopify Admin > Content > Files to generate its exact CDN URL automatically.

Current Active PDF Manual URL:

Button Text Customization (Optional):

Main Label:

Subtitle / Description:

Storefront Button Live Preview Exact Apple Liquid Glass button rendered between Hotspots and Video section

🟢 ACTIVE ON STORE

⬆️ Above: Product Hotspots Section & Frame

USER MANUAL Official Guide & Documentation

⬇️ Below: Product Videos Section

💡 Click the button above to test opening the linked PDF in a new tab.

Step 3: Save to Shopify Product

Unified Metafield Code: `custom.visual_experience`

Target Product: (Select product from catalog)

How to apply to your product in Shopify:
1. Click "🚀 Save Directly to Shopify" for instant 1-click update without leaving this page.
2. Or click "Copy Metafield JSON", click "Open in Shopify Admin", navigate to Metafields > Visual Experience, and paste!

Studio Tools Access

Experience & Atmosphere Builder

📥 Import & Edit Existing Metafield JSON

🚀 Direct Shopify Metafield Injection

🎯 Import Standalone Hotspots (JSON / Pipe)

Select Product & Browse Photos

Photos for Selected Product

📄 Select PDF User Manual from Shopify Files

Click or Drop photo here