Product Designer Cliparts Fonts Setup: Add Backgrounds Too

Applies to Cmsmart Product Designer (formerly NBDesigner), demo build 2.18.0-dev on the 2.17.0 feature line · Updated October 2026. Screens below are captured from the live nbdesigner.cmsmart.net admin and the 2.17.0 plugin changelog; anything not shown or documented is labelled as custom development.

In short

  • Cmsmart > Media > Cliparts, Fonts and Backgrounds is where you control every ready-made graphic, typeface and backdrop buyers can use inside the online designer.
  • Each screen follows the same pattern: upload files, organize them into categories, then decide per product whether buyers see your library, Cmsmart's global library, or both.
  • Anyone running a "design it yourself" WooCommerce catalog needs this setup done once, then revisited whenever the product range changes.

What's the cost of a messy library, and what would a well-organized one look like?

Cmsmart Product Designer ships with a sample clipart set and hundreds of Google Fonts already available, so a new store isn't starting from zero. Left unorganized, though, that same abundance becomes the problem: buyers can't find anything, and every uploaded file without a category just adds noise.

A handful of pains repeat on almost every store that skips this setup:

  • Flat, uncategorized libraries. Cliparts and backgrounds uploaded without a category are practically invisible once the count climbs past a few dozen.
  • A font list nobody can use. Cmsmart ships with roughly 900 Google Fonts available; leaving them all on means scrolling past hundreds a brand never uses.
  • Mis-filed uploads. A clipart saved to the wrong category used to mean delete and re-upload — real admin time lost every week.
  • An inconsistent catalog. Without curated categories, every buyer who reaches for a clipart ends up with a different look on the same product page.

Online shopping cart abandonment averages 70.22% across industries (Baymard Institute, 2025), and a design step that's slow to use because the library is a mess is exactly the kind of friction that pushes a borderline order into that number. Demand for this kind of self-serve personalization keeps growing too: the global print-on-demand market was valued at $10.8 billion in 2025, forecast to grow at a 23.6% CAGR through 2033 (Grand View Research, 2026) — reason enough to spend an afternoon organizing the library buyers actually touch.

How does Cmsmart organize Cliparts, Fonts and Backgrounds behind the scenes?

Cliparts, Fonts and Backgrounds each get their own admin screen under Cmsmart's Media menu, and all three follow the same pattern: upload files, sort them into categories, then switch a global library on or off per product. The table below lists every field we could verify on these screens.

Cmsmart Product Designer Cliparts manager in WP Admin showing categories and the clipart library grid, product designer cliparts fonts setup
Cmsmart Product Designer 2.18.0-dev, WP Admin > Cmsmart > Media > Cliparts — categories on the right, the upload form and clipart grid on the left.

On this demo store the Cliparts screen already holds 681 cliparts sorted into 14 categories (Alphabet, Bubble, Girl, Animal, Cute, Famous, Sport, Hand, Hearts, Sky, Logo and others), using 13.6 MB of storage — a reasonable starting point, but the categories are what a buyer actually filters by, not the raw count.

Cliparts, Fonts and Backgrounds: fields, defaults and where they surface for buyers
Field (as shown)What it controlsDefaultRecommended — Print shop / POD apparel / B2BShows up on the storefront
Clipart files (Choose Files)Uploads SVG/PNG/JPG/JPEG artworkas installedPrint: brand-safe icons · POD: seasonal art · B2B: approved marks onlyCliparts tab in the canvas
Categories (Alphabet, Bubble, Girl …)Groups cliparts for filteringas installed (sample set)Print: by product line · POD: by theme · B2B: keep it shortCategory filter in the Cliparts tab
Per-card category pickerRe-files a clipart without re-uploadas installedAll: fix mis-filed uploads instantlyCorrected category on next filter
Enable global clipart library (site-wide)Turns Cmsmart's shared catalog on/offOn (CHANGELOG 2.14.1)Print & POD: leave on · B2B: consider offGlobal categories appear/disappear everywhere
Include Cmsmart global clipart library (per product)Overrides the site switch for one productas installedB2B: off + whitelist on restricted productsThat product's Cliparts tab narrows
Font nameMust match the font file's own internal nameemptyAll: copy it, don't retypeNo effect if wrong — font fails silently
Display nameLabel buyers see in the Text panelemptyPrint & POD: plain label · B2B: brand nameFont picker in the Text tab
Font files (Regular/Italic/Bold/Bold italic)Weights buyers can pick, TTF onlynone uploadedAll: upload at least RegularStyles available when formatting text
Font Language SubsetsCharacter coverage for a custom fontAll languageB2B: narrow only if a script is omittedWhich characters render correctly
Google Fonts list (Select/Unselect All)Toggles ~900 hosted fontsas installedAll: trim to fonts you useFont-list length/load time
Background files (Choose Files)Uploads images to design on top ofas installed (none on this demo)Print: textures · POD: seasonal scenes · B2B: approved onlyBackground layer in the finished design
Background categoriesGroups backgrounds like Cliparts doesas installed (none yet)Same as Cliparts categoriesCategory filter wherever Backgrounds surface

