How to Design a Product Online (Step by Step)

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Steps and screenshots in this guide are from the live demo store at nbdesigner.cmsmart.net, captured on a current install.

In short

  • Shoppers design, price and preview a product on the product page itself, so you capture the order instead of a "send us your file" email.
  • Cmsmart's Product Designer (NBDesigner) editor adds text, photos, cliparts and templates to a live canvas, then hands a print-ready PDF to your production queue automatically.
  • Setup takes an active WooCommerce product, a configured design area, and about twenty minutes the first time.

What's the real cost of not letting customers design a product online?

Without an online designer, a custom order means an email brief, a manual mockup and a PDF approval before anyone pays. Cmsmart's Product Designer replaces that cycle with a live canvas on the product page, so the shopper designs, sees the price and checks out in one session.

Most shops selling anything customizable — apparel, signage, invitations, packaging, promo items — run into the same five frictions:

  • Manual proofs. A customer emails a logo or a wording change, someone on your team mocks it up in an image editor, and the order sits open until they reply.
  • Quoting delays. Price depends on size, material or quantity, so a custom item often can't even go in the cart until someone works out the number by hand.
  • Staff design time. Every proof, revision and price lookup is a few minutes someone on your team isn't spending on production or sales.
  • Reprints from miscommunication. A low-resolution logo or a design that doesn't account for bleed gets approved by email and only fails at the press.
  • Drop-off before checkout. The average online shopping cart is abandoned 70.22% of the time across industries (Baymard Institute, 2025) — every extra step between "I like this" and "I paid" adds to that risk, and a custom product with no visual proof until a follow-up email is a lot of extra steps.
How to design a product online: WooCommerce product page with a Start Design button next to Add to cart, below the color and size options
A design-enabled product page: once color and size are picked, "Start Design" sits right above Add to cart instead of a contact form.

Put a number on it: if your team spends fifteen minutes per custom order emailing proofs and checking prices, forty custom orders a month costs ten hours of staff time that a self-serve designer gives back — before counting the orders that never get a reply and quietly go cold.

What would it look like if customers could design and preview a product before paying?

Imagine a buyer opening a product page, adding their own photo or text, watching the price update as they choose size and quantity, and checking out — all before anyone on your team sees the order. Cmsmart's Product Designer (NBDesigner) does exactly that on a WooCommerce store today.

Example scenario: A buyer lands on a t-shirt product page at 9pm. They click Start Design, drop in a photo from their phone, add a line of text, and the designer's Preflight Check flags the image as low-resolution before they submit. They swap in a sharper photo, the price updates for their chosen color and size, and "Your artwork" appears next to Add to cart. By the time your team opens the shop the next morning, the order is sitting in Orders with a print-ready PDF already attached to the line item — no email thread, no manual mockup. Talk to an ecommerce expert about what that flow would look like for your catalog.

How does Cmsmart's online product designer actually work?

Cmsmart's Product Designer (NBDesigner) pairs a drag-and-drop canvas on the storefront with an admin pipeline that turns every finished design into a production file: the editor, pricing, approval and print-ready PDF all run inside WooCommerce, with AI preflight and Cmsmart Cloud rendering doing the parts a manual process gets wrong.

Five building blocks make up the system, and all five are in the plugin today — nothing here is custom development:

  • Storefront entry point. The "Start Design" chooser lets a buyer upload a finished file, design online from a blank canvas, or start from a template.
  • Design canvas. Text, Cliparts, Photos, Elements and Layers panels build the design per side (front/back/etc.), with uploads from the device, URL, Dropbox, Unsplash, Pexels, Pixabay or Freepik.
  • Pricing and print options. A price matrix ties cost to size, material, color or quantity, configured once per product in Printing Options.
  • Approval. The Customer Design box on the WooCommerce order screen lets staff accept or decline artwork and notify the buyer — and since 2.17, an approved-artwork lock stops a reopened design link from changing the file after sign-off.
  • Print-ready output. Create PDF (or automatic export on Process) produces a print-ready PDF that matches the order — including a buyer's own custom size — rendered by Cmsmart Cloud, with SVG, high-resolution PNG and CMYK JPG with an ICC profile also available to download.
Cmsmart Product Designer online canvas showing the text, cliparts, photos, elements and layers panels on a t-shirt
The online designer canvas: Text, Cliparts, Photos, Elements and Layers on the left, Process and Preflight Check top right.

Cmsmart insight: Most reprint disputes we see trace back to a design that got approved without anyone checking resolution or bleed first. Turn on AI Preflight and treat it as a required step before "Accept" in the Customer Design box, so that conversation happens before the file reaches the press, not after.

