Product Designer Color Customization for WooCommerce

Applies to Cmsmart Product Designer (NBDesigner) 2.17.1 · Updated October 2026. Every screenshot below is a real capture from the plugin's own demo store, taken this month.

In short

  • Shoppers personalize a shape, accent panel or background color in your online designer instead of emailing your team for a mockup in a different color.
  • The Elements tool adds a shape to the canvas, the template layers you lock stay fixed, and the object toolbar's color swatch sets the fill — all inside Cmsmart Product Designer (NBDesigner).
  • It takes a WooCommerce store on Cmsmart Product Designer 2.17.1+, a template with the right layers locked, and a few minutes to test one design end to end.

What's the real cost of custom color requests by email?

Cmsmart Product Designer removes the email back-and-forth over color by putting a fill-color swatch on every shape, text and clipart layer a shopper adds, so an invitation, label or sticker order can match a buyer's own palette without a support ticket or a redrawn mockup.

Printers and personalized-gift sellers hit the same wall every week: a shopper loves a template but wants the accent shape, the ribbon or the background panel in their own color. Today that usually means a support email, a hand-edited mockup, and a buyer who has moved on by the time the reply lands.

  • Every color request becomes a one-off support ticket instead of a self-serve choice on the product page.
  • Staff spend time in an image editor recoloring a flat mockup instead of taking the next order.
  • A shopper who cannot preview their color combination before paying is more likely to abandon the cart — checkout friction of any kind feeds into the 70.22% average cart abandonment rate Baymard Institute calculates across large-sample studies (2025).
  • Cost of the status quo, with your own numbers: color-change requests per week × minutes per manual mockup × your hourly design cost.

What would it look like if shoppers could recolor the design themselves?

Cmsmart Product Designer puts the color swatch on the canvas itself: a shopper opens the online designer, selects the shape or panel you left unlocked, picks a color, and sees it on the product immediately — no email, no wait, and no second mockup from your team.

Example scenario: A shopper opens an invitation template at 9 p.m. The logo, the border and the wording stay exactly as your studio designed them, but the accent panel behind the names is still an open layer. They click it, open the color swatch in the object toolbar, and match it to their event's color scheme in a few clicks. They click Process, see their artwork, add it to the cart and check out — all in the same visit, with no email in between.

If a template, a price rule or a whole color workflow needs building around this, talk to an ecommerce expert before you start.

How does Cmsmart deliver product designer color customization without breaking your template?

Cmsmart Product Designer (NBDesigner) builds every text block, shape, clipart and photo as its own layer with a fill-color control, while template locking keeps the layers you do not want touched — logo, border, layout — fixed, so a WooCommerce store can offer real color choice without losing brand consistency.

  • Online Designer canvas (core, live). The Elements tab adds shapes, icons, frames, QR codes and free draw next to Templates, Text, Cliparts and Photos, all on the same canvas.
  • Per-object color swatch (core, live). Select any layer — text, shape or clipart — and the object toolbar carries a fill-color swatch, shown below on a text layer; the same control is what a shopper uses to recolor a shape.
  • Locked template layers (core, live). In template mode you lock a layer's movement, rotation and scale, or force-lock it, so the logo and layout stay put while one shape stays open to the shopper.
  • Print-ready PDF (core, live). Whatever color the shopper chooses renders into the print-ready PDF that matches the order, the same file Create PDF produces, since 2.17.0.
  • Preset color swatches on product options (core, live, a different module). Pricing Options can show a fixed swatch list — a shirt's stock colors, for example — priced per choice; that is a separate control from the free-form canvas color below, and the two are easy to confuse when briefing a project.
  • A brand-safe palette on the canvas (custom development). The canvas color swatch is a free color and hex picker today; limiting it to your approved brand or print-safe colors is a project Cmsmart builds on top, not a plugin setting.
Product designer color customization starts here: Cmsmart Online Designer with the Templates panel open and the Elements tab visible in the left sidebar
The Cmsmart Online Designer open on an invitation template. Elements, where shapes live, sits in the same left sidebar as Templates, Text, Cliparts and Photos.
Online designer toolbar for a selected text layer showing font, alignment and a dark fill-color swatch icon
The object toolbar for a selected layer, shown here on a text block. The dark square icon is the fill-color swatch — the same control a shopper uses to recolor a shape.

