Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. This guide covers the product designer appearance settings WooCommerce stores use to control how the online designer looks and behaves, in WP Admin > Cmsmart > Settings > Appearance.

In short

  • The Appearance tab turns the stock design editor into a tool that matches your store: fewer confusing panels for casual buyers, more guides for production teams.
  • It works through Yes/No and multiple-choice toggles — no code — grouped into Design editor, Modern layout, and Product sections.
  • Setup takes about 15 minutes; getting the recommendations right for print shop, POD apparel or B2B buyers is what this guide is for.

What's the cost of a cluttered or off-brand design tool?

A design tool with the wrong panels showing costs conversions and support time: Cmsmart Product Designer ships every guide, warning and tab turned mostly off by default, so an unconfigured store either overwhelms casual buyers with print jargon or hides warnings a production team actually needs.

We see the same few mistakes across stores that never touch this tab:

  • Jargon in front of casual buyers. Bleed guides, grids and layer dimensions are production vocabulary that add friction to a 90-second purchase.
  • Missing guides for production buyers. A B2B or POD buyer often wants ruler, grid and out-of-stage warnings on — turned off, clipped artwork only surfaces after it's printed.
  • Low-resolution art slipping through. Show warning image low resolution defaults to No, so a 72 DPI image can reach approval and you only catch it on press.
  • No brand presence in the tool. The Logo field is empty until set, so the editor looks generic even on a fully branded storefront.
  • Checkout friction on an already fragile funnel. The average documented cart-abandonment rate is 70.22% across fifty studies (Baymard Institute, 2006–2025) — every confusing second is one more chance to abandon.

What should your branded design editor look like?

Cmsmart Product Designer lets you show a simplified, logo-branded editor to casual buyers while keeping rulers, grids and quality warnings on for production-heavy catalogs — all from one settings tab, so the same plugin serves a gift shop and a sign shop differently.

A gift buyer clicks Start and upload design and sees your logo instead of a placeholder mark, with the Templates tab front and center and no ruler or bleed guide cluttering the canvas. On a signage catalog, the same plugin shows a ruler, a grid and a loud warning the moment artwork drifts off the printable area, because that buyer expects those guides.

Example scenario: A print shop runs a consumer gift line and a B2B signage line from one WooCommerce store. Gift products get a clean, logo-branded editor with no production clutter; the signage category keeps rulers, grids and out-of-stage warnings on, so clipped-artwork reprints drop.

How does Cmsmart's Appearance tab control the online designer?

Cmsmart's Appearance tab (WP Admin > Cmsmart > Settings > Appearance) groups every editor display toggle into Design editor, Modern layout and Product sections, so you can turn production guides and buyer-facing panels on or off without editing a template file.

Product designer appearance settings WooCommerce admins see in Cmsmart Settings Appearance: Design editor and top of Modern layout toggles
Cmsmart Product Designer 2.17.0, WP Admin > Cmsmart > Settings > Appearance — Design editor and the top of Modern layout.

The Design editor group has one switch today, Show bleed. The Modern layout group is the bulk of the tab: visibility toggles for the ruler, grid, dimensions, quality warnings, the design-area border, whether the Templates/Elements/Typography/manage-layers tabs show, plus template browsing mode and your editor logo.

Modern layout toggles for hiding Templates, Elements, Typography and Layers tabs, plus the editor logo upload
Cmsmart Product Designer 2.17.0, WP Admin > Cmsmart > Settings > Appearance — Modern layout (continued) and Logo.

Lower on the tab, a Product group decides how the design tool attaches to a product page: inline or on its own URL, whether saving a design auto-adds it to cart, and where the design button sits relative to Add to cart. The same tab also carries groups for category pages, cart/checkout messaging and misc display toggles — out of scope for this chapter's captures, so we cover them in a follow-up rather than guess at field names.

Product group settings: show design tool, auto add to cart and redirect, position of design button
Cmsmart Product Designer 2.17.0, WP Admin > Cmsmart > Settings > Appearance — Product group.

Cmsmart insight: the Modern layout toggles only matter if the product is actually using the Modern editor. Check WP Admin > Cmsmart > Settings > General > Default design editor layout first — it's Modern by default and Classic is marked deprecated — or you'll change an Appearance toggle and see no effect on a product still pinned to Classic.

General tab Default design editor layout set to Modern - recommended, with Visual and Classic - deprecated options
Cmsmart Product Designer 2.17.0, WP Admin > Cmsmart > Settings > General — Default design editor layout.

Here's what the Design editor and Modern layout fields do, their shipped default, and how we'd set them for three common businesses:

