How to create B2B catalogs and gated content with Shopping Experiences?
Quick Answer
You can integrate shoppable videos, 3D product models, and AR viewers into Shopware using either app-based integrations or custom frontend components. Most stores use a mix of CMS elements, CDN-hosted media, and third-party platforms like Storyblok, Emersya, Threekit, or Vimeo Commerce to handle rendering and analytics. The setup itself is not difficult—but performance, mobile compatibility, and media hosting decisions usually determine whether the feature actually improves conversions or slows the storefront down.
Before You Start
- ✦ Shopware CMS access — you’ll need Shopping Experiences access to place video or AR blocks on PDPs and landing pages.
- ✦ Optimised media assets — uncompressed 3D models and autoplay videos destroy Core Web Vitals surprisingly fast.
- ✦ A CDN or external media host — serving large GLB, USDZ, or MP4 files directly from the Shopware filesystem is rarely the right long-term choice.
Choose the right media approach
Start by deciding whether you need simple embedded media or a full interactive product experience. Shoppable videos usually work best for fashion, beauty, and lifestyle stores. 3D viewers and AR previews make more sense for furniture, luxury products, configurable items, or products where size and texture affect buying decisions. Most teams overbuild this part early. If your product page already converts poorly on mobile, adding a heavy WebGL viewer before fixing the basics usually makes things worse.
- Decide between embedded video, interactive hotspots, or full AR placement
- Match the feature to product complexity and average order value
- Benchmark current mobile performance before adding anything
Prepare media assets
This is the step most projects underestimate. Your 3D files need proper polygon reduction, compressed textures, and mobile-safe formats before they ever touch Shopware. For AR, you’ll normally use GLB for Android and USDZ for iOS Safari. For shoppable videos, keep clips short and focused on one action or product interaction. Long homepage hero videos almost always hurt performance metrics unless aggressively optimised and lazy loaded.
- Export GLB and USDZ versions of 3D assets
- Compress videos before upload using H.264 or H.265
- Generate poster images for lazy loading
Integrate the frontend viewer
In Shopware, this usually happens through custom CMS elements, Twig overrides, or app integrations. Most modern setups rely on JavaScript viewers like model-viewer, Babylon.js, or provider SDKs from platforms like Threekit. Keep the integration modular. Don’t hardcode media directly into the theme if merchandisers need to manage it later. And avoid injecting large scripts globally when only a handful of products actually use 3D or AR content.
- Create reusable CMS blocks for video or AR embeds
- Load viewer scripts conditionally on supported products
- Store media references in custom product fields
<model-viewer src = "{{ page.product.customFields.product_glb }}" ar camera -
controls auto - rotate loading = "lazy">
Add shoppable interactions
The actual commerce layer matters more than the media itself. A video without product links is mostly branding. A good implementation lets users add products to cart, open quick views, switch variants, or jump directly to PDP sections from within the media experience. Keep interaction overlays clean. Stores often add too many hotspots and make the entire thing feel like a demo instead of a shopping flow.
- Map hotspots to real product IDs or variant IDs
- Add direct add-to-cart or quick-view actions
- Track clicks separately from normal PDP events
Test mobile and performance
Most problems only appear after launch. AR support behaves differently between iOS Safari, Chrome Android, and embedded social browsers. You also need to check how these viewers interact with Shopware caching, consent banners, and lazy loading plugins. Test on real devices whenever possible. Emulator-only testing misses a lot of rendering and GPU issues on lower-end phones.
- Measure CLS and LCP before and after deployment
- Test AR launch flows on iPhone and Android devices
- Validate analytics events and add-to-cart tracking
Shopware Media Experience Checklist
0 of 8 completeMistakes Most Developers Make
! Loading viewers on every PDP
What happens: Your storefront loads unnecessary JavaScript even on products without AR or video content.
Fix: Conditionally load viewer scripts only when matching product fields exist.
! Ignoring mobile rendering behaviour
What happens: AR launches fail or interactive elements overlap on smaller devices.
Fix: Test with physical iOS and Android devices before publishing anything live.
! Uploading oversized 3D models
What happens: Product pages become laggy and GPU-heavy on mid-range mobile devices.
Fix: Reduce polygon count and compress textures before exporting production assets.
! Treating media as branding only
What happens: Engagement looks high but conversion impact stays flat.
Fix: Add clear commerce actions like quick add-to-cart and tracked hotspot interactions.
Key Takeaway
The short version: Shopware handles shoppable video and 3D or AR integrations well if you treat them like performance-sensitive commerce features instead of visual extras. Most successful setups rely on external media hosting, reusable CMS components, conditional script loading, and aggressive optimisation for mobile devices. The biggest problems usually come from oversized assets, poor tracking setup, and global frontend injections that slow every PDP down. Keep the experience tightly connected to add-to-cart actions and analytics from day one. Start with Step 2—that one alone handles most of it.
Related Answers
Was this answer helpful?
Your feedback helps us improve our answers.
Still need help?
Talk to our Shopware experts
We've handled GDPR/CCPA compliance for dozens of EU & US Shopware stores.