Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Every screen in this guide was captured live on the public demo store, nbdesigner.cmsmart.net, running the current plugin version.

In short

  • You can see the entire web-to-print journey — design, cart, order, approval, print-ready PDF — on a live store before you install anything or talk to sales.
  • The demo runs Cmsmart Product Designer (NBDesigner) 2.17.0: a buyer builds a design on a real product, and the order lands in a real WooCommerce admin with a production timeline, an approval step and a print-ready PDF.
  • What it takes: about ten minutes to walk the buyer side yourself, plus this guide for the admin side (the demo's wp-admin is not public). Your own store, catalog and pricing are then a configuration or a custom-development project away.

This product designer demo shows what a shopper sees the moment they want their own photo on a mug or their logo on a t-shirt, before they pay for it. A prospect types "custom mug" into Google, lands on a product page, and expects exactly that. If your store can't show it in the next thirty seconds, they go to a competitor who can.

Most WooCommerce store owners evaluating a product designer plugin face the same problem in reverse: sales-page screenshots don't show whether the tool survives a real order — a real cart line, a real approval step, a real print file. You want to click through it yourself.

That is what nbdesigner.cmsmart.net is for — a running WooCommerce store built on Cmsmart Product Designer (NBDesigner), kept on the current plugin version. This guide walks the buyer side with today's screenshots, then shows the same order from the admin side — timeline, artwork approval, print-ready PDF — so you judge the whole workflow, not just the editor.

What does it cost you to skip a product designer demo before you buy?

Without an on-page designer, every personalized order becomes a manual back-and-forth: email proofs, revision rounds, and a buyer who has already left the page. Cmsmart Product Designer puts the design, the price and the proof on the product page itself, so the shopper commits before they lose interest.

If you sell personalized print or gift products without an on-page designer, some of this will be familiar:

  • Blank product pages for anything custom. "Contact us for a quote" ends the visit for shoppers who expected a price and a preview immediately.
  • Manual proofing by email. Someone mocks the file onto the product, sends a PDF proof, and waits — often more than once per order.
  • Pricing built by hand. Size, material, sides and quantity breaks are quoted manually instead of priced live from print options.
  • Reprints from files that were never checked. A low-resolution upload or a design past the safe zone is only caught once the job is on press.
  • No record of what was approved. Without a logged approval step, it's one person's word against another's on a reprint request.

Put a number on it with your own data: (proofing emails per order) × (minutes per email) × (your hourly production cost) × (orders per month) is the time your team spends on something the product page could do automatically.

What would it look like if a shopper could design, price and order without leaving your product page?

On the Cmsmart demo, a shopper opens a product, picks "Design here online," builds the artwork on the real canvas, and watches it carry through to cart and checkout as a finished preview — no file emailed, no quote requested, no proof round-trip before the order is even placed.

Example scenario. A shopper opens your invitation product at 10 p.m., picks a template, swaps in two names and a date, and checks the preview against the product photo. They add it to the cart, see the same artwork thumbnail at checkout, and place the order. By the time your team opens the shop the next morning, the order is sitting in "Awaiting review" with the design attached and a print-ready PDF already queued — no email, no clarifying question, no delay.

Cmsmart demo video: modern WooCommerce product customization and web-to-print UI
Video: a short walkthrough of the modern WooCommerce product customization UI (Cmsmart on YouTube).

That is not a mockup of a future feature — it is the exact flow on nbdesigner.cmsmart.net today, and the rest of this guide shows each step with its real screen.

How does Cmsmart's demo show the whole order-to-print workflow, not just the editor?

Cmsmart Product Designer connects five building blocks that are easy to demo separately but hard to demo together: the storefront design tool, WooCommerce cart and checkout, an Orders workspace, an artwork approval step, and a print-ready PDF renderer — all live on the one demo store, all in the plugin today.

Five pieces make up the walkthrough below, each visible on the demo itself:

  • Storefront design tool. The Start and upload design chooser, the online canvas (templates, text, clipart), and the saved Your artwork state on the product page.
  • Cart and checkout. The design preview and an Edit design / Upload design link travel with the WooCommerce cart line through to the order review.
  • Orders workspace (Cmsmart > Orders). A production dashboard — awaiting review, in production, completed, revenue — with a status timeline per order.
  • Customer Design approval. An Accept/Decline box on the order screen, with a notify-the-customer email and, once approved, the approved-artwork lock (2.17): the server refuses further saves to an accepted order item.
  • Print-ready PDF, rendered in Cmsmart Cloud. The Create PDF tab shows Ready / Rendering / Failed with a Regenerate button; the print-ready PDF that matches the order (2.17) uses the order's own page size, including a buyer's custom width and height.
Cmsmart Product Designer (NBDesigner) active plugin row showing version 2.17.0 in WordPress
The demo runs the active Cmsmart Product Designer (NBDesigner) plugin at version 2.17.0 — the same version this guide's screenshots come from.

Cmsmart insight: most "the print doesn't match what was approved" disputes we get asked to debug trace back to a design that was accepted without anyone checking bleed and safe zone first. The approve box is the point to catch that — not the order screen a week later.

Manual proofing vs. the Cmsmart demo workflow
StepManual / email workflowCmsmart Product Designer
Design & priceQuoted by a person after the shopper asksPriced live on the product page as the shopper designs
ProofingPDF emailed back and forth, days of delayShown as "Your artwork" in cart, checkout and the order screen
Approval recordAn email thread, or nothing at allAccept/Decline in the Customer Design box, with an approved-artwork lock
Print fileBuilt by hand from the uploaded filePrint-ready PDF rendered in Cmsmart Cloud, sized to match the order
Order visibilityScattered across email and spreadsheetsOne Orders workspace with status, timeline and files per job

What's the business value of letting a shopper try before they buy?

Cmsmart turns proofing and pricing from staff time into something the storefront does itself, so you can track the result in hours saved per order and fewer reprints — not a promised percentage.

Where the value shows up
BenefitHow it shows up in your businessKPI to track
Less manual proofingDesign and preview happen on the product page instead of by emailProofing emails per order
Fewer abandoned custom ordersShopper sees a price and a preview immediately, no "contact us" dead endAdd-to-cart rate on designer-enabled products
Fewer reprintsApproval and preflight catch problems before the job printsReprint rate and cost per reprint
Faster production handoffPrint-ready PDF is queued automatically once the design is approvedHours from order placed to file ready for press

Rough-cut ROI worksheet — use your own numbers:
Proofing time saved per month = (orders/month) × (minutes per manual proof round) × (your hourly production cost).
Reprint savings per month = (current reprint rate − expected reprint rate) × (orders/month) × (cost per reprint).
Add both to see what a working demo is actually worth to your shop before you ask what it costs to build.

It is also worth knowing the category you are selling into is not standing still: the global print-on-demand market was valued at about $12.96 billion in 2025 and is projected to reach $118.85 billion by 2035 (Precedence Research, 2025) — more personalized orders, not fewer, are coming through stores like yours.

How do you set up your own run-through of the Cmsmart demo?

Open nbdesigner.cmsmart.net, design a product as a buyer would, then use this guide's admin screens to see what your team would see once that order lands — no login, no install, no payment required to evaluate it.

The buyer side is public — walk it yourself below. The admin steps show what happens on your side once an order like it arrives, captured from the same demo store.

  1. Open a product on the demo, such as Invitation, and click Start and upload design.
  2. Choose Design here online (or Upload a full design if you already have artwork).
  3. Build the design in the canvas — templates, text and clipart panels are on the left — then click Process.
  4. Back on the product page, the saved design shows as Your artwork next to Add to cart.
  5. Add it to the cart: the design preview, plus Edit design and Upload design links, travel with the line item through to checkout. Stop before entering payment details — you've seen what you need to.
  6. On your side, Cmsmart > Orders shows the job move through Awaiting review, In production, Completed, with revenue and cart-abandonment counters.
  7. Opening the order shows a production timeline, the line item's design file, and quick actions including Download print PDF.
  8. The Customer Design box on the WooCommerce order screen is where you Accept or Decline the artwork and optionally notify the customer; accepting applies the approved-artwork lock.
  9. The Create PDF tab shows the print-ready PDF status — Ready, Rendering or Failed, with who rendered it and when — and a Regenerate button if the design changes.
Product designer demo: WooCommerce product page with the Start and upload design button
Step 1 — the product page, with the button that starts the design flow.
Chooser dialog asking the shopper to upload a design or design online
Step 2 — upload a finished file, or design online from scratch.
Cmsmart online product designer canvas with templates, text and layout tools
Step 3 — the online designer, opened directly from the product page.
WooCommerce cart showing the custom design preview with Edit design and Upload design links
Steps 4–5 — the cart line carries the design preview and lets the shopper keep editing it.
Cmsmart Orders dashboard in WordPress admin with awaiting review, in production and revenue counters
Step 6 — Cmsmart > Orders, the production dashboard your team works from.
Order detail screen with production status timeline and line item design file
Step 7 — order detail: status timeline, design file and quick actions.
Customer Design box on the WooCommerce order screen with Accept and Decline actions
Step 8 — the Customer Design box: accept or decline the artwork.
Print-ready PDF status showing Ready, rendered by the Cmsmart Cloud renderer
Step 9 — print-ready PDF status on the Create PDF tab, rendered by Cmsmart Cloud.

Settings behind these screens — allowed upload file types and minimum DPI, PDF/ICC output options, and the printing-options price matrix — live under WooCommerce > Settings > Cmsmart and are covered in our guide to using the product designer plugin in the WordPress back end. If you want to install the plugin on your own store first, start with downloading and activating the lite version.

What can Cmsmart build on top of the demo for your store?

The demo shows what ships in Cmsmart Product Designer today. What it does not show — your catalog, your pricing rules, your ERP, your approval chain — is exactly what Cmsmart's custom-development team builds on top of the same plugin for your store.

None of the following is on the public demo, because none of it is a stock feature — it is work we scope and build per store:

  • ERP / MIS and accounting sync. Orders, stock and job status need to live in one system, not two — we connect print-ready orders to your MIS or accounting platform and pull status back.
  • Custom pricing engine rules. Price matrices rarely match a print shop's real cost model — we layer tiered breaks, rush fees and surcharges on top of the plugin's printing options to match your rate card.
  • B2B approval workflows. A reseller or franchise buyer often needs a manager's sign-off before print — we add multi-step approval and PO-based checkout on top of the existing Customer Design step.
  • Migration from another designer or platform. Moving off Fancy Product Designer or a legacy configurator shouldn't lose saved customer designs — we migrate the data into Cmsmart's format.
  • 3D or AR product preview. Flat mockups undersell mugs, apparel or packaging — we layer interactive 3D preview onto the existing design canvas.

Delivery follows the same path each time: discovery, solution design, sprints, QA, launch, support — the model behind our published ecommerce projects.

Plan my product designer build

Why work with Cmsmart beyond the demo?

Cmsmart has been building WooCommerce web-to-print and product-customization stores since 2012 as a Netbase JSC division, with thousands of projects delivered and a Trustpilot rating you can check independently.

Cmsmart (a Netbase JSC division, since 2012) has worked on 6,300+ client projects, delivered 4,600+ of them, and currently keeps 1,800+ live stores running for clients in 80+ countries — figures we publish and update on our platform page. Our Trustpilot rating is 4.2 from 404 reviews, verified on Trustpilot. You can also browse real delivered work on our ecommerce projects page.

Frequently asked questions

Is the nbdesigner.cmsmart.net demo free to try?

Yes. The storefront side — browsing products, designing online or uploading a file, adding to cart and reaching checkout — is open to anyone, no account required. Stop before entering payment details, as this guide does.

Which plugin version is the demo running?

Cmsmart Product Designer (NBDesigner) 2.17.0, released 2026-10-02. The active Plugins-screen row in this guide was captured the same day as every other screenshot here.

Can I see the admin side myself, or only the screenshots in this guide?

The demo's wp-admin is not public, so the Orders, approval and print-ready screens here are the admin's real view, captured for you. A live backend walkthrough on your own data is a quick call away through the quote wizard below.

What happens to a design after a shopper clicks Process?

It's saved to the product as "Your artwork," carried through the cart and checkout as a line-item preview, and attached to the resulting WooCommerce order, where it appears in the order detail screen and the Customer Design approval box.

How does a shop know a print file is actually ready to send to press?

The Create PDF tab on the order's design detail shows a status of Ready, Rendering or Failed, with the renderer and timestamp. "Ready" means the print-ready PDF — rendered in Cmsmart Cloud to match the order's exact size — exists and can be downloaded or regenerated.

Can Cmsmart set this up with our own products, pricing and systems?

Yes — that's custom development, not a demo setting. We scope pricing rules, integrations and approval flows around your store; see the section above on what we build on top of the plugin.

See it running, then let's build your version

You've walked the design, the order and the print-ready file. The next step is making it yours: your products, your pricing, your systems.

Plan my product designer build See the product designer customization service