Customer Design box on the WooCommerce order screen with Accept and GO buttons to approve customer artwork
Customer Design box on the order screen: accept or decline the artwork, then notify the buyer.
Print-ready PDF status showing Ready, rendered by the cloud renderer, with a Regenerate print-ready PDF button
Print-ready PDF status on the order: Ready, Rendering or Failed, rendered by Cmsmart Cloud with a one-click Regenerate.
StepManual email workflowCmsmart Product Designer
Getting a designCustomer emails a file or a descriptionCustomer builds it on the product page
PricingStaff calculate by hand and replyPrice matrix updates live as options change
ApprovalBack-and-forth email threadAccept/decline in the Customer Design box, buyer notified
Print fileSomeone rebuilds it for printPrint-ready PDF generated automatically, matched to the order
Typical turnaroundHours to days, revision-dependentMinutes, from Process to order placed

What's the business value of letting customers design a product online?

A self-serve designer turns browsing into paid orders without a design request landing in your inbox. You cut the time between "add to cart" and a usable print file, cut reprints caused by miscommunication, and get a KPI to track — design-to-order conversion — instead of guessing how many quote emails went cold.

BenefitHow it shows up in your businessKPI to track
Fewer stalled quote conversationsBuyers finish designing instead of waiting for a replyDesign starts vs. completed orders
Faster turnaroundNo manual mockup or price lookup before productionHours from order to print-ready PDF
Fewer reprintsPreflight catches low-resolution art before approvalReprint rate per 100 orders
Staff time backNo one is building proofs by handMinutes of staff time per custom order
Higher order valueExtra sides, options and print upgrades are easy to add in the editorAverage order value on design-enabled products

Shoppers reward stores that make personalization easy: nearly three in four consumers say they're more likely to buy from a brand that personalizes the experience, and they spend 37% more with it (Deloitte Digital, 2026). And the opportunity isn't niche — the global web-to-print market is valued at $36.3 billion in 2025 (IMARC Group), which is demand a WooCommerce shop either captures with an in-store designer or loses to a competitor with a better configurator.

Cmsmart Printing Options admin screen listing price-matrix option sets by product
Printing Options: each product's price matrix lives here, so pricing updates without touching a spreadsheet.

ROI worksheet (your numbers):

  • Staff hours saved per month = (custom orders/month) × (minutes per manual quote − minutes per self-serve review) ÷ 60
  • Reprint savings per month = (orders/month) × (current reprint rate) × (average reprint cost) × (expected drop in reprint rate after adding AI Preflight)

How to design a product online: how do you set it up?

You need three things to set up Cmsmart's Product Designer: the plugin active on a WooCommerce product, at least one design area configured in Product Manager, and print options or a price matrix if cost changes with size, color or quantity. The walkthrough below runs on the live nbdesigner.cmsmart.net demo.

  1. Open a design-enabled product. Once a design area is configured in Product Manager, "Start Design" appears on the product page next to Add to cart, alongside the usual variation options (color, size).
  2. Choose how to start, from the chooser dialog: upload a finished file, design online from a blank canvas, or start from a template.
  3. Inside the editor, check the side label at the top (Front, Back, etc.) and use the 1/2 switcher with the up/down arrows on the right of the canvas to move between sides, then open Text, Cliparts, Photos, Elements or Layers from the left-hand panel.
  4. Add text from the Text panel — a heading, a subheading, body copy or curved text — then set the font, size and color from the top toolbar.
  5. Add an image: upload one from the device, or pull one in from Dropbox, an image URL, Unsplash, Pexels, Pixabay or Freepik, then crop and position it on the canvas.
  6. Run Preflight Check (top toolbar) before processing. It checks resolution and other print issues so the buyer fixes problems before the order reaches your queue.
  7. Click Process to save the design. The product page now shows it under "Your artwork," next to Add to cart.
  8. Add to cart. The design preview — front and back, where relevant — travels with the line item, with an Edit design link if the buyer wants to change anything before checkout.
  9. In wp-admin, open Cmsmart > Orders to see the order with its production status, then open the order to review the Customer Design box and accept or decline the artwork.
  10. On the order's detail screen, use Create PDF (or let automatic export run at Process) to generate the print-ready PDF. Status shows Ready, Rendering or Failed with a Regenerate button, and Download design offers SVG, high-resolution PNG, CMYK JPG with an ICC profile, and PDF.
