Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Based on a 2021 Cmsmart custom-development project for Rebelo, AG, a Portuguese packaging and display-stand printer, and on the 3D preview feature as it exists in NBDesigner today.

In short

  • A 3D preview printing business lets buyers rotate a box, mug or sign on screen before they pay, so fewer orders come back as reprints and more carts convert.
  • Cmsmart's Product Designer (NBDesigner) ships a 3D preview tool that loads a custom 3D mesh per product; Cmsmart's team builds the mesh, the camera angles and any store-specific viewer behavior as a project.
  • Setting it up takes a 3D model per product shape, a short designer configuration pass, and (for anything beyond the standard viewer) a scoped custom-development engagement with Cmsmart.

This is the story of why Rebelo, AG, a Portuguese offset and large-format printer founded in 1983, asked Cmsmart to build a 3D preview into their WooCommerce store — and what NBDesigner does with 3D preview out of the box today, step by step.

What does manual proofing cost a packaging and box printing business?

Buyers of boxes, packaging and other multi-side products can't tell how their artwork will wrap around the final piece from a flat 2D mockup, so they hesitate, email the print shop for reassurance, or simply leave. Cmsmart's Product Designer (NBDesigner) closes that gap with a 3D preview the buyer can rotate before paying, cutting the back-and-forth that stalls packaging orders.

Rebelo, AG's main line is boxes and other multi-side packaging. Rebelo is still operating today, 42+ years in, from Estarreja, Portugal. In the original 2021 case study published on this page, the company described the problem plainly: end users found it hard to imagine what a folded box or multi-panel piece would look like once printed, which made them hesitate at checkout or email the shop to double-check before ordering.

That pattern shows up in any print business selling dimensional products:

  • Flat mockups hide the fold. A 2D proof shows one panel; a box has four, five or six, and the buyer imagines the rest.
  • Proofing by email costs staff time. Every request to see the folded result by email is a production-staff interruption, not a sale.
  • Reprints eat the margin. A buyer surprised by the folded result asks for a reprint, a refund, or leaves a complaint.
  • Cart abandonment on complex products. The less confident a buyer is, the more likely they close the tab instead of clicking "Add to cart."

The cost of the status quo is a formula you can run with your own numbers: (packaging orders/month) × (% needing a clarifying email or a reprint) × (minutes of staff time or cost per reprint). Even a modest percentage, multiplied across a few hundred monthly orders, is real staff hours and real material waste.

What does a confident 3D preview checkout look like?

With Cmsmart's 3D preview, a buyer opens a box or packaging product, drops their logo and text onto the 2D canvas, then rotates a 3D model of the finished piece to check every panel before paying — all inside the same WooCommerce product page, with no email round-trip.

Example scenario. A buyer lands on a packaging store at 10 p.m., picks a shipping box, and starts the online designer. They drop in their logo, then switch to the 3D tab to turn the box in their browser and check the logo isn't cut off at a fold edge. Confident in what they see, they add it to the cart and pay — the print-ready file is sitting in the shop's order queue by morning, with no clarifying email needed.

NBDesigner product page with a Start and upload design button, the entry point a 3D preview printing business uses before the online designer opens
The same entry point Cmsmart configures for any designer-enabled product: a "Start and upload design" button that opens the chooser, then the online designer.

That moment — rotate, check, pay — is what a 3D preview printing business is selling the buyer: certainty. Talk to an ecommerce expert about what that would look like on your own catalog.

How does Cmsmart build 3D preview into a WooCommerce print store?

Cmsmart's Product Designer (NBDesigner) includes a 3D preview tool in the online designer today: a per-product 3D mesh that loads next to the 2D canvas so the buyer can rotate the finished piece. Cmsmart's team builds the mesh, camera framing and any store-specific viewer logic as part of setup.

The 3D preview button lives inside the same designer the buyer already uses to add text and artwork, not a separate app. NBDesigner's own changelog confirms the mechanics: the designer's 3D preview routine runs once the canvas has loaded, and "a real click on the 3D preview button always happens after init()" (fixed for a Modern-layout bug in NBDesigner 2.14.0). In Cmsmart's own demo catalog, "3D Preview" exists today as its own enabled, active product in the Product Manager:

NBDesigner Product Manager listing showing a 3D Preview product enabled and active, proof the feature exists in the plugin today
Cmsmart's demo catalog: "3D Preview" listed as its own enabled, active product in the NBDesigner Product Manager.

Next to that, the ordinary 2D canvas is where the buyer actually builds the design — text, cliparts, templates and photos — before switching to the rotate-and-check step:

NBDesigner online designer canvas with a template loaded, the 2D editor that feeds the 3D preview
The online designer canvas (2.17): templates, text and layers, the same design that the 3D preview renders in the round.

