Multi-layer product design software for WooCommerce

Applies to Cmsmart Product Designer (NBDesigner) 2.17+. Updated October 2026. Captures in this guide are from the live nbdesigner.cmsmart.net demo.

In short

  • A layer-based online designer lets a customer stack a background, a photo and text on one product — invitations, labels, door hangers, multi-element apparel — without emailing a designer back and forth.
  • Cmsmart Product Designer (NBDesigner) keeps every element on its own editable layer in the browser, then renders the exact stack the customer built into one print-ready PDF when the order is placed.
  • It takes a design area per product, a template with the layers you want customers to keep or replace, and an approval step before the file goes to the press.

What does juggling layers by hand cost your print shop?

Every manual layer fix — moving a text block, swapping a background, re-centering a photo — costs a print shop staff time and a round trip with the customer. Cmsmart Product Designer puts the layer stack in the customer's hands and carries it straight into the print-ready PDF, so staff stop rebuilding files by hand.

If your product has more than one design element — a background plus text, a photo plus a frame, a logo plus a name — five patterns show up in the order queue:

  • Rework on every small change. A customer asks to move the date two centimetres down, and someone reopens the source file, finds the layer, and re-exports.
  • Flattened artwork. A customer sends back a single merged JPG instead of an editable design, so a text typo can't be fixed without redoing the piece.
  • Mismatched print files. The on-screen preview shows four layers; the exported file only shows three, because the render didn't pick up the top one.
  • Staff-only design time. Every multi-element order needs a designer's hands before it reaches the press, capping how many orders one shop can take per day.
  • Abandoned carts. A shopper who can't stack their own photo over a template at 10pm closes the tab and emails "can you make me one" instead — if they email at all.

Put a number on it: weekly layer-fix hours = (orders needing a manual fix/week) × (minutes per fix) ÷ 60, times your loaded design-staff hourly rate. Shops selling 50+ multi-element orders a week often find this is their biggest hidden design-labor line.

What could a layer-based designer look like on your product pages?

Cmsmart Product Designer opens a browser-based canvas with Templates, Text, Cliparts, Photos, Elements and Layers on one left rail, so a customer builds a multi-element design — background, photo, text — themselves, and the order carries that exact layer stack through to production.

Multi-layer product design software for WooCommerce: Cmsmart Product Designer editor with the Layers panel in the left rail, invitation template loaded
The online designer's left rail: Templates, Text, Cliparts, Photos, Elements and Layers, each one stacking onto the canvas.

Example scenario. A buyer opens a wedding-invitation product at 10pm, picks a floral template, drags a photo layer onto it, retypes the names and date on the text layer already sitting on top, and nudges it until it clears the artwork below. They pay, and the design — still as the layers they built it from — is waiting in the order queue by morning, no email exchange required. Talk to an ecommerce expert about what this would look like for your range.

The same pattern works for a sticker sheet (background shape, icon, text), a door hanger (background art, photo, headline), or a multi-color apparel print where each color sits on its own layer. Compare that to a generic "type your name here" customizer — the simpler, single-field case covered in how to design a product with Cmsmart Product Designer — this guide is for products built from several stacked elements at once.

How does Cmsmart's multi-layer product design software for WooCommerce work?

Cmsmart Product Designer stores every layer with the order, locks the file once staff approve it, and renders the print-ready PDF from the same page geometry the admin's Create PDF uses — so the stack a customer built is the file that goes to press, not a redrawn copy.

Five building blocks carry a design from browser canvas to press-ready file:

  1. Design area and template — a product (invitation, door hanger, sticker sheet) is marked as design-enabled with one or more design areas, optionally pre-loaded with a starter template.
  2. Layer canvas — the Modern designer keeps Templates, Text, Cliparts, Photos and Elements as separate, independently movable and re-orderable layers (the Layers tab) on top of each other.
  3. Order capture — Process saves the whole layer stack as the order's design, attached to the specific line item, not a single flattened image.
  4. Approval lock — once staff approve the artwork, the server refuses further saves to that design (the approved-artwork lock added in 2.17), so the approved layer stack can't drift before it prints.
  5. Print-ready render and export — the cloud renderer and Create PDF read the same page geometry, including custom sizes, so the print-ready PDF matches the on-screen preview; Download design then offers SVG, high-resolution PNG, CMYK JPG with an ICC profile, or PDF.