Cmsmart insight: In our delivery work, these two color controls get confused constantly. A merchant asks for "color options" and means the Pricing Options swatch list — a fixed set of stock colors, priced per choice — when what they actually want is a shopper recoloring a shape they just placed on the canvas. Decide which one your product needs before you brief a developer; they are built, priced and configured differently.

Preset swatches vs. free-form canvas color
Pricing Options swatch fieldOnline Designer canvas color
What it controlsA fixed list of option values, such as garment colorsThe fill of any shape, text or clipart layer the shopper places
Color choiceLimited to the swatches you defineOpen color and hex picker, any color
Where it showsOn the product page, before the designer opensInside the online designer canvas
PricingCan carry its own price ruleNo separate price; part of the design
Compare to a simple WooCommerce add-onWooCommerce's own Product Add-Ons extension ($79/year) offers flat or percentage-based swatches, with no price matrix or canvasNot applicable — a plain add-on extension has no design canvas
WooCommerce T-shirt product page with a row of preset color swatch circles from Cmsmart Pricing Options
A fixed color swatch field on a T-shirt product, set up with Cmsmart Pricing Options — a different control from the free-form shape color inside the Online Designer canvas above.
Thumbnail for the Cmsmart online canvas designer demo video on YouTube
Video: a walkthrough of the modern online canvas designer (Cmsmart on YouTube).

What's the business value of letting shoppers choose their own color?

Self-serve color choice turns a support thread into an add-to-cart: Cmsmart Product Designer shows the shopper their exact color combination before they pay, which cuts the back-and-forth that stalls personalized orders and gives your team a KPI it can actually track — design tickets and reprints per 100 orders.

BenefitHow it shows up in your businessKPI to track
Fewer manual mockupsStaff stop recoloring flat images by hand for every requestDesign-request tickets per 100 orders
Higher checkout completionShoppers see their own color before paying instead of guessingCart-to-order rate on designed products
Fewer reprintsThe color the shopper approved on screen is the color that printsReprint or return rate tied to "wrong color"
More orders per templateOne locked template serves many color preferences instead of one SKU per shadeOrders per published template

Rough ROI worksheet (use your own numbers): color-change support tickets per week × minutes to re-mock and reply × your fully loaded hourly design cost = weekly cost of the status quo. Deloitte Digital's 2026 research found 52% of consumers say they are more likely to buy from brands that personalize their experience, and that they spend about 30% more with those brands — read that as a reason to test self-serve color on one product line, not as a promised result for your store.

How to set up product designer color customization in your Cmsmart store

Setting up self-serve shape color takes a locked template, one open layer and the plugin's own color swatch, with no extra settings panel to configure. Cmsmart Product Designer applies the same object toolbar to every layer type, so once one shape is unlocked for color, the shopper's workflow is identical to changing a font color.

  1. In wp-admin, open the WooCommerce product and switch on Enable Design under the Cmsmart designer settings.
  2. Build or choose a template in the Templates tab: add your logo, border and any fixed text as their own layers.
  3. In template mode, lock the layers you do not want a shopper to touch — movement, rotation and scale, or a full force-lock — and leave the one shape or panel you want color-customizable unlocked.
  4. On the storefront, open the product and click Start Design, or Start and upload design, to load the template in the online designer.
  5. Select the open shape on the canvas, click the color swatch in the object toolbar, and choose a color.
  6. Click Process to generate "Your artwork." The product page description can tell shoppers plainly what they can change — "text, fonts, colours and shapes" is the exact wording on Cmsmart's own invitation demo product.
  7. Add the item to the cart and complete checkout; the design and its chosen colors travel with the order line.
  8. In wp-admin, open the order's Customer Design box to accept or decline the artwork, then check the order's print-ready PDF status before it goes to production.
