Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Every screen and screenshot below is the current version, captured live on the demo store; nothing here describes an older interface.

In short

  • A priced Color/Material field plus a print-layout Background control let sticker, label and card buyers pick a finish before they pay, instead of emailing back and forth about what it will look like.
  • Cmsmart's Product Designer (NBDesigner) ties the choice to your price matrix and to the print-ready PDF, so the file your press gets matches what the buyer approved.
  • Setup is a Printing Options field plus a Create PDF background image; going further — brand-locked palettes, live material stock, AI-matched backgrounds — is custom development Cmsmart builds on top.

A print shop selling die-cut stickers, roll labels or cards loses orders whenever a buyer has to guess what "holographic" or "kraft paper" looks like. Cmsmart's sticker design plugin for WooCommerce, part of the wider web-to-print toolkit, turns that guess into a priced choice on the product page: a swatch, a live price update, and a print-ready file matching what the buyer approved.

What does it cost when buyers can't picture their sticker's color or background?

Cmsmart Product Designer removes the guesswork around finishes by pricing each material or color as its own option, shown with the design, so the buyer sees the real look and cost before checkout instead of asking staff to describe it.

Print shops that sell customizable stickers, labels, business cards or signage run into the same five problems on repeat:

  • Manual quoting. "How much for holographic instead of matte?" turns into an email or a phone call because the price only lives in someone's head or a spreadsheet.
  • Mismatched expectations. A buyer imagines one background color, the printed sheet arrives in another, and the shop eats the reprint.
  • Abandoned carts at the finish line. A shopper who isn't sure what a material looks like closes the tab rather than ask. Cart abandonment averages 70.22% across documented studies, and uncertainty about the product is a recurring driver in that research (Baymard Institute, updated 2025).
  • Staff time on repeat questions. The same "what finishes do you offer" conversation happens dozens of times a week instead of once, in the product page.
  • A growing market with no self-serve path. The global self-adhesive labels market is on track to grow from $50.5 billion in 2023 to $71.8 billion by 2030, and the report names rising demand for personalized, short-run labels as part of that growth (Grand View Research, 2024). Shops without a self-serve way to offer that personalization are leaving it to competitors.

None of this is really about the color picker. It's about turning a conversation your staff has forty times a week into a self-serve step on the product page.

What does a self-serve background and material picker look like for buyers?

Cmsmart Product Designer shows background, color or material choices as priced swatches right on the product page, so a buyer picks the finish, designs on top of it, sees the total update immediately, and checks out with a price and a preview that already match what they chose.

Sticker design plugin for WooCommerce: die-cut sticker product page showing Color/Material swatches for brushed aluminum, glitter, holographic and kraft paper
A die-cut sticker product with a priced Color/Material picker — brushed aluminum, glitter, holographic, kraft paper — live on the product page.

Example scenario. A label printer adds a Color/Material field to its roll-label product: Matte white, Kraft, Clear BOPP and Holographic, each with its own per-unit price. A buyer picks Holographic, the total updates with the upcharge, they drop their logo onto the canvas, and Process saves it as their artwork. On the order screen, staff see exactly which material was chosen — no phone call needed — approve the design, and the print-ready PDF that reaches the press already carries the right background layout.

Product page after Process showing the saved design as Your artwork next to the Add to cart button
After Process, the chosen material and the finished design sit together as "Your artwork," ready for Add to cart.

That is the moment a background or material picker earns its place: the buyer never has to ask what something will look like, because they are looking at it.

How does Cmsmart's sticker design plugin for WooCommerce put background and material choices on your product pages?

Cmsmart combines a priced Color/Material field in Printing Options with an admin-managed Backgrounds library on the designer canvas and a separate Background image control on the print-ready file, so the same choice a buyer sees on the product page carries all the way through to the file your press receives.

Three pieces work together, and it's worth being precise about which is which:

  • Color/Material field (core, buyer-facing). An Online design field type in Printing Options. You list the materials or colors you actually stock, each with its own price, and attach the set to a product or a whole category. This is what buyers see as swatches on the product page.
  • Cliparts & Backgrounds library (core, admin-managed). A Media-group screen (Manager → Backgrounds) where the shop uploads background art and groups it into categories; a per-product setting controls whether the shared Cmsmart library is included alongside your own uploads.
  • Background on the print file (core, production-facing). On the Create PDF tab for an order's design, a Background control lets you attach or swap a background image for the print-ready layout itself, independent from what the buyer drew.
Online designer opened on a die-cut sticker product, with Text, Cliparts, Photos, Elements and Layers panels in the left sidebar
The modern designer's Cliparts and Elements panels are where background art and finishing graphics surface for the buyer.