Cmsmart insight: the library itself rarely decides whether buyers use it — the categories do. A pile of cliparts dumped into one flat list gets ignored; the same set organized to match your product range gets picked on nearly every order. Spend the setup hour on categories, not on uploading more files.

Online designer canvas with the Templates panel open, showing the left toolbar with Templates, Text, Cliparts, Photos, Elements and Layers icons
Cmsmart Product Designer 2.18.0-dev, buyer-side online designer — the Cliparts icon sits in the same left-hand toolbar as Templates, Text, Photos, Elements and Layers; this capture shows the Templates panel open.

Cliparts sits one click below Templates in that same toolbar, and the print pipeline treats it the same way: a clipart layer exports through Cmsmart Cloud rendering exactly like a photo or text layer, so there's no separate output path to maintain once a design reaches the order queue.

How do you add custom and Google Fonts buyers can use?

Cmsmart Product Designer supports two font sources: your own uploaded TTF families under Custom Fonts, and a toggle list of Google's hosted fonts. Both feed the same Text panel in the designer, so what you enable here is exactly what a buyer sees when they format text.

Cmsmart Product Designer Fonts manager showing the Add font form and the Google Fonts list with 900 fonts
Cmsmart Product Designer 2.18.0-dev, WP Admin > Cmsmart > Media > Fonts — Custom Fonts on top, Google Fonts below.

Setting up a custom font, start to finish:

  1. Open the font file on your own computer first, so you can read its real internal name from the font's own properties box — not the filename.
  2. Enter that exact name in Font name; the page's own warning is explicit that changing it breaks the upload.
  3. Give it a Display name — this is the label a buyer sees in the Text panel, and it can read however you like.
  4. Upload the Regular TTF file at minimum, plus Italic, Bold and Bold italic if you have them.
  5. Leave Font Language Subsets on All language unless the brand font is missing a script your buyers type in.
  6. Click Save, then confirm the font appears under List fonts > Custom fonts.

For Google Fonts, search or filter by category and subset, then tick the families you want — the page's own note says to remove fonts you don't use so the design editor loads faster for every buyer, which matters more the longer that list gets.

Designer Text panel showing heading presets built from the fonts enabled in the admin Fonts manager
Cmsmart Product Designer 2.18.0-dev, buyer-side Text panel — heading and body presets draw on whatever fonts you enabled in Fonts manager.

How do you set up Backgrounds for buyers to design on?

Backgrounds work exactly like Cliparts: upload SVG, PNG or JPG files and sort them into categories. On this demo store the Backgrounds screen is still empty, which is also the state a fresh install starts from — nothing loads for buyers until you add at least one file.

Cmsmart Product Designer Backgrounds manager showing the upload form and empty-state message with no backgrounds yet
Cmsmart Product Designer 2.18.0-dev, WP Admin > Cmsmart > Media > Backgrounds — upload form and categories on an install with no backgrounds added yet.
  1. Go to Cmsmart > Media > Backgrounds.
  2. Add a category first if you want backgrounds organized by theme or product line — the picker works the same hover-and-move way it does on Cliparts.
  3. Choose your SVG, PNG or JPG files (multiple uploads are allowed) and tick the categories to file them under.
  4. Click Save and confirm the background appears in the library grid under the right category.

Capture note: the buyer-facing background picker wasn't captured this round. Per the 2.17.0 changelog, a background is a real rendered layer in the print pipeline, tracked the same way as any other design layer.

What's the business value of getting this setup right?

A well-organized library turns "I don't have artwork" into a finished order, keeps every product's look consistent without manual review, and cuts the time your team spends fixing mis-filed uploads or chasing low-resolution buyer files. Cmsmart ties each of those outcomes to a KPI you already track.

Example scenario. A print shop renames its clipart categories to match its product lines and disables the global library on its B2B-only products. Within a few orders, fewer designs need a manual proof check, simply because buyers are picking from a narrower, on-brand set.

Track it with KPIs you already have: designer-open-to-cart rate, support tickets tagged design-help, and the share of orders using your curated categories versus the open global library.

What common mistakes trip up a product designer cliparts fonts setup?

Most setup problems with Cmsmart's Cliparts, Fonts and Backgrounds screens trace back to looking in the wrong place or skipping a version check, not a broken feature. Here's what we'd check first before assuming something is broken.

  • Looking under Settings > Libraries. That tab configures JavaScript/CSS libraries for the designer's own code, not your assets. Cliparts, Fonts and Backgrounds live under Cmsmart > Media instead.
  • A clipart or background that silently failed to save. Earlier builds saved the record even when the file failed to copy into the library folder. Since 2.15.1 a failed copy is rejected outright.
  • Local cliparts 404ing after a host migration. Root-relative upload URLs could break every local clipart (folder prefix stacking up per category); fixed in 2.15.1 — update rather than re-upload.
  • Global cliparts missing after an update. If a product whitelists categories, re-tick Include Cmsmart global clipart library (2.14.1 changed how the whitelist and global library interact).
  • An empty Cliparts tab. With your own library empty and the global library off, add a Flaticon API key on General settings as a fallback source.
