Back to blog
Integration10 min1,968 reads

How to Add 360° Product Views to Your WooCommerce Store

3 steps without heavy plugins: publish in Spinnify Studio, embed widget.js on single product, Manual/AUTO/URL binding. Lazy load, WebP/CDN. Checklist if the button stays hidden.

WooCommerceIntegration
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 Shopify app integration with 3D View button on product template
Shopify10 min2,914 reads

Simple Guide: How to Connect Spinnify 360° View to Your Shopify Store

6 no-code steps: publish in Studio, App Store install, OAuth, match field, Spinnify 3D Button theme block, live URL test. SKU/handle/barcode matching table and troubleshooting if the button stays hidden.

ShopifyIntegration
Read article
Smartphone on tripod capturing 360° product frames on a turntable
Product UX10 min1,729 reads

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

360° capture without a studio or photographer: smartphone, turntable, and the Spinnify mobile app. SKU before the first frame, manual camera mode, 24–36 shots, landscape and portrait—a step-by-step guide with no magic required.

PhotographyDIY
Read article

Ready to publish your first 360° spin?

Create a product, upload frames, and embed the widget with one script snippet.

  1. Upload frames
  2. Embed script
  3. Go live
Try Spinnify free