Cmsmart insight: Keep a Color/Material list short — under six choices per product. Each option adds a row to the price matrix and a combination the AI preflight check and the cloud renderer both have to account for; a long list is harder for buyers to compare and harder for your team to keep priced correctly.

Online canvas designer demo video thumbnail
Video: a walkthrough of the modern online designer the Color/Material and Backgrounds panels sit inside (Cmsmart on YouTube).

If your buyers upload their own photo as the design instead of picking a background, that's a different feature — see our guide to customer photo uploads in the product designer. Prefer to talk it through first? Talk to a Cmsmart ecommerce expert about which approach fits your catalog.

TaskManual / generic pluginCmsmart Product Designer
Showing a buyer what a material or color looks likeEmail a swatch photo or describe it in textLive, priced swatches on the product page
Matching the print file to what the buyer approvedHope the mockup and the production file agreePrint PDFs now match Create PDF for custom sizes (2.17)
Managing background art and finishesLoose image folders, ad hoc namingBackgrounds/Cliparts library with categories
Approving a design before it goes to pressBack-and-forth emails or chatCustomer Design approve box with an approved-artwork lock

What's the business value of letting buyers pick their own background or material?

Letting buyers choose a priced background or material on the product page cuts reprints caused by mismatched expectations, moves routine quoting questions out of your inbox and off your staff's plate, and gives premium finishes like holographic or foil a direct, measurable route to revenue instead of a verbal upsell.

BenefitHow it shows up in your businessKPI to track
Fewer reprints from mismatched expectationsBuyers confirm the material/color and see the real print-ready file before payingReprint rate, order revisions after approval
Less staff time quoting finishesThe price matrix answers "how much for holographic" instantly, on the pageStaff minutes per order, time-to-quote
Higher order value on premium finishesGlitter, holographic or foil priced as opt-in options, not hidden upsellsAttach rate and revenue per premium option
Faster proof-to-productionApprove box plus the approved-artwork lock removes a design-edit loop after approvalProof approval turnaround, hours

Rough ROI worksheet (use your own numbers):

Staff time recovered = monthly orders × minutes saved per order on finish questions × your blended hourly labor cost.
Reprint savings = (current reprint rate − expected reprint rate) × monthly orders × average reprint cost (material + press time + shipping).

Plug in your own order volume, your own staff rate and your own reprint cost — the shape of the formula is what matters, not a number borrowed from someone else's shop.

For the broader opportunity: the U.S. print-on-demand market was valued at $1.89 billion in 2022 and is projected to reach $10.66 billion by 2030, a 24.4% CAGR (Grand View Research, 2024) — self-serve customization, including finish and background choice, is part of what that growth is buying.

Order design screen showing Print-ready PDF status as Ready, rendered by the cloud renderer
The Print-ready status confirms the file reaching your press was rendered from the same design the buyer approved — the basis for the reprint-rate KPI above.

How do you set up a background or material picker in Cmsmart Product Designer?

Setting up a background or material picker in Cmsmart Product Designer means adding a Color/Material field in Printing Options, stocking the Backgrounds library with your own art, and checking the Create PDF background control before you rely on the print-ready file for production.

Cmsmart Printing options list showing option sets including Die cut sticker and Area Design Shape
Cmsmart → Printing Options: each option set — including the Die cut sticker's Area Design Shape set — can carry a priced Color/Material field.
  1. Go to Cmsmart → Printing Options and open an existing option set for the product, or click Add new.
  2. Under Online design fields, add a Color/Material field.
  3. List every color, pattern or substrate you actually stock — brushed aluminum, glitter, holographic, kraft paper, whatever applies — and set a price for each.
  4. Under Apply for, attach the option set to specific Products or to a whole Category, so every sticker or label in that line gets the picker automatically.
  5. Save, then open the live product page and confirm the swatches appear above Start Design with the price updating per choice.
  6. In Manager → Backgrounds, upload any background images the designer's Cliparts panel should offer, and group them into categories so unrelated product lines don't share art by accident.
  7. Decide whether each product should also show the shared Cmsmart clipart/background library, or your uploads only, in the product's design settings.
  8. On a test order, open the design detail and go to the Create PDF tab; if the print layout itself needs a fixed backing image — not the buyer's chosen color — use Background → Change image and tick Include background image.
  9. Click Create PDF (or let automatic export run) and confirm the Print-ready status reads Ready, with the renderer and timestamp shown.
  10. Use the Customer Design approve box on the order to sign off the artwork; the approved-artwork lock then stops further edits, so what ships matches what was proofed.