Invitation product page on the Cmsmart demo store with a Start and upload design button
The product page where a shopper starts a design. "Start and upload design" opens the online designer on this invitation template.
Product page after Process showing Your artwork thumbnail and a What can be customized list naming text, fonts, colours and shapes
After Process, the product page shows "Your artwork" and the plugin's own "What can be customized" list: text, fonts, colours and shapes.
Order artwork screen showing Print-ready PDF status Ready, rendered by the cloud renderer, with a Regenerate button
The order's print-ready PDF status. Whatever color the shopper chose is already in this file — the same page geometry Create PDF uses, since 2.17.0.
Customer Design box on a WooCommerce order with Accept, Download all and Send notify mail controls
The Customer Design box on the order: accept or decline the artwork, with its chosen colors, and the design locks once it is approved.

Try it on a live product in the Cmsmart demos, or see the deeper settings in the Cmsmart Product Designer plugin page. If your shoppers need to sketch a custom shape instead of recoloring a built-in one, see how to insert a customer drawing in the product designer.

Going further: what can Cmsmart build on top of color customization?

Beyond the plugin's own color swatch, Cmsmart builds the project-specific layer on top: a brand-safe palette instead of a free color wheel, a 3D preview that updates live as the shopper recolors, or a bulk branded-palette rollout for every reseller in a B2B catalog — each scoped and quoted for your store.

  • Brand-safe or print-safe palettes. Reason: a free color wheel can produce colors that don't separate cleanly for print, or drift off-brand. What Cmsmart builds: a constrained swatch list, or a color-managed preview tied to your actual print profile, layered on top of the designer's own color control.
  • Live color sync into a 3D preview. Reason: the plugin's per-product 3D preview (desktop) shows a finished mockup, but it does not redraw itself as a shopper changes a 2D shape's color today. What Cmsmart builds: a rendering layer that keeps the 3D view in step with every color choice, plus extra mockup angles.
  • Bulk palette rollout for B2B catalogs. Reason: a reseller or franchise network needs the same locked template available in a set of approved brand colors across hundreds of SKUs. What Cmsmart builds: a palette manager that pushes an approved color set to every product built on a given template.
  • Color-aware pricing rules. Reason: some finishes — metallic foil, spot colors — cost more to print than a standard fill. What Cmsmart builds: a Pricing Options rule that reads the shopper's canvas color choice and adjusts the price automatically.

We scope this the same way for every project: discovery, solution design you sign off on, build sprints, QA against your real catalog, launch, then support. See examples of delivered work in our ecommerce project case studies.

Get a custom color workflow quote

See the service in detail: product designer customization services.

Why work with Cmsmart on your product designer?

Cmsmart has built ecommerce and print-personalization projects as a Netbase JSC division since 2012 — 6,300+ client projects, 4,600+ delivered and 1,800+ stores live today — with Cmsmart Product Designer (NBDesigner) as the plugin behind many of them, so a color-customization project lands with a team that already knows the designer's internals.

  • 6,300+ client projects and 4,600+ delivered, since 2012 (Netbase JSC).
  • 1,800+ live stores running today, across 80+ countries.
  • A Trustpilot rating of 4.2 from 404 reviews, as published.

"NBDesigner is a fantastic tool – very intuitive and easy to use. It makes the customization process smooth and efficient." — Khanh Nguyễn Đức, Trustpilot review, 2025

Browse related work in our project case studies, or compare designer tools in our product designer plugin comparison and set up pricing to match in printing options and price matrix setup.

Frequently asked questions

Can shoppers change the color of a shape they add in the online designer?

Yes. Any shape, text or clipart layer a shopper places on the canvas carries a fill-color swatch in the object toolbar. They select the layer and pick a color before they click Process.

Is this the same as the color swatches on a product's option form?

No. Pricing Options can show a fixed swatch list for a product option — a shirt's stock colors, for example — priced per choice. That is a separate, simpler control from the free-form color picker inside the online designer canvas; see the comparison table above.

Can I stop shoppers from recoloring the logo or layout?

Yes. Lock a layer's movement, rotation and scaling, or force-lock it, in template mode, and leave only the shape or panel you want customizable unlocked.

Does the chosen color make it into the print file?

Yes. Whatever color a shopper sets on the canvas renders into the print-ready PDF that matches the order, the same output Create PDF produces, so your team is not redoing the file by hand.

Can you limit color choice to our brand palette instead of a full color wheel?

Not out of the box today — the canvas color picker is a free color and hex selector. A brand-safe or print-safe palette on top of it is custom development that Cmsmart scopes and quotes per project.