Applies to Cmsmart Product Designer (NBDesigner) 2.18.4 and Cmsmart Mug Store 2.0.0 · Updated October 2026. Screenshots are from a real Store Setup install of the Mug Store on Cmsmart Stores (parent theme 2.0.0, Cmsmart Stores Blocks 2.1.3).

In short

  • Outcome: a WordPress and WooCommerce store for personalized mugs, tumblers and travel cups, live with real pages, a product catalogue and a working online designer in about an hour.
  • How it works: Store Setup installs the Cmsmart Mug Store theme, a sample catalogue and Cmsmart Product Designer together, each product already wired to its own printing options.
  • What it takes: a Cmsmart Fullstore plan or a 30-day trial key, a WordPress host with WooCommerce, and one working session to brand it, connect payments and shipping, and place a test order.

This personalized mug WooCommerce store setup turns a Cmsmart Mug Store install into a sellable shop: a ready-made storefront for shops that print personalized mugs, tumblers and travel cups to order. Store Setup installs the theme, a sample catalogue and Cmsmart Product Designer together, so you rebrand it, connect payments and shipping, and take a real test order in one working session.

Personalized mug WooCommerce store setup: product page on the Cmsmart Mug Store theme with sides, gift packaging and message card options
The Cmsmart Mug Store product page: printing choices sit right under the price, before checkout.

What does selling personalized mugs from a generic WooCommerce theme actually cost you?

A generic WooCommerce theme has no printing options, no design editor and no sample catalogue, so a mugs shop loses hours to manual mockups, back-and-forth proof emails and hand-built price lists before the first order ships. Cmsmart Mug Store replaces that setup work with a theme, catalogue and product designer built for one job.

Most personalized-mug sellers start the same way: a generic WooCommerce theme, a handful of product photos, and a plan to "figure out the design part later." In practice that shows up as:

  • Every order needs a manual mockup or a back-and-forth email thread before it can go to print.
  • Quantity pricing (6, 12 or 36 mugs) lives in someone's head or a spreadsheet, not on the product page.
  • There is no record of what the customer actually approved, so a misprint is a reprint at your cost.
  • Launch slips by weeks while someone builds pages, a logo header and a shop catalogue from a blank theme.

Cmsmart insight: the real cost of a reprint is rarely the mug itself — it is the staff time spent reopening a "finished" order, re-exporting a file and re-queuing it at the press. Cmsmart Product Designer's approved-artwork lock refuses to let anyone save over a design once its order item is approved, so the file that reaches the press is the one the customer actually signed off on.

Put a number on it with your own figures: (minutes per mockup + minutes per proof email) × orders per week × your hourly rate is the weekly cost of personalizing by hand. Add reprint rate × cost per reprint for jobs that reach the press before the customer signs off. Personalization is a revenue lever too: more than half of shoppers surveyed in 2026 say they are more likely to buy from a brand that personalizes, spending an average of 30% more with those brands (Deloitte Digital, 2026).

What does a personalized mug store look like once it is live?

A live Cmsmart Mug Store looks like a normal WooCommerce shop with one difference: every designable product has a "Start Design" step before checkout, so the customer previews their own name, photo or text on the mug before they pay, and the order arrives with a print-ready file attached.

Example scenario: a shopper opens the mug store on their phone during a lunch break, picks an 11 oz ceramic mug, uploads a team photo in the online designer, previews the wrap-around print, and pays in the same session. The order lands in Cmsmart Orders already flagged with an approved design; the print-ready PDF is attached when the shop owner opens it after lunch.

Cmsmart Product Designer open on a personalized mug product, with Templates, Text, Cliparts, Photos, Elements and Layers tools
The online designer opens straight from the mug's product page, with a template picker and a toolbar for text, cliparts, photos and layers.

You can see the same flow today on Cmsmart's live Mug Store demo. Cmsmart also publishes short demo videos of the online designer on its own products:

Cmsmart demo video of a custom mug design flow
Video: a Cmsmart demo of a custom mug design flow (Cmsmart on YouTube).

How does Cmsmart build a personalized mug store around WooCommerce?

Cmsmart Mug Store pairs a WooCommerce child theme with Cmsmart Product Designer (formerly NBDesigner) and a sample catalogue, so the storefront, the design tool and the product pricing arrive already connected instead of three separate purchases a merchant has to wire together.

Four pieces do the work, and today's version already ships them in the plugin and theme:

  • Storefront theme: Cmsmart Mug Store on the Cmsmart Stores parent theme, built with the WordPress Site Editor (block theme), with header, footer and page templates ready to rebrand.
  • Product Designer tab: every designable product gets a "Setting Cmsmart" box (Design Editor Setting, Printing Option, Product Builder, Request Quote, Design Guideline) in its product edit screen.
  • Printing options and pricing: sides to print, gift packaging and message-card choices are set once per product and shown to the shopper before checkout.
  • Print-ready output and AI tools: Cmsmart Product Designer turns an approved design into a print-ready file, and the plan's AI tokens power background removal, image upscale and print-file preflight from inside the designer.