Printing option editor showing the Online design fields row with the Color/Material field button
The Color/Material field sits among Online design fields in the Printing Option editor, next to Size, DPI and Area design shape.
Online designer with a heading text layer added to a blank sticker canvas
Once the material is picked, the buyer designs on the canvas as usual — here, adding a heading in the Text panel.
Create PDF tab showing the Background control with Change image and View buttons, and the Include background image checkbox
The Create PDF tab's Background control sets a fixed image for the print layout itself, separate from the buyer's on-canvas choice.

For the full price-matrix walkthrough beyond this one field, see our guide to configuring print pricing options in NBDesigner.

How far can you take background and material customization with custom development?

The Color/Material field and the Backgrounds library cover the core picker out of the box; Cmsmart builds the rest — brand-locked palettes, live material stock synced to inventory, AI-matched backgrounds and automatic campaign rotation — as custom development on top of the plugin you already run.

Everything above ships in the plugin today. Past that, these are real requests Cmsmart has built for merchants as custom development, not core features:

  • Brand-locked palettes per reseller or franchise. Restrict the Color/Material list a dealer or franchisee sees to their approved brand colors, instead of one shared list for every storefront.
  • Live material stock. Sync the Color/Material list to inventory or an ERP/MIS feed so an out-of-stock substrate disables itself instead of a buyer ordering it anyway.
  • AI-matched background suggestions. Recommend a background or finish based on the uploaded artwork's contrast and colors, building on the same AI preflight path already in the designer.
  • Campaign background rotation. Swap the Create PDF background image automatically by date or season across a catalog, instead of updating each product by hand.
  • One guided background step. Merge the priced Color/Material swatch and the Cliparts/Backgrounds art library into a single on-canvas "choose your background" step for the buyer, instead of two separate panels.

Cmsmart delivers this the same way as any ecommerce project: discovery, solution design, build sprints, QA against your real catalog, launch, and ongoing support. Component-based catalogs that need this kind of modular configuration often also use the Product Builder.

Plan my sticker & label store

See the full scope of this work on the product designer customization service page.

Why work with Cmsmart on your product designer setup?

Cmsmart has built web-to-print and product customization solutions since 2012, with 6,300+ client projects and a 4.2-star Trustpilot rating from verified reviewers, including direct experience configuring price matrices, background libraries and print-ready output for print shops and label businesses like yours.

Cmsmart (a Netbase JSC division) has worked on ecommerce and printing projects since 2012, with 6,300+ client projects and 4,600+ projects delivered. Reviewers rate the product designer itself as fitting their needs out of the box:

"The product designer is exactly what we needed. Lots of features and very well designed. The pricing is great. The support was great." — Franklin (US), Trustpilot review

See the full numbers on our platform page.

Frequently asked questions about background and material customization

Is the background/material picker the same thing as letting customers upload their own photo?

No. Color/Material is a priced option the shop defines; the buyer picks from it. Letting buyers upload their own photo as the design is a separate feature in the Photos panel — see our guide to customer photo uploads.

Will the print-ready PDF actually reflect the material or background the buyer chose?

Yes. As of 2.17, the automatic export, the order-status render and the Create PDF button all read the same page geometry, so a custom-sized design renders the same file everywhere instead of falling back to a template mockup.

Can we limit which colors or materials appear on a specific product?

Yes — Printing Options can be applied to one product or to a whole category. Keeping the list in sync with real stock levels is a manual edit today; live inventory sync is the kind of thing Cmsmart builds as custom development.

Can a buyer combine a chosen background image with a priced color option?

Today those are two separate panels — the priced Color/Material swatch and the Cliparts/Backgrounds art library on the canvas. Merging them into one guided step for the buyer is a common custom-development request; see the section above.

How long does it take to add this to our catalog?

Adding a Color/Material field to one product is a same-day admin task. Rolling it out with custom pricing rules, brand-locked palettes or stock sync across a catalog is a short project — see how Cmsmart scopes these.

Do more background or color choices slow down the online designer?

Keep background images reasonably sized — the Upload design settings control allowed file types and minimum DPI for customer uploads — and keep the Color/Material list short, per the insight above; that keeps both the canvas and the price matrix easy to manage.

Who manages the backgrounds and colors shown in NBDesigner's picker?

Shop admins control the options through an admin-managed background library and a priced Color/Material field inside Printing Options, which can be applied to individual products or whole categories.

What problem does the background and color picker solve for print shops?

It replaces manual quoting for finishes like holographic or kraft paper with self-serve, priced choices on the product page, which reduces mismatched previews, repetitive staff questions, and cart abandonment.

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 →