A complete 3D preview build has a handful of moving parts:

  • Storefront product + designer canvas — the WooCommerce product with its design entry points.
  • 3D mesh per product shape — a model matching the box, mug, cap or sign, built once and reused across colorways.
  • 3D preview control — the designer's built-in rotate/zoom tool, mapping the 2D design onto the mesh live.
  • Print-ready output — the print-ready PDF that matches the order (2.17.0): automatic renders and "Create PDF" read the same page geometry, including custom sizes, so the approved file is the file that goes to press.
  • Artwork approval — the approved-artwork lock (2.17.0): once a design is approved, any attempt to save over it is blocked with a clear message.
WooCommerce order screen Customer Design box with Accept and GO buttons, the approved-artwork lock step before a print file is finalized
Customer Design box on the order screen: accept or decline the artwork here, and the approved-artwork lock keeps that file from being overwritten.

Cmsmart insight: on packaging jobs, check bleed and fold lines before approving a 3D mesh — a mesh built from the flat die-line without the fold allowance can preview a logo that looks fine in 3D but prints cut off at the real edge. We catch this at design review, not after the first print run.

Manual packaging proofing vs. a Cmsmart 3D preview workflow
StepManual / 2D-only workflowCmsmart 3D preview workflow
Buyer checks the designFlat mockup; buyer imagines the foldRotates a 3D model of the finished piece in the browser
Uncertain buyerEmails the shop and waits for a replyResolves doubt inside the product page, no email needed
File sent to printMockup and print file can drift apartPrint-ready PDF that matches the order (2.17)
Approved artworkCan be overwritten by a later editApproved-artwork lock blocks the overwrite (2.17)
Quality check before productionManual eyeballing of resolution and bleedAI preflight scores DPI, color mode and bleed

What's the ROI of 3D preview for a printing business?

A 3D preview printing business turns fewer proofing emails and fewer reprints into measurable savings, tracked through the reprint rate, the proofing-email count per 100 orders, and the add-to-cart rate on 3D-enabled products.

Business value of 3D preview
BenefitHow it shows up in your businessKPI to track
Fewer clarifying emailsBuyers resolve what the finished piece will look like themselves, in the product pagePre-sale support emails per 100 orders
Fewer reprintsWhat the buyer approves in 3D is closer to what prints, thanks to the matching print-ready PDFReprint / remake rate
Higher add-to-cart on complex SKUsBuyers commit once they can see the folded or wrapped resultAdd-to-cart rate on dimensional products
Faster order-to-productionApproved-artwork lock means no re-verifying the file before it goes to pressHours from order to "sent to print"

On Shopify's own merchant data, shoppers who viewed a product as a 3D model were 44% more likely to add it to cart, and viewing a product in AR made shoppers 27% more likely to place an order (Shopify, 2026). Gunner Kennels, in Shopify's own case study, added 3D/AR models so buyers could size a product before paying and reported a 40% increase in order conversion and a 5% reduction in returns (Shopify case study). Those are general 3D/AR commerce figures, not NBDesigner-specific — an industry benchmark, not a guarantee.

ROI worksheet — plug in your own numbers:

Reprint savings = (packaging orders/month) × (current reprint rate %) × (cost per reprint) × (expected drop in reprint rate after 3D preview, e.g. 10–20 percentage points, based on your own before/after tracking).

Staff-time savings = (clarifying emails/month) × (minutes per email) × (fully-loaded hourly cost of the staff member who answers them).

How do you set up 3D preview on your NBDesigner catalog?

You configure 3D preview per product in Cmsmart's Product Designer admin: enable the Online Designer, set its sides, supply the matching 3D mesh, and confirm print-ready output before taking orders. Most of this is a one-time setup per product shape.

  1. In wp-admin, confirm Cmsmart Product Designer (NBDesigner) is active and updated to 2.17.0 or later, under Plugins.
  2. Open Cmsmart > Products (Product Manager) and pick the box, packaging or dimensional product to enable.
  3. In the product's Online Designer section, turn on Enable the Online Designer for this product and choose the sides preset (multi-panel packaging is configured in Designer config).
NBDesigner product configuration Online Designer section with the Enable the Online Designer checkbox and sides preset
Product configuration: turn on the Online Designer and set the sides for the product before configuring its 3D preview.
  1. Open Designer config for the product to set its print areas, bleed and the file(s) the 3D mesh will reference.
  2. Supply the 3D model for the shape — a Cmsmart-built mesh for custom shapes, or one already in the library — so the preview tool has something to texture with the buyer's design.
  3. Set Settings > Output for print files: PDF export and ICC/CMYK for anything going to real offset or digital print, not just screen preview.
  4. Place a test order, rotate the 3D preview, then check Cmsmart > Orders > Create PDF to confirm the print-ready PDF matches what the preview showed, including custom sizes.
NBDesigner Create PDF tab showing a Ready print-ready PDF rendered by the cloud renderer
Create PDF tab on a test order: the print-ready PDF rendered by Cmsmart Cloud, the same file the 3D preview represented to the buyer.
  1. Turn on AI preflight under Cmsmart Cloud so every order's file is scored for DPI, color mode and bleed before it reaches your print queue.