Field (as shown)What it doesDefaultRecommended — print shop / POD apparel / B2BWhere it shows on the storefront
Show bleedAdds bleed/safe-zone guides to the editor.NoYes / No / YesDashed guide lines on the canvas.
Show cmsmart colorpalletShows the type colorpallet in the editor.NoNo / Yes / NoColor picker in the text/element panel.
Show rulerHide/show the ruler as default.YesYes / No / YesRuler guides around the canvas (see the editor capture below).
Show product dimensions · Show grid · Show design area borderDimension label, grid overlay, printable-area outline.No (all three)Yes / No / YesOverlays on the canvas.
Show layer dimensionSize readout when a layer is selected.YesYes / Yes / YesSize label in the editor.
Show warning out of stage · Show warning image low resolutionQuality warnings: artwork past the boundary, images too low-res to print.No (both)Yes / Yes / YesInline warning badges.
Hide Templates tab · Hide Elements tab · Hide Typography section · Hide manage layers tabHides that panel in the modern editor's left rail.No (all shown)No / No / mostly No — hide Typography for brand-locked B2B, hide Layers for single-field PODLeft rail in the modern editor (see storefront capture below).
Show button change productAdds a button to switch products without closing the editor.YesYes / Yes / NoToolbar inside the editor.
Show all template sides when hover on the templatePreviews every template side on hover.YesYes / Yes / YesTemplates panel thumbnails.
Display template modeFlat list vs. grouped categories in the Templates panel.CategoriesCategories / Flatlist for small catalogs / CategoriesTemplates panel layout.
Show button link to browse product templates galleryThis button will show in start design popup.YesYes / Yes / NoThe design-method chooser popup buyers see first.
LogoChoose design editor logo if site logo not showing.empty (default: as installed)Brand mark in all three casesTop bar of the online designer.

And the Product group, which decides how the whole tool attaches to a product page:

Field (as shown)What it doesDefaultRecommended — print shop / POD apparel / B2BWhere it shows on the storefront
Show design toolInline on the product page, or its own URL.In product detail pageIn-page / In-page / Open new page for complex quotesWhether the design button opens inline (see capture below).
Auto add to cart and redirectAuto-adds to cart after saving a design, if Show design tool is in-page.NoNo / Yes for impulse buys / NoBehavior right after saving a design.
Position of design buttonBefore/after variations, after Add to cart, or a custom shortcode hook.Before add to cart, after variationsDefault / Default / Custom Hook for page buildersExact spot of the design button.

On the storefront, the default Show ruler: Yes and Hide Templates tab: No combination looks like this inside the live designer:

Online designer canvas with ruler and Templates tab visible, matching the Show ruler and Hide Templates tab settings
Cmsmart Product Designer 2.17.0, storefront online designer — ruler and Templates tab as configured above.

And the default Position of design button places the design button above the quantity field and Add to cart button, as the Product group's description promises:

Invitation product page with the Start and upload design button placed before the quantity field and Add to cart button
Cmsmart Product Designer 2.17.0, storefront product page — default Position of design button placement.

What's the business value of tuning these settings?

Matching the editor to the buyer cuts two costs at once for Cmsmart stores: fewer support tickets from confused casual buyers, and fewer reprints from production buyers who never saw a warning that would have caught a problem before checkout.

BenefitHow it shows up in your businessKPI to track
Fewer confused casual buyersLogo branding, no production jargon, Templates tab front and center.Design-tool bounce rate.
Fewer reprints from clipped or low-res artOut-of-stage and low-resolution warnings catch problems before the order is placed.Reprint rate, cost per reprint.
Faster production QARuler, grid and dimension overlays let your team sanity-check scale before approving artwork.Minutes per manual proof check.
Consistent brand experienceYour logo replaces the default mark inside the editor itself.Support tickets questioning the editor's branding.

Quick worksheet: if your store reprints R orders a month at a cost of C per reprint from clipped or low-resolution artwork, and the warnings above catch even half before checkout, that's R × C × 0.5 saved monthly — plug in your own numbers.

These editor warnings are half the quality story: downstream, Cmsmart Cloud rendering and the print-ready PDF that matches the order (both current since 2.17) make sure the shipped file is the one the buyer approved. WooCommerce runs 31% of the top one million ecommerce sites (Store Leads data, accessed 2026), and demand for personalized products keeps growing: the global print-on-demand market is valued at roughly $10.8 billion in 2025, reaching $57.5 billion by 2033 at a 23.6% CAGR (Grand View Research, 2025).

How do you set up product designer appearance settings WooCommerce stores need?

