IntegrationJune 5, 202610 min1,968 reads

How to Add 360° Product Views to Your WooCommerce Store

Add 360° spins to WooCommerce in 3 steps: publish in Spinnify Studio, embed widget.js, SKU/URL binding. Lazy load, WebP CDN. Troubleshooting checklist.

IntegrationHow-to

WooCommerce product page embedding Spinnify 360° viewer via widget.js

Quick answer
360° on WooCommerce without heavy plugins: Studio (name = SKU, Active) → widget.js embed on is_product() only → Manual/AUTO/URL. Lazy load + WebP/CDN. Test live URL; clear cache.

Want shoppers to rotate products like top stores? WooCommerce does not require heavy plugins. Spinnify integration adds professional 360° views while keeping site speed high.

3 steps to launch 360° on WooCommerce

1. Prepare in Spinnify Studio

Before site settings, prepare content:

Sign up for Spinnify Studio.
Create a product and upload a photo series (24–36 frames).
Critical: Studio product name = the SKU in WooCommerce Admin.
Set status to Active. Drafts are invisible to the system.

2. Add code to the site

Insert a small snippet once on the product page template.

Where to get code: Embed tab for the product in Spinnify Studio.
Where to paste: theme functions.php or WPCode / Code Snippets plugin.
Important: product pages only—use is_product() in PHP so the widget does not load on the homepage or blog.

3. Configure automatic linking

The system must know which spin to show. Three modes:

Manual (recommended): bind by SKU. Reliable for variable WooCommerce products.
AUTO: reads SKU from Schema.org markup—handy with solid SEO structured data.
URL: bind by page URL when SKUs change or are inconvenient.

widget.js embed on WooCommerce single product — Studio → embed → is_product() → 360° modal.

Why it does not slow the site

Many fear widgets slow WooCommerce. Spinnify is built differently:

Lazy loading: the browser does not fetch photos until the shopper clicks View 360°.
Minimal LCP impact: the widget loads separately from main page content.
Compressed formats: WebP frames via global CDN.

Checklist: viewer not showing?

Live URL: test on the published site—Customizer often blocks scripts.
Name match: Studio and WooCommerce SKU must match character for character (spaces and hyphens matter).
Clear cache: after adding code, purge WP Rocket, LiteSpeed, etc.
Variation SKU: for variable products, use the SKU of the variation (color) you are viewing.
Active Spinnify Studio subscription.

Bottom line: integration for business

Unlike bulky plugins that clash with your theme, this approach is cleaner: an interactive inspection layer over the WooCommerce gallery. Best UX for footwear, bags, electronics, and jewelry—where static photos miss detail.

Ready to launch? Upload photos in Spinnify Studio. Capture: DIY smartphone guide. Shopify: integration guide.

Frequently asked questions

Do I need a dedicated WooCommerce plugin for 360°?

No. The widget.js embed from Spinnify Studio on the single-product template is enough—no heavy plugin fighting your theme.

What should the Studio product be named?

Exactly like the product or variation SKU in WooCommerce. Draft status or a name mismatch hides the button.

Where do I paste code in WordPress?

Child theme functions.php or WPCode / Code Snippets. Restrict output with is_product() so the widget does not load on the homepage or blog.

Manual, AUTO, or URL—which mode?

Manual (data-sku) is most reliable for variable products. AUTO when Schema.org Product includes SKU. URL when SKUs are awkward or change often.

Will the widget slow WooCommerce?

Spinnify lazy-loads: frames download on click. WebP via CDN, minimal LCP impact—the widget stays separate from main page content.

Button missing—what to check?

Live URL (not Customizer), Studio name matches SKU, clear cache (WP Rocket, LiteSpeed), SKU of the active variation, active Spinnify subscription.

Which product categories benefit most?

Footwear, bags, electronics, jewelry—where static photos hide details visible from every angle.

Spinnify 360° viewer on a Shopify product page: 3D View button opening an interactive product spin

IntegrationJun 28, 20269 min1,720 reads

How to Add a 360 Product View to Shopify (Sizes, App Block & SKU Matching)

Add an interactive 360° spin to Shopify product pages: recommended image sizes, Spinnify app block setup, SKU matching, and lazy-loaded 3D View—no per-SKU code.

ShopifyIntegration

Read article

Smartphone on tripod capturing 360° product frames on a turntable

Product UXJun 13, 202610 min1,729 reads

Studio on a Shoestring: How to Shoot Interactive 360° Product Photos with an Ordinary Smartphone

Shoot 360° product spins with a smartphone and turntable—no studio needed. SKU-first workflow, manual camera, 24–36 frames. Step-by-step with the Spinnify mobile app.

How-toPhotography