For the print-option and price-matrix side of a packaging catalog, see how to build multi-part products in the NBDesigner Product Builder; for the review-before-production step, see how to set up a preview builder for your product.

What can Cmsmart build beyond the standard 3D preview?

The standard 3D preview tool rotates one mesh per product. For store-specific needs — multiple finishes, AR try-on, or a 3D viewer wired into a custom configurator — Cmsmart builds that as custom development on top of NBDesigner, scoped to your catalog.

NBDesigner's 3D preview button and mesh loader are real, shipping features. What varies is the mesh itself, material/colorway switching, and any viewer behavior specific to one store's catalog. Cmsmart builds these as custom development, the way it did for Rebelo, AG in 2021:

  • Custom 3D meshes per SKU. Cmsmart models the box, mug, cap or display shape your store sells, including fold lines and bleed, so the preview matches the die-line — not a generic placeholder shape.
  • Material and colorway switching inside the 3D view. Letting a buyer swap vinyl color, finish or hardware on the same mesh without reloading the designer.
  • AR try-on for packaging and signage. Placing the 3D model in the buyer's own space on a phone, the same idea Shopify's case studies use for sizing confidence.
  • 3D preview wired into a price matrix or B2B quote flow. A buyer configuring a bulk packaging order sees the 3D result update live as size or material changes, linked to Cmsmart's web-to-print platform.

Delivery follows the same path for a single mesh or a full storefront: discovery, solution design, build sprints, QA against your real catalog, launch, then support — the model behind Cmsmart's published ecommerce projects and its 3D product setup service.

Get a custom 3D preview quote

Cmsmart Cloud AI Tools settings with Preflight Quality Checker enabled and required DPI set
Cmsmart Cloud's Preflight Quality Checker: part of the standard plugin, tuned per store rather than built from scratch.
Cmsmart demo video thumbnail: custom mug design with 3D mockup and 360 degree view
Video: custom mug design with a 3D mockup and 360° view (Cmsmart on YouTube).

Why work with Cmsmart on a 3D preview printing business?

Cmsmart has been building WooCommerce print and packaging stores since 2012, with 6,300+ client projects and 500+ custom-development engagements behind the Product Designer plugin, so a 3D preview build draws on patterns already proven across other print shops.

Cmsmart (a Netbase JSC division, operating since 2012) has run 6,300+ client projects and delivered 500+ custom-development projects, with 1,800+ live stores running today across 80+ countries. Trustpilot rates Cmsmart 4.2 out of 5 across 404 reviews (Trustpilot).

One verified Trustpilot review, from a web developer running NBDesigner for three years, sums up the day-to-day of it: "We have had the NB Designer plugin installed for three years and have experienced absolutely no problems... The designer works exceptionally well across all devices" (Trustpilot, 2026).

Rebelo, AG's own 2021 account credited the 3D preview project with smoother operations and positive buyer feedback, and reported traffic and revenue figures for the following year. Those figures were self-published at the time, without an independent audit or a stated measurement window, so they're historical context here, not a result this post claims you'll repeat. What is verifiable today: Rebelo, AG is still an operating packaging and display-stand printer in Estarreja, Portugal, four decades after it was founded.

Frequently asked questions

Does NBDesigner include 3D preview, or is it always custom work?

The 3D preview button and viewer are a real part of NBDesigner today, confirmed in the 2.17.0 changelog and visible as an enabled demo product in Cmsmart's Product Manager. The 3D mesh itself, material switching and any store-specific viewer behavior are custom per store.

How long does a 3D preview project take?

Expect a discovery call and solution design first, then build sprints sized to how many product shapes need a mesh. A single-shape pilot is faster than a full packaging catalog; Cmsmart scopes the timeline during discovery, before any work starts.

Can 3D preview connect to our existing price matrix or B2B quote system?

Yes, as custom development — Cmsmart can wire the 3D viewer into an existing price matrix so the model updates as a buyer changes size, material or quantity, the approach used on Cmsmart's web-to-print builds.

Does the print-ready file match what the buyer saw in 3D?

That's the point of the print-ready PDF that matches the order (2.17.0): the automatic render, the cloud renderer and Create PDF all read the same page geometry, including custom sizes, instead of drifting from the preview the buyer approved.

What happens if approved artwork is edited afterward?

NBDesigner's approved-artwork lock (2.17.0) blocks any save over a design once its order item is approved, with a clear message — keeping the approved file safe from a silent replacement before it goes to print.

Written by

Cmsmart Product Designer Plugin Engineer

Builds and supports the Cmsmart Product Designer (NBDesigner) for WooCommerce.

  • NBDesigner
  • WooCommerce
  • Product customizer
  • Release notes
More from this expert →