Uploading a customer photo into the Cmsmart online product designer from Dropbox, Unsplash, Pexels and other sources
Adding a photo: upload from the device, or pull one in from Dropbox, Unsplash, Pexels, Pixabay or Freepik.
Adding a text heading on the canvas in the Cmsmart online product designer
Adding text: pick a heading, subheading or curved-text preset, then style it from the toolbar.
Product page showing the finished design saved under Your artwork, next to the Add to cart button
After Process, the saved design shows under "Your artwork" next to Add to cart.
WooCommerce cart line item showing the customer's custom t-shirt design preview with an Edit design link
The cart carries the design preview with the order, plus an Edit design link if the buyer wants a change.

Deep settings — allowed upload file types, minimum DPI, ICC/CMYK export defaults — live in Settings → Upload design and Settings → Output, and only need setting once for every product that shares them. For a second worked example on the same demo store, see the Cmsmart Product Designer demo walkthrough, and for the panel on the left of the canvas specifically, how layers work in the designer.

Video thumbnail for the Cmsmart online canvas designer demo
Video: Online canvas designer demo (Cmsmart on YouTube)

What can Cmsmart build beyond the standard online designer?

The Product Designer plugin covers the editor, pricing and print-ready pipeline out of the box, including a basic 3D preview toggle. When a store needs something that toggle doesn't do — full 360° rotation, mobile support, ERP-synced pricing, bulk B2B reorder portals — Cmsmart builds it as custom development on top of the same product, order and design data.

  • 3D preview beyond the built-in toggle. The plugin already lets you switch on a 3D preview per product, on desktop. Buyers on apparel, packaging or signage convert better with more than that single view — full 360° rotation, mobile support, or a preview tied into a 3D product configurator. Cmsmart builds those extensions on top of the existing design canvas for merchants who need them.
  • ERP/MIS and production sync. A print shop running a separate MIS doesn't want to re-key every web order. Cmsmart builds an integration that pushes order, design file and production status between WooCommerce and the shop's MIS/ERP.
  • B2B reorder and approval portals. A corporate buyer reordering the same branded product for ten locations needs saved designs, company pricing and a purchase-order approval step, not a one-off checkout. Cmsmart builds that portal on top of the designer.
  • Pricing rules beyond the price matrix. Tiered volume discounts, rush-order surcharges or material-based pricing the standard matrix doesn't model — Cmsmart extends the pricing engine to the store's exact rules.

Every custom build follows the same path: discovery to scope the real requirement, a solution design the team reviews before any code starts, milestone sprints with QA at each step, launch, then ongoing support — the model behind Cmsmart's 6,300+ client projects.

Get a custom product designer quote   See the product designer customization service

Why work with Cmsmart on your product designer?

Cmsmart has built ecommerce and web-to-print stores since 2012 as a Netbase JSC division, with 6,300+ client projects and 1,800+ live stores running today — including the Product Designer (NBDesigner) plugin this guide walks through.

  • 6,300+ client projects and 4,600+ projects delivered since 2012.
  • 1,800+ live stores running today, in 80+ countries.
  • Rated 4.2 on Trustpilot (404 reviews).
  • The same web-to-print platform and delivery team behind every custom build in this guide.

Frequently asked questions

Do I need coding skills to let customers design a product online?

No. Configure a design area on a product in Product Manager and the Start Design button, canvas, pricing and cart handling all come from the plugin. Custom pricing rules or integrations beyond that are where Cmsmart's development team comes in.

Can customers upload their own photos and artwork?

Yes. The designer accepts uploads from the device as well as Dropbox, an image URL, Unsplash, Pexels, Pixabay and Freepik, and Preflight Check flags resolution issues before the design is processed.

What happens to a design after the customer checks out?

It appears on the order in Cmsmart > Orders with the rest of the order details. Staff review it in the Customer Design box on the WooCommerce order screen, accept or decline it, and the system notifies the buyer either way.

Does the plugin generate print-ready files automatically?

Yes, since 2.17.0. With automatic export on, Process queues a print-ready PDF that matches the order's exact size; staff can also trigger it manually from Create PDF, with SVG, high-resolution PNG and CMYK JPG with an ICC profile also available to download.

Can Cmsmart extend the designer beyond what's built in?

Yes — full 360° or mobile 3D preview, ERP/MIS sync, B2B reorder portals and custom pricing rules are common requests that go beyond the standard plugin (which already includes a basic desktop 3D preview toggle) and are delivered as custom development.

Where can I try the online designer myself?

The live demo at the Product Designer product page runs the same editor shown in this guide, or see a second walkthrough in the Cmsmart Product Designer demo.