Gang-run batching, an ERP/fulfillment sync and a 3D or 360° preview are not part of the starter theme or plugin — see "Going further" below for how Cmsmart builds those as custom work.

What is the business value, and which KPIs should you track?

A personalized mug store turns setup time, manual mockup work and reprints into measurable numbers you can track from week one: time to first live product, staff minutes per order, reprint rate and average order value on multi-mug orders.

BenefitHow it shows up in your businessKPI to track
Faster launchTheme, pages and a catalogue arrive installed; you brand and connect payments instead of building from zeroDays from key activation to first live product page
Less manual mockup workThe designer renders the preview and the print file instead of a staff member in image-editing softwareStaff minutes per order spent on mockups or proof emails
Fewer misprintsArtwork is approved and locked before it reaches productionReprint rate (reprints ÷ orders shipped)
Clear bulk pricingQuantity and option pricing is set once in Printing Option, not negotiated per orderAverage order value on multi-mug orders

ROI worksheet (use your own numbers): (hours saved per order on mockups and proofing) × (orders per month) × (your hourly rate) = monthly time saved. Add (current reprint rate − expected reprint rate) × (orders per month) × (cost per reprint) for the production-cost side of the case.

A Cmsmart Fullstore plan activates the Mug Store and every other Cmsmart Store; see the current plan and price on the pricing page, and the hosting and support included on the product page. Against a generic WooCommerce theme, the gap is mostly what you don't have to build yourself:

Cmsmart Mug StoreGeneric WooCommerce theme
Personalization / design toolCmsmart Product Designer pre-installed and wired to each productNot included — install and configure a separate plugin
Printing options and bulk pricingPer-product printing options (sides, packaging, message card) with their own settings tabBuild your own price rules or add a pricing plugin
Sample pages, menus and catalogueImported on setup (25 pages and an 18-product catalogue in our install)Blank site — pages, menus and products built from scratch
BrandingHeader, footer and colors editable in the WordPress Site Editor out of the boxDepends on the theme; often needs a child theme or custom CSS
Hosting and support (annual plans)Three months of free hosting (20GB VPS, weekly backups) and ticket supportYour own hosting and support arrangement

How do you complete a personalized mug WooCommerce store setup in one hour?

Setting up the Cmsmart Mug Store takes one install step and then about an hour of configuration: rebrand the header and footer, check the sample catalogue and printing options on one product, connect payments and shipping, set your store address, and place a test order before you go live.

Install first. Pick Cmsmart Mug Store in the dashboard's Store Catalogue, choose the installer-file or manual-theme-files method, and run it on your host — the install walkthrough covers that part. This post picks up once the store is live with its sample data.

Once it's live, work through branding and content first:

  1. Open Appearance › Themes and confirm Cmsmart Mug Store is the active theme, with its Cmsmart Stores parent theme installed alongside it.
  2. Open the Site Editor and edit the Header template part: replace the Site Logo block and check the main menu (Home, Shop, Online Design, Blog, Pages).
  3. Edit the Footer template part: update the Shop, Help and Company link columns, the address and contact details, and the social links.
  4. In Settings › General, set your real Site Title, tagline and site icon.
WordPress Site Editor open on the Cmsmart Mug Store header template part, showing the Site Logo and main menu blocks
The header template part in the Site Editor: swap the Site Logo block and review the main menu, no code required.

Next, check the sample catalogue and the design settings on one product:

  1. Open Products › All Products and look at the imported catalogue (18 sample products in our install, across categories like Everyday Mugs, Magic & Enamel Mugs and Tumblers & Travel Mugs).
  2. Edit a product and confirm its description, price and image are what you want to keep or replace.
  3. In the product's NBD options box, open Printing Option and Design Editor Setting to see the printing choices (sides to print, gift packaging, message card) and the design-area template for that product.
  4. Repeat for a handful of products, or follow the full product designer user guide for a deeper walkthrough of design editor settings.
WooCommerce products list showing the sample personalized mug and tumbler catalogue with Cmsmart design enabled
The imported sample catalogue: 18 products across mugs, tumblers and accessories, each already flagged for Cmsmart's online designer.
Cmsmart Product Designer printing option settings on a mug product edit screen in WooCommerce
A product's NBD options box: Printing Option, Product Builder, Design Guideline and the design editor settings all live here.

Then connect the business side so you can actually take orders:

  1. In WooCommerce › Settings › General, set your real store address, selling and shipping locations, and currency.
  2. In WooCommerce › Settings › Payments, install a payment provider (Woo Payments or PayPal Payments, or your own gateway) so the store can take real cards.
  3. In WooCommerce › Settings › Shipping, edit or add a shipping zone and its rates for where you actually ship.