Customer Design approval box in WooCommerce order screen with Accept and GO, artwork locked after approval
The Customer Design box: once a layered design is accepted here, the 2.17 approved-artwork lock stops further edits to that file.
Create PDF tab showing a Ready print-ready PDF status rendered by the cloud renderer, with paper size and bleed settings
Create PDF with the default settings reproduces the same print-ready PDF the cloud renderer already generated — margins, bleed and background all read from the same layer stack.

Cmsmart insight: before you approve a layered design, open "View file" and check the layers are still separate elements, not one merged image. A design that was flattened client-side (a screenshot pasted back in, for example) loses the editability and the clean vector/text layers a print-ready PDF needs — catching that at approval is far cheaper than catching it on press.

StepManual layering (designer rebuilds the file)Cmsmart layer-based designer
Who builds the layoutA staff designer, from a brief or an emailThe customer, on the product page
Changing one elementReopen the source file, find the layer, re-exportCustomer edits their own layer and re-orders
Risk of a missing layerDepends on the designer remembering every elementThe full stack is saved with the order automatically
Print file sourceA separate export, which can drift from the proofSame page geometry as the on-screen preview (2.17)
Reordering the same designRe-find and reopen the old source fileOrder again reuses the saved layer stack

What's the business value of getting layer handling right?

Putting layer control in the customer's hands turns design time into a self-serve step instead of a staff bottleneck, while the approval lock and matching print-ready PDF cut the reprints that come from a file that doesn't match what was approved.

BenefitHow it shows up in your businessKPI to track
Design time moves to the customerFewer orders need a staff designer before they reach the queueOrders with "in production" status reached without a manual design step
Fewer mismatched print filesWhat was approved is what prints, because render and Create PDF share page geometryReprint rate tied to artwork mismatch
Locked approvalsAn approved layer stack can't be edited out from under productionOrders reopened after approval
Self-serve checkoutShoppers who want a photo-plus-text product can build it themselves, any hourCart-to-order rate on multi-element products

Rough-cut ROI worksheet: monthly hours saved = (multi-element orders/month) × (minutes a designer spent per order) ÷ 60, times your loaded hourly rate. Weigh that against reprint cost avoided = (reprints/month from mismatched artwork) × (cost per reprint) once approvals lock the file customers built.

The category keeps growing: the global print-on-demand market was valued at USD 10.8 billion in 2025, projected to reach USD 57.5 billion by 2033, with apparel — much of it multi-layer artwork (garment plus print plus text) — holding 39.5% of 2025 revenue. The wider web-to-print market, covering the stationery and label side of this use case, is estimated at USD 36.3 billion in 2025, growing to USD 52.9 billion by 2034. Most of that volume runs through WooCommerce: an estimated 33.4% of tracked ecommerce stores worldwide, as of August 2025, which is why a designer built for WooCommerce specifically matters for reach.

How do you set up layer-based design areas in WooCommerce?

Setting up layered products means turning on design for the product, choosing a template with the layers you want customers to start from, and checking the approval and output settings so the file staff see is the file that prints — all inside Cmsmart Product Designer's existing admin screens.

