Shopify + Spinnify 360° Studio
This guide walks you through the full setup: from creating 360° products in Studio to showing the 3D button on your Shopify product pages. No guesswork — follow the steps in order.
Quick 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)
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
You will be redirected to Shopify to approve access, then returned to Spinnify with a success message.
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.
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 /shopify-guide or open the link from the Spinnify app / Integrations card in Studio. It can be embedded in the Shopify admin iframe.