Add a 360° viewer to your product pages
Shoot a sequence → upload → paste <script> on your site. The “3D” widget opens the viewer in a modal via iframe; the dashboard gives you control and per-product analytics.
Every angle, one lightweight embed
Create a product, upload frames, and paste the code. Your 360° view is ready without a complex integration.
- Embed via <script> or iframe.
- Frames in WebP with image optimization.
- “3D” widget, modal, and per-product analytics.
How it works, step by step
1. Content in the dashboard
Upload frames and control 3D publishing per product.
2. Embedding on the site
Viewer opens in a modal + iframe. Binding by SKU / Schema.org / URL.
3. Preview without a store
Try the 360° viewer in the dashboard before you add code to the site.
4. Per-product analytics
See views and watch time — which spins people actually watch.
Interactive 360° viewer
Full Shopify connection guide — checklist and steps — is right below.
Jump to setup stepsQuick checklist
- Spinnify account with at least one published 360° product
- Shopify app installed on your store
- Store linked in Spinnify → Settings → Integrations
- Match field chosen and saved
- Spinnify block added on the product template in the theme editor
- Tested on a live product page (not only in the editor)
- Store linked in Spinnify and a plan approved in Shopify Admin (App Pricing)
How it works
Spinnify hosts your 360° spins in the cloud. Shopify shows a 3D button only when the value from your catalog (for example variant SKU) matches the product name in Spinnify Studio — case-insensitive.
Upload spins, publish products
OAuth + match field
Spinnify 3D Button block
Shopper opens 360° viewer
Important
The Shopify admin app and this guide do not replace Spinnify Studio. You still create and manage 360° content in Studio (or the mobile app). Shopify only displays what you already published.
Before you start
- A Spinnify 360° Studio account (sign up at spinnify.io if needed).
- Admin access to your Shopify store.
- At least one product in Studio with 360° photos uploaded and published.
- SKUs or other identifiers in Shopify filled in for the products you want in 3D (if you use SKU matching).
- Theme that supports Online Store 2.0 sections on the product template (most modern themes).
Step 1 — Create products in Spinnify Studio
The name of each item in Studio is the key Shopify uses to find a 360° experience. Plan this before connecting the store.
Sign in to Studio
Open Spinnify 360° Studio in your browser and log in with your account.
Create or open a product
In the dashboard, add a new product or open an existing one. The product name (folder name) must match the value you will use on Shopify — for example the variant SKU.
Upload and publish 360° photos
Add your spin sequence (desktop and optionally mobile), then publish. Unpublished or empty products will not show a 3D button on the store.
Keep names consistent
If your Shopify SKU is ABC-123, the Studio product name should be ABC-123 (spacing and case can differ; matching is case-insensitive).
Tip
You can shoot spins in the Spinnify mobile app — they sync to the same product in Studio by SKU.
Step 2 — Install the Shopify app
Install Spinnify 360° Studio from the Shopify App Store (or via the install link from Spinnify).
Open Apps in Shopify Admin
In Shopify Admin go to Apps → search for Spinnify 360° Studio → Install and approve requested permissions (read products).
Open the app once
After install, open the app from Apps. You may see Spinnify marketing content until the embedded app URL is configured — that is normal. Use this guide for setup steps.
Permissions
The app needs read access to products so Spinnify can sync the match-field setting to your shop metafields.
Step 3 — Connect your store in Spinnify
Linking is done from Spinnify Studio while you are logged in — not only inside Shopify.
Open Integrations in Studio
Go to Dashboard → Settings → tab Integrations → Shopify section.
Enter your shop domain
Type your store domain exactly, e.g. your-store.myshopify.com (not the custom domain like www.example.com).
Click Connect Shopify
Confirm the modal: if you had a Stripe subscription, it is cancelled immediately and future charges move to your Shopify invoice. You will be redirected to Shopify to approve access, then returned to Spinnify. Pick your Spinnify plan in Shopify Admin right after (see the billing section below).
Confirm status
The card should show Connected and your shop domain. If you see an error, try again or check that the app is installed on the same store.
You must be logged in
If you are not signed in to Spinnify, open Login first, then repeat the connect flow from Settings → Integrations.
Plans & billing via Shopify
Shopify merchants should pay through Shopify App Pricing (Managed Pricing), not Stripe in Studio → My data. Link the store in Spinnify first, then approve a plan in Shopify Admin — this is the only supported billing path after connect.
Sign in to Spinnify Studio
Create an account at spinnify.io or log in. You need a Spinnify user before the store can be linked to your 360° content.
Install the app on your Shopify store
In Shopify Admin → Apps, install Spinnify 360° Studio from the App Store (or your install link). Read access to products is required for the match-field metafield.
Connect the store in Spinnify
Dashboard → Settings → Integrations → enter your-store.myshopify.com → Connect Shopify. Approve OAuth. Only one shop can be linked per Spinnify account at a time.
Confirm billing migration
The connect modal explains that an active Stripe subscription is cancelled immediately and billing moves to Shopify. You are not charged twice: Stripe checkout and the customer portal are hidden in My data while billing runs through Shopify.
Choose a plan in Shopify Admin
Open Apps → Spinnify 360° Studio → plan selection (App Pricing) and approve Free or a paid plan. Shopify redirects to Spinnify; we sync the subscription via the Partner API. Manage upgrades, downgrades, and cancellation in Shopify Admin only.
Access while the plan syncs
If you were on a paid Stripe plan, Studio stays usable through the end of that paid period (and the usual delinquency grace if needed) until Shopify billing is confirmed. Publish 360° products in Studio as usual.
Disconnect rules
Cancel your Shopify App Pricing plan in Shopify Admin before disconnecting in Spinnify. Disconnect does not automatically restore Stripe — subscribe again in My data if you return to SaaS-only billing.
For Shopify App Review (test store)
Use a development store. Billing uses Shopify Managed Pricing (not the Billing API). Follow this order so the reviewer sees a linked shop and an active plan.
- Install Spinnify 360° Studio on the test store from the App Store listing.
- In a browser, sign in to Spinnify Studio (same email you will use for the test).
- Studio → Settings → Integrations → enter the test shop domain (name.myshopify.com) → Connect Shopify → approve OAuth and the billing migration modal.
- In Shopify Admin → Apps → Spinnify 360° Studio, open plan selection and approve a plan (Free is enough to test publishing).
- Return to Studio: My data should show billing via Shopify (no Stripe Subscribe button). Create/publish a 360° product and complete theme + match-field setup per this guide.
- On the storefront, open a product with a matching SKU (or your chosen match field) and confirm the 3D View button opens the viewer.
- To test disconnect: cancel the plan in Shopify Admin first, then disconnect in Studio → Integrations.
Step 4 — Choose the match field
Decide which Shopify field is compared to the Studio product name. Default is variant SKU.
How matching works
On the product page, the theme block reads the selected field for the current variant. That value is sent to Spinnify. If a published Studio product exists with the same name, the 3D button appears.
In Settings → Integrations, pick a field from the dropdown and click Save. The choice is stored in Spinnify and pushed to your shop as a metafield so the storefront block uses it immediately.
variant sku
Variant SKU — best for most catalogs; matches Studio name to each variant’s SKU.
variant barcode
Variant barcode — use if your Studio names follow barcodes.
product handle
Product handle — URL slug; same for all variants of a product.
product title
Product title — display name; same for all variants.
variant id
Variant ID — numeric Shopify ID; stable but not human-readable.
product id
Product ID — numeric product ID; one 360° per product, not per variant.
Studio naming rule
Whatever field you choose, the Spinnify product name must equal that field’s value on the variant you are testing.
Step 5 — Add the block in the theme editor
Add the Spinnify 3D Button block to your product page template.
Open the theme editor
Shopify Admin → Online Store → Themes → Customize.
Go to a product template
At the top, open the template dropdown and choose Products → Default product (or the template your products use).
Add the block
On the product page section, click Add block → Apps → Spinnify 3D Button. Place it where shoppers should see the button (often near the buy button or gallery).
Save the theme
Click Save. In the editor, if the selected variant has no value for your match field, you may see a dashed hint — fill the field in Shopify or change the match field in Studio.
Theme editor preview uses sample products; always verify on a real product URL with a matching Studio item.
Step 6 — Test on the storefront
Confirm the full path works for a real product.
Pick a test product
Choose a product that has both a published 360° in Studio and a filled match field on Shopify (e.g. SKU).
Open the product page
View the live storefront (not only Customize). You should see the 3D View button when a match exists.
Click 3D View
The viewer opens with your spin. If nothing appears, see Troubleshooting below.
Try another variant
If you use variant-level fields (SKU, barcode, variant ID), switch variants and confirm each mapped variant shows or hides the button correctly.
Troubleshooting
No 3D button on the product page
Check: (1) Studio product is published with photos. (2) Studio product name matches the match-field value for that variant. (3) Store is connected in Integrations. (4) Match field saved after connect. (5) Spinnify block is on the product template and theme is saved.
Button in theme editor but not on the live site
Editor preview may use products without SKU. Test a real product URL. Clear browser cache or try incognito.
Connected the wrong store
In Studio → Settings → Integrations, disconnect, then connect again with the correct myshopify.com domain.
Changed SKU in Shopify but 3D still old / missing
Rename or duplicate the Studio product to match the new identifier, or change the match field to one that still aligns with Studio names.
OAuth / connect failed
Ensure you are logged into Spinnify, the app is installed on the same shop, and redirect URLs in the Shopify app config include your Spinnify domain callback.
Need help
Contact Spinnify support via the Contact page on spinnify.io with your shop domain and an example product URL.
FAQ
Do I need Spinnify Studio if I use Shopify?
Yes. Shopify only displays 360° content you create and publish in Studio (or upload via the mobile app).
Can I use one 360° for all variants?
Use product handle, product title, or product ID as the match field, or give every variant the same Studio product name if using SKU.
Does this work with any theme?
You need an Online Store 2.0 product template where you can add app blocks. Most current Shopify themes support this.
Is the guide available without login?
Yes. This page is public. Connecting the store and editing 360° content still requires a Spinnify account.
Where do I open this guide from Shopify?
Bookmark /integration-guide or open the link from the Spinnify app / Integrations card in Studio. It can be embedded in the Shopify admin iframe.
Do I pay in Spinnify or in Shopify?
After you connect your store in Integrations, subscribe and manage the plan in Shopify Admin (App Pricing). Stripe checkout in Studio → My data is disabled for that account so you are not billed twice.