You configure the whole Appearance tab in one WP Admin screen with no code: install and activate Cmsmart Product Designer, open Settings > Appearance, set the Design editor and Modern layout toggles for your buyers, then confirm the Product group matches your buying flow.

  1. In WP Admin, go to Cmsmart > Settings, then open the Appearance tab.
  2. Check General > Default design editor layout first — Modern layout fields only affect products on the Modern layout.
  3. In Design editor, set Show bleed on for production-heavy catalogs, off for simple gift products.
  4. In Modern layout, turn on Show warning out of stage and Show warning image low resolution for any print catalog.
  5. Decide Show ruler, Show grid and Show product dimensions based on whether buyers are casual (off) or production-savvy (on).
  6. Review the four Hide-tab toggles and switch off only panels your catalog doesn't need — hiding Templates on a repeat-order catalog costs re-orders.
  7. Upload your Logo so the editor's top bar matches your storefront.
  8. In the Product group, confirm Show design tool, Auto add to cart and redirect and Position of design button match your flow, then save.
  9. Open a real product in an incognito window and confirm the ruler, templates, warnings and button position changed as expected.

Common mistakes and troubleshooting

  • A Modern layout toggle seems to do nothing. Check the product's layout under General — these fields don't apply to products still on Classic or Visual.
  • The logo isn't showing in the editor. It's only used as a fallback when no site logo is already detected; upload a dedicated one rather than assuming the fallback applies.
  • Buyers say the editor looks too technical. Turn off Show bleed, Show ruler, Show grid and Show product dimensions for consumer catalogs.
  • Hiding a tab seems to remove functionality. The Hide-tab toggles only hide the panel; templates, elements and layers already in a design are unaffected.

Can Cmsmart build custom design-editor features beyond these toggles?

Yes — the Appearance tab covers visibility toggles, but a fully white-labeled editor skin, per-category branding, role-based tool access or A/B-tested button placement go beyond what the settings screen exposes, and Cmsmart builds those as custom development on top of the plugin.

The Appearance tab is deliberately simple: Yes/No switches, not a visual theme builder. For stores that need more, here's what we build as custom work:

  • Per-category or per-brand editor skins. One logo and toggle set apply store-wide out of the box; a marketplace often needs a different look per vendor.
  • Role-based tool visibility. Ruler and grid for logged-in B2B accounts only, simplified view for retail — the stock settings are store-wide, not account-aware.
  • Button placement A/B testing. The Position of design button field is a fixed choice; testing variants against conversion data is custom instrumentation.
  • Deeper brand-kit enforcement. Locking fonts and colors to an approved brand kit across every template, beyond the single default-color field on Colors.

This is the same scope as our product designer customization service: discovery, a solution design you approve, development in sprints, QA against your catalog, launch and support — see it in action at /ecommerce-projects.

Get a custom-branded design editor built

Why work with Cmsmart on your product designer setup?

Cmsmart has built and supported the Product Designer (formerly NBDesigner) plugin since 2012 as a division of Netbase JSC, with thousands of live web-to-print and POD stores running the same settings covered in this guide.

Cmsmart (a Netbase JSC division since 2012) has delivered 6,300+ client projects and 4,600+ completed builds across 80+ countries, with a 4.2 Trustpilot rating from 404 reviews, including this one from a UK web developer:

"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 review

See the Cmsmart Product Designer plugin page or our web-to-print hub for the broader approach.

Related chapters in this series

Frequently asked questions

Does the Appearance tab apply per product or store-wide?

In the captures for this guide, the Appearance toggles are one global set for the store. The General tab lets you pick Modern, Visual or Classic layout per product, but there's no per-product override for the Appearance toggles themselves in 2.17.0 — different Appearance behavior per category or brand is custom development.

Will hiding the Templates or Elements tab delete anything?

No. The Hide-tab toggles only control visibility of that panel inside the modern editor. Templates, cliparts and saved layers are unaffected, and you can switch the panel back on later.

Why turn on warnings that are off by default?

The out-of-stage and low-resolution warnings catch the most common causes of reprints before the order is placed, not after. They default to off because not every store prints physical goods, but if you do, turning them on costs nothing and saves support time.

What happens if I don't set a Logo in the Appearance tab?

The field is meant to cover cases where no site logo is already detected. If the editor still looks unbranded after checking, upload a dedicated logo here rather than assuming the fallback applies.

How do I pay securely?

Contracts and payments go to the company, Netbase JSC: plans are paid through PayPal; services are invoiced by Netbase JSC under a written proposal and paid by bank transfer to Netbase JSC's company account or by PayPal Business. Cmsmart (Cmsmart Ecommerce) is the ecommerce brand of Netbase JSC, a company based in Hanoi, Vietnam.

How do I contact Cmsmart or get a quote?

Message the Cmsmart team on WhatsApp at +84 937 869 689 or email project@cmsmart.net; the contact page at cmsmart.net/contact lists every channel, and Request a quote (cmsmart.net/project-proposal) sends a project brief. Customers with a licence open a ticket from the dashboard.

Further reading