Settings Libraries tab in WP Admin showing JavaScript and CSS library options, not the Cliparts Fonts Backgrounds screens
Cmsmart Product Designer 2.18.0-dev, WP Admin > Cmsmart > Settings > Libraries — this tab is for JS/CSS libraries, not your clipart, font or background files.
Cmsmart License and activation screen showing plugin version 2.18.0-dev before following this setup guide
Cmsmart Product Designer 2.18.0-dev, WP Admin > Cmsmart > License — check your installed version here before following any version-specific step above.

Where does custom development go further than the built-in libraries?

The core Cliparts, Fonts and Backgrounds screens cover upload, categorize and toggle — browsing, filtering and per-product curation. For brand-locked asset sets, automatic suggestions or a synced feed from an external DAM, Cmsmart builds custom development on top of the same screens, never claimed as something the standard plugin already does.

A few extensions we build when a shop's library needs outgrow the standard screens:

  • Brand-locked asset packs. A franchise or dealer buyer should only ever place your company's approved marks, not the open global library. Cmsmart builds a restricted, per-account clipart or font set so off-brand uploads and global categories never reach that account's canvas.
  • Context-aware suggestions. Instead of a buyer searching blind through categories, Cmsmart can build suggestions that surface relevant cliparts or fonts based on the product category or the text the buyer just typed.
  • DAM or ERP-synced libraries. If your approved logo files or brand fonts live in an external asset system, Cmsmart can build a sync so the Cliparts or Fonts screen always reflects the current approved set instead of a manually maintained copy.
  • Production-checked element sets. For gang-sheet or large-format work, Cmsmart builds clipart sets pre-checked for cut-line accuracy and bleed, so nothing in the library can produce an un-printable layer.

Every one of those follows the same delivery path: discovery, solution design, build sprints, QA against your real catalog, launch, and ongoing support — see how that plays out in real builds on Cmsmart's project delivery page. The starting point is Cmsmart's product designer customization service, whether the ask is a locked-down asset library or a different canvas feature entirely.

Get a library customization quote

Why work with Cmsmart on your product designer?

Cmsmart has built and maintained the WooCommerce product designer buyers see on nbdesigner.cmsmart.net since 2012 as a Netbase JSC division, with 6,300+ client projects and 1,800+ live stores running on the platform today — the same team that ships the Cliparts, Fonts and Backgrounds screens covered above.

Cmsmart is a Netbase JSC division running web-to-print and product-customization projects since 2012: 6,300+ client projects, 4,600+ projects delivered, and 1,800+ live stores online today, rated 4.2 on Trustpilot (404 reviews).

"We have had the NB Designer plugin installed for three years and have experienced absolutely no problems during that time. It is wonderful to see their commitment to continuous development, with new features being added frequently to keep the software current and highly capable." — Web Developer, United Kingdom, Trustpilot

Browse the plugin itself on the Cmsmart Product Designer (NBDesigner) product page. It runs on WooCommerce, and sits alongside Cmsmart's wider web-to-print work.

Related chapters: the installation hub, using the plugin from the backend, managing cliparts in depth, the Design Tool tab, and choosing designer colors.

Video walkthrough of managing the WooCommerce online designer's clipart categories in wp-admin
Video: how to manage the online designer's clipart in the backend (Cmsmart on YouTube).

Frequently asked questions

Is the clipart, font and background library part of the core plugin, or is it a custom add-on?

It's core. Every Cmsmart Product Designer install has Cliparts, Fonts and Backgrounds screens under Cmsmart > Media; the optional global clipart library is a site-wide switch, not a separate purchase.

Where exactly do I find Cliparts, Fonts and Backgrounds in the admin menu?

Under Cmsmart > Media, alongside Template. Don't confuse this with Settings > Libraries, which configures JavaScript/CSS libraries for the designer's own code, not your asset files.

Can I turn off Cmsmart's global clipart library and only show our own cliparts?

Yes. There's a site-wide switch to disable the global library, plus a per-product option to include or exclude it and whitelist specific categories — useful for B2B or brand-restricted catalogs.

What font file formats can I upload, and can I use Google Fonts instead?

Custom fonts upload as TTF files (Regular, Italic, Bold, Bold italic). Alongside that, a toggle list of roughly 900 Google Fonts can be enabled or disabled per family, with no file upload needed.

Why would an uploaded clipart or background not show up in the designer?

Most often it's filed under a category a product doesn't show, or the global library is off for that product. On builds before 2.15.1, a file that failed to copy into the library folder could also be saved as a broken record — updating resolves that.

Can Cmsmart build us a brand-locked or AI-curated asset library?

Yes, as custom development on top of the standard screens — a locked-down set for one account, suggestions based on product or text, or a sync from your own DAM, scoped against your real catalog.