Quick answer
360° on Laravel: publish in Studio (name = SKU, Active) → @stack('scripts') in the Blade layout head, @push widget.js on the product show view with {{ $product->sku }} → data-key + data-sku (AUTO if JSON-LD sku exists; URL if Livewire/Inertia stacks do not re-run). Lazy load and modal. Test a live product page, not a listing.
Laravel galleries flip still photos. Shoppers still cannot turn the item. You can add a photographed 360° spin without a Composer package: host frames in Spinnify and paste one script.
This guide is for Laravel with Blade. The same widget.js snippet works on a product page as on other HTML sites. You do not install a Spinnify Composer package. Do not bundle widget.js into Vite app.js.
3 steps from photos to a live Laravel page
The work is the embed: one script on the product detail view, then a match to the catalog SKU.
1. Prepare in Spinnify Studio
Before you edit Blade views:
- Sign up for Spinnify Studio.
- Create a product and upload a photo series (24–36 frames, 4:3 for PC photos).
- Important: the Studio product name must equal the Laravel SKU you output (spaces and hyphens matter; case does not).
- Keep the product Active. A hidden product will not show the button.
2. Add code on Laravel
Two ways to paste the same Studio snippet. Copy it from Widget installation → Show code.
Method A: Blade @stack (fastest for the whole catalog). In resources/views/layouts/app.blade.php put @stack('scripts') inside <head>. widget.js uses defer, so head is correct. On products/show.blade.php wrap the snippet in @push('scripts') … @endpush with data-sku="{{ $product->sku }}". Do not paste this on the listing (index.blade.php). Do not import widget.js in Vite app.js; keep the CDN script URL.
Method B: AUTO or URL. Use data-sku="AUTO" when the product Blade already prints Schema.org Product JSON-LD with a sku. If the page is Livewire or Inertia and stacks do not re-run after the first full load, use data-sku="URL" and set the Site base URL in Widget settings.
3. Configure the binding
The code looks like: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="{{ $product->sku }}" defer></script>
- data-key: your Studio widget key. Do not change it.
- data-sku: {{ $product->sku }}, or AUTO to read sku from JSON-LD, or URL if Livewire/Inertia stacks do not re-run (save the page path in Studio).
Why it stays fast
A third-party script on a Laravel product view raises PageSpeed questions because Blade already paints the gallery and layout CSS. Spinnify keeps the extra work off first paint: frames stay on the CDN until someone asks to spin. Your Blade gallery still renders first; the 360 layer opens in a modal after the click.
- Lazy loading: the browser does not fetch the frame set until the shopper clicks.
- Isolation: the viewer opens in a modal and does not replace the Laravel gallery on first paint.
- CDN: frames are resized WebP/AVIF, not extra files in Laravel storage.
Checklist: button not showing?
If the 3D View button is missing, walk this list on a live product URL, not in admin preview.
- Is @stack('scripts') in the layout <head>? @push does nothing without it. If views are compiled, run php artisan view:clear.
- Are you on the product show view? Do not load the script on index.blade.php.
- Do names match? Studio product name and the SKU you output must match (spaces and hyphens included).
- Is the Studio product Active?
- Is data-key copied from your account?
- One script per page: do not paste the snippet twice.
- Livewire or Inertia: if stacks do not re-run after the first load, switch data-sku to URL and set Site base URL in Widget settings. Do not add widget.js to Vite app.js.
Can I customize the button look?
Yes. Style the launcher in Studio, not in theme CSS. You can match the storefront without editing the product template:
- Position: right, left, or center.
- Colors and label to match the Laravel theme.
- Format: round floating icon or slim tab.
After that, Laravel still serves the gallery. The 360° layer opens when someone asks for it.
Shoot spins: how to create a 360 view. Magento HTML stores: Magento 2 guide. Tilda Zero Block.