Here is the practical path from a plain WooCommerce product to a layered, print-ready one:

  1. In Cmsmart → Product manager, enable online design on the product and add at least one design area sized to the product (for example a door hanger's print area in millimetres).
  2. Open the product's configuration and, if the product should start with a layout, assign a template from the Template library so customers aren't starting from a blank canvas.
  3. On the storefront, open the product and choose Design here online from the chooser to confirm the right template and layers load.
  4. In the designer, use the Layers tab alongside Text, Cliparts and Photos to check that background, photo and text sit on distinct, reorderable layers rather than one flattened image.
  5. Add or edit a text layer on top of the background art — font, size and curve are all layer properties that don't touch the layers underneath.
  6. Click Process; the design returns to the product page as "Your artwork," confirming the whole layer stack saved against that line item.
  7. Check the cart line item: it should carry a thumbnail of the saved design plus an "Edit design" link back into the same layer stack.
  8. In WooCommerce → Settings → Cmsmart → Output, confirm bleed, watermark and auto-export settings match your print floor's needs (full walkthrough in our print-ready PDF output settings guide).
  9. When the order arrives, open the Customer Design box on the order screen, review the layered artwork, and Accept it — this applies the approved-artwork lock.
  10. On the order's Create PDF tab, confirm the print-ready PDF shows Ready, then use Download design to pull SVG, PNG, CMYK JPG or PDF for the press.
Text panel in Cmsmart Product Designer showing heading presets stacked as a layer over a floral invitation background
Adding a text layer: heading presets and fonts sit on their own layer above the background template.
WooCommerce product page showing the customer's saved layered design as Your artwork next to Add to cart
Back on the product page, the full layer stack the customer built shows as "Your artwork."
WooCommerce cart line item with the layered design thumbnail and an Edit design link
The cart line item keeps the layered design attached, with a direct link back into the same layer stack.
Video thumbnail: How to work with layers in Cmsmart Product Designer
Video: How to work with layers in your design (Cmsmart on YouTube).

Price matrices, quantity tiers and per-option pricing for layered products are a separate setting — see our printing options price matrix guide rather than repeating that here.

Going further: what can Cmsmart build on top of layer-based design?

Beyond the standard Layers tab, Cmsmart builds custom development on the layer system for stores with sharper production or brand-control needs — locked brand layers, layer-aware pricing, and production integrations the core plugin doesn't ship with.

The standard Layers tab covers stacking, reordering and editing elements on the canvas. For stores that need tighter control over that stack, or need the layer data to reach other systems, these are custom development (we build this for your store; it is not in the core plugin):

  • Locked brand layers for franchise accounts. A logo or legal-copy layer customers can move but never delete or recolor, so every order stays on-brand.
  • Layer-aware pricing rules. Charging by how many layers or colors a design uses, common for screen print and gang-sheet jobs, instead of a flat per-item price.
  • ERP/MIS hand-off of the layer stack. Pushing the approved layer data — not just the flattened PDF — into your MIS so a press operator sees color counts and positions.
  • AI preflight on specific layers. Flagging a photo layer below print resolution or a text layer crossing the bleed line before approval, building on Cmsmart Cloud's preflight tools.
  • Saved layer presets for repeat B2B buyers. A corporate account that reorders the same layout with a new name each time, without rebuilding the stack.

Cmsmart delivers custom work the same way for every engagement: discovery, solution design, build sprints, QA, launch and ongoing support — the full model is on our ecommerce projects page.

Get a custom layer-based designer quote

Why work with Cmsmart on your layered product designer?

Cmsmart has built and supported the Product Designer (NBDesigner) for WooCommerce stores since 2012 as a division of Netbase JSC, with thousands of live storefronts using the same layer system this guide describes.

Cmsmart (a Netbase JSC division since 2012) has delivered 6,300+ client projects, with 1,800+ stores live today across 80+ countries, and holds a 4.2-star rating on Trustpilot from 404 reviews. One verified reviewer, a web developer in the UK, put it this way:

"We have had the NB Designer plugin installed for three years and have experienced absolutely no problems during that time. [...] The designer works exceptionally well across all devices and allows us to create the exact customisations required to perfectly fit our products and our business model." — Web Developer, Trustpilot

See related delivery work on our ecommerce projects and case studies page, the plugin itself on the Cmsmart Product Designer (NBDesigner) product page, or the service behind this guide: product designer customization.

Frequently asked questions

Does Cmsmart Product Designer support layers today, or is that custom work?

It's built in. The Modern online designer's left rail has a dedicated Layers tab alongside Templates, Text, Cliparts, Photos and Elements, and every item a customer adds — background, photo, text, clipart — sits on its own, independently editable and reorderable layer.

If a customer reorders their layers, does the print file reflect that?

Yes. Since 2.17, the cloud renderer and the order screen's Create PDF read the same page geometry as the on-screen design, so the stacking order a customer saves is what renders into the print-ready PDF.

Can a customer still edit a layered design after staff approve it?

No. The 2.17 approved-artwork lock refuses any save to a design once its order item is approved, so the approved layer stack can't change before it goes to production. Stores can widen this with the `nbd_ordered_design_edit_locked` filter.

What file formats can we hand to the print floor?

The order's Download design tab offers SVG, high-resolution PNG, CMYK JPG with an ICC profile, and PDF, in addition to the automatically generated print-ready PDF from Create PDF.

Can Cmsmart build layer-level rules specific to our shop, like locking a brand layer or pricing by layer count?

Yes, as custom development on top of the standard Layers tab — locked brand layers, layer-aware pricing and ERP hand-off of layer data are common requests handled through our product designer customization service.

How is this different from the general "how to design a product" walkthrough?

Our how to design a product guide covers the single-field, one-layer case (type a name, pick a color). This guide is for products built from several stacked, independently editable elements — invitations, label sheets, multi-color apparel — where layer order and the approval lock matter to what actually gets printed.