WooCommerce 3D Product Preview Setup Guide

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. 3D preview is a per-product setting inside the plugin you already run. This guide covers what it does today, how to turn it on, and what Cmsmart builds beyond it as custom development.

Most WooCommerce print and personalization stores still sell customizable wrap-around products — drinkware, candle tins, packaging, phone cases — with a single flat photo. The buyer has to imagine how their design sits on a curved surface, and some of them close the tab instead of finishing the order.

For a narrow set of product types — anything with a simple curved or wrap-around print area — you can let them see it instead of imagining it.

Why do flat product photos cost you sales on wrap-around products?

• Guesswork at the point of sale. A flat photo of a beverage can or box doesn't show how the artwork meets at the seam or wraps the curve.
• Pre-sale support load. "What does the back look like?" and "will my logo fit?" are questions your team answers by email, one order at a time.
• Abandoned carts on customizable SKUs. Shoppers who can't picture the finished product are more likely to leave without ordering, especially on a first visit.
• Returns tied to a mismatch between expectation and the printed product. An estimated 19.3% of online purchases were expected to come back to the retailer in 2025 (NRF / Happy Returns, 2025), and "it wasn't what I pictured" is a common driver on customizable items.

Put a number on it for your own store: (pre-sale emails per week × minutes to answer) + (abandoned customizable-product carts per month × your average order value) is roughly what letting buyers guess costs you every month.

What does a WooCommerce 3D product preview look like for your shop?

Clicking the 3D icon swaps the flat canvas for the uploaded model with the shopper's own design mapped onto it; dragging turns it, the same way the mug does in the video above. You can try this on a live product instead of a recording: Cmsmart runs a 3D Preview demo product on its public demo store — open it, start a design, and click the 3D icon yourself.

How does Cmsmart's 3D preview fit into the online designer?

3D preview sits inside the same web-to-print toolkit as the rest of the online designer: the same templates, text, photo and clipart tools a buyer uses on a flat product also run on a 3D-enabled one.

• Storefront product page (in the plugin today) — where "Start Design" opens the designer and, once enabled, the 3D icon sits beside it.
• Online designer canvas (in the plugin today) — templates, text, photos, cliparts and layers, identical whether or not the product has 3D preview on.
• 3D preview toggle (in the plugin today) — a per-product setting that turns on the desktop 3D view of a model you upload.
• Print-ready output (in the plugin today) — the same design feeds the print-ready PDF, independent of whether the shopper opened the 3D tab.
• Multi-part 3D configurators and AR (custom development) — anything beyond one model with one print area, covered further down.

Honest limits: the built-in 3D preview is desktop only, one 3D model per product, and it previews the shape you supply — it does not add augmented reality or a phone-camera try-on.

What's the business value of a 3D preview, and which KPIs should you track?

Independent of Cmsmart, platform data on interactive product visuals points the same way: Shopify's own merchant data shows products with AR or 3D content converting up to 94% higher than listings without it (Shopify, updated 2026), and in one published case, shoppers who viewed a handbag in 3D were 44% more likely to add it to cart and went on to a 65% purchase lift on the AR-enabled pages (Shopify, Rebecca Minkoff case study, 2026). Treat these as evidence of what interactive product pages can do in general, not a promise for your store — your own baseline is what matters.

How do you set up 3D preview for a WooCommerce product?

1. Under Plugins, confirm Cmsmart Product Designer (NBDesigner) is active and on 2.17.0 (screenshot above); update first if it isn't.
2. Open the WooCommerce product you want to sell with a 3D preview and turn on Enable Design if it isn't already.
3. Set up the product's print area, bleed and safe zone as you would for any design-enabled product.
4. Prepare a 3D model of the product — the same kind of model you'd use for a product render — sized so the print area lines up correctly on its surface. Cmsmart's own 3D preview demo product is a useful reference for what a working setup looks like live.
5. In the product's Designer config, open the 3D preview setting and switch it on for this product.
6. Point it at the model you uploaded, and tell it which part of the model carries the print area if the model has more than one part.
7. Save and publish the product.
8. Open the product as a shopper, design it, and use the 3D icon to check the wrap before you trust it live.
9. Place a test order and confirm the print-ready PDF still matches what the 3D preview showed — both read from the same design, so they should agree.

Need the rest of the product designer plugin set up first — print areas, pricing, output? Cover those steps in the plugin's main setup guide before you turn on 3D preview.

Going further: what can Cmsmart build on top of the built-in 3D toggle?

• 3D and AR on mobile. The built-in toggle is desktop only; Cmsmart builds a mobile-friendly 3D or camera-based try-on view for stores where most traffic is on a phone.
• 360° spin video. For products a rendered 3D model can't represent well — fabric drape, multi-material items — Cmsmart builds a captured 360° spin sequence instead.
• Multi-part 3D configurators. Car wraps, packaging with a lid and a sleeve, or multi-panel signage, each with its own print area on one 3D object, go beyond the one-model, one-part toggle.
• Production and ERP/MIS sync. Pushing the approved design straight into your production system alongside the print-ready PDF.

Cmsmart delivers this as a scoped engagement — discovery, solution design, build sprints, QA, launch and support — the same process behind our ecommerce project case studies. See the 3D product setup service for what that looks like for an interactive 3D view beyond the built-in toggle.

Get my 3D product viewer scoped

Why work with Cmsmart on your 3D product designer setup?

Cmsmart is an ecommerce solutions consultancy and custom development partner (a Netbase JSC division since 2012), with 6,300+ client projects, 4,600+ projects delivered and 1,800+ live stores across 80+ countries, rated 4.2 on Trustpilot (404 reviews). See the product designer plugin's own feature page and live demo, or how one beverage-can seller put 3D preview to work in the related 3D preview case study.

Frequently asked questions

Does 3D preview work on every WooCommerce product?

No — it's built for products with a simple curved or wrap-around print area, like cans, tumblers, candle tins and boxes. A flat product (poster, business card, T-shirt front) doesn't need it, since a photo already shows the whole design.

Does 3D preview work on mobile?

Not today — the built-in toggle is desktop only. Keep a strong flat product photo as the fallback for phone shoppers, or ask Cmsmart about a mobile or AR build as custom development.

Do I need a developer to turn it on?

No, not for the toggle itself — it's a setting in the product's Designer config once you have a 3D model file. Most shops use a designer to prepare the model the first time.

Can Cmsmart build AR or a 360° spin view instead?

Yes, as custom development on top of the plugin — see "Going further" above, or get it scoped.

Does 3D preview change the print-ready file?

No. The 3D preview and the print-ready PDF both read from the same design, so what the shopper rotates on screen is what goes to production.

Which products are the best fit to start with?

Anything with a simple curved or wrap-around print area where buyers currently can't picture the result: beverage cans, tumblers, candle tins and boxes are the most common starting points. For related ideas, see how cutline previews work for die-cut products in setting up sticker cutline pattern preview.

What is the difference between a 3D preview and a 3D product configurator?

A 3D preview shows the shopper's design on a model of one product so they can rotate it before ordering. A 3D configurator also lets them change the product itself, such as parts, panels or materials, on the model. In Cmsmart the 3D preview is a plugin setting, while 3D configurators are custom development, quoted per project.

Can buyers configure a product from parts without a 3D model?

Yes. The Cmsmart product builder lets buyers build a product from components such as frame, colour and parts, using 2D layers. They open a Customize step to see the result, and the summary and total update with every choice. It is included in every plan as part of Cmsmart Product Designer for WooCommerce.