WooCommerce payments settings screen with Woo Payments and PayPal Payments options for the mug store
WooCommerce Payments: install a provider before you remove the sample data, or checkout has nowhere to send a real card.
WooCommerce shipping zones screen showing a United States zone with standard shipping and free shipping over $75
Shipping zones: the sample data ships with one example zone and free-shipping threshold — edit it for your real rates.

Finish with a real test order and a go-live pass:

  1. Open the storefront, add a designable product to the cart, upload or design artwork, and check the line item (sides, packaging, message card) in the cart and at checkout.
  2. Confirm the product and designer also work on a phone screen — the sample product page carries a sticky "Start and upload design" action on mobile.
  3. Open Cmsmart › Overview to see the order, revenue and production queue for the account that placed the test order.
WooCommerce cart showing a personalized mug line item with sides to print, gift packaging and shipping cost
A test order in the cart: the printing choices made in the designer carry through to the line item and the total.
Personalized mug product page on mobile with a sticky Start and Upload Design button, part of the WooCommerce store setup
The same product on a 390px phone screen, with the design action pinned to the bottom of the viewport.

Go-live checklist

  • Header, footer, logo and site title show your brand, not the sample data.
  • Payments and shipping are configured and a test order completes end to end.
  • Store address, currency and selling/shipping locations match where you actually do business.
  • You have reviewed printing options on every product you plan to sell at launch.
  • Sample data is removed from Cmsmart › Store Setup once your own products are in place.

Niche tips for personalized mug and tumbler sellers

A few things worth deciding before launch: group products the way gift shoppers search (the sample catalogue uses Everyday Mugs, Love Mugs, Magic & Enamel Mugs, Tumblers & Travel Mugs and Accessories, not just "mugs"); set your side-printing default (front-only vs. front-and-back) per product in Printing Option, since it isn't storewide; and pick a gift-packaging default that matches your margin before shoppers see it as a checkbox.

What can Cmsmart build on top of the Mug Store for you?

Past the starter theme, Cmsmart builds the production and sales workflow a growing mug business actually needs: bulk and B2B ordering, gang-run print automation, ERP or fulfillment integrations, and richer product previews that the Mug Store theme does not include today.

  • Bulk and B2B ordering. Company accounts, quotes and net-terms invoicing for corporate buyers ordering mugs by the case.
  • Gang-run and batch print automation. Grouping many single-mug orders into one print-ready batch file per press run.
  • ERP, MIS or fulfillment integration. Pushing approved orders and print-ready files into your production system or a fulfillment partner.
  • 3D or 360° product preview. A spinnable mockup of the finished mug, beyond the flat preview the starter theme ships today.
  • Reorder and loyalty flows. One-click reorders and a mug-club subscription for repeat buyers.

Cmsmart delivers this like any Cmsmart ecommerce project: discovery, solution design, build sprints, QA, launch, then support. Prefer to have Cmsmart install and configure the preset for you instead? That's a packaged service too: store preset installation and demo import.

Plan my mug store build

Why work with Cmsmart on a personalized mug store?

Cmsmart has built ecommerce and web-to-print projects since 2012 as a Netbase JSC division, with thousands of client projects delivered and a published Trustpilot rating — the same team and product designer behind the Mug Store theme supports the custom work in "Going further" above.

Cmsmart has delivered 6,300+ client projects since 2012, with 1,800+ stores live across 80+ countries, and holds a 4.2 rating from 404 Trustpilot reviews:

"NBDesigner is a fantastic tool – very intuitive and easy to use. It makes the customization process smooth and efficient. The support team is also incredibly helpful, responsive, and professional." — Khanh Nguyễn Đức, Trustpilot

Frequently asked questions

Can I use my own products instead of the sample catalogue?

Yes. Add or edit products under Products › All Products, then open each product's NBD options box to enable design and set its Printing Option. Remove the sample catalogue later from Cmsmart › Store Setup once your own products are in place.

Which plan activates the Mug Store?

A Cmsmart Fullstore plan or a free 30-day trial key activates every Cmsmart Store, including the Mug Store. See the current plans and prices on the pricing page.

Can I change the colors and logo without touching code?

Yes. The header and footer are template parts in the WordPress Site Editor, so you replace the logo, edit the menu and update colors there. The customization guide walks through branding in more detail.

Does the designer handle bulk pricing for multi-mug orders?

Per-product printing options and gift-packaging choices are set once in each product's Printing Option, and they carry through to the cart and checkout line item. More advanced price-break rules across many products are something Cmsmart can build as custom development.

Do I need a separate print-on-demand company to fulfill orders?

No, not to run the store — Cmsmart Product Designer outputs a print-ready file you or your own press can use. Connecting that file automatically to an outside fulfillment partner or ERP is custom development Cmsmart builds on request.