Quick answer
Shopify 360° in ~15 minutes, no code: publish in Studio (name = SKU) → App Store → OAuth → match field → Spinnify 3D Button block → incognito test on live URL.
Interactive 360° integration often sounds scary—developers, Liquid edits, and manual linking for hundreds of SKUs.
Shopify has changed. With app blocks you can configure Spinnify spins in about 15 minutes in the visual editor—no code. Here is how to link products to spins and go live.
Step-by-step setup plan
Six steps from uploading frames to verifying the button on site.
Step 1. Publish a product in Spinnify Studio
Before Shopify settings, build your spin library:
- Sign in to Spinnify Studio.
- Create a product. Name it like the store SKU—for example, MUG-RED-01.
- Upload a frame series (usually 24–36 angles) and set status to Active (Published).
Important: drafts or a wrong name mean the system cannot link photos to the store—the button will not show.
Step 2. Install from the Shopify App Store
Find Spinnify 360° Studio and click Install. The app reads catalog data to understand SKUs and adds a button block to the theme editor.
Step 3. Connect accounts (OAuth)
Link store and Spinnify media library:
- In Spinnify Studio: Dashboard → Settings → Integrations → Shopify.
- Enter store-name.myshopify.com—the internal Shopify hostname, not your custom domain (myshop.com).
- Click Connect and approve in the authorization window.
Step 4. Choose how to match products (Match Field)
Tell the system which field links store products to Studio photos:
- Variant SKU (recommended)—apparel in different colors: red shirt gets its spin, blue gets another.
- Product handle—one product, few variants, or variants differ only by size with the same look. One spin for the whole page.
Click Save.
Step 5. Add the "360° View" button in the theme editor
No coding—mouse only:
- Shopify: Online Store → Themes → Customize.
- Default product template.
- Add block → Apps → Spinnify 3D Button.
- Drag the block under the gallery or above Add to cart.
- Block settings: Spinnify site URL = https://www.spinnify.io (HTTPS, no trailing slash). Style colors → Save.
Step 6. Verify on the live storefront
Open a product page on the real site in incognito—the variant has a filled SKU and a published spin in Studio.
Within a second a "360° View" button appears under the gallery. Click—it opens a fullscreen window where shoppers can rotate the product.
Matching cheat sheet
Quick table for linking products:
| Match method | Studio product name | Best for |
|---|---|---|
| variant_sku (default) | Exact color/size SKU | Apparel, footwear, accessories—color matters |
| product_handle | URL tail (red-ceramic-mug) | Electronics, furniture—sizes differ, look is one |
| variant_barcode | Product barcode | Stores tied to warehouse/ERP (barcode-driven) |
What if the button does not appear?
Run this checklist:
- Studio status: product Active and published, not Draft?
- Characters: Studio name = Shopify SKU to the last hyphen? (Case ignored; spaces and hyphens matter.)
- SKU filled for the selected variant in Shopify Admin? Empty field hides the button.
- Do not test only in the theme editor—it shows setup hints. Verify the live URL.
Integration done. Your store shows products from every angle—without slowing pages if you follow the speed guide.
Page speed: 360° without Google's red zone. Capture: DIY smartphone guide. Interactive guide with screenshots.
