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.
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.
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:
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.
Benefit
How it shows up in your business
KPI to track
Faster launch
Theme, pages and a catalogue arrive installed; you brand and connect payments instead of building from zero
Days from key activation to first live product page
Less manual mockup work
The designer renders the preview and the print file instead of a staff member in image-editing software
Staff minutes per order spent on mockups or proof emails
Fewer misprints
Artwork is approved and locked before it reaches production
Reprint rate (reprints ÷ orders shipped)
Clear bulk pricing
Quantity and option pricing is set once in Printing Option, not negotiated per order
Average 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 Store
Generic WooCommerce theme
Personalization / design tool
Cmsmart Product Designer pre-installed and wired to each product
Not included — install and configure a separate plugin
Printing options and bulk pricing
Per-product printing options (sides, packaging, message card) with their own settings tab
Build your own price rules or add a pricing plugin
Sample pages, menus and catalogue
Imported on setup (25 pages and an 18-product catalogue in our install)
Blank site — pages, menus and products built from scratch
Branding
Header, footer and colors editable in the WordPress Site Editor out of the box
Depends 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 support
Your 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:
Open Appearance › Themes and confirm Cmsmart Mug Store is the active theme, with its Cmsmart Stores parent theme installed alongside it.
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).
Edit the Footer template part: update the Shop, Help and Company link columns, the address and contact details, and the social links.
In Settings › General, set your real Site Title, tagline and site icon.
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:
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).
Edit a product and confirm its description, price and image are what you want to keep or replace.
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.
Repeat for a handful of products, or follow the full product designer user guide for a deeper walkthrough of design editor settings.
The imported sample catalogue: 18 products across mugs, tumblers and accessories, each already flagged for Cmsmart's online designer.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:
In WooCommerce › Settings › General, set your real store address, selling and shipping locations, and currency.
In WooCommerce › Settings › Payments, install a payment provider (Woo Payments or PayPal Payments, or your own gateway) so the store can take real cards.
In WooCommerce › Settings › Shipping, edit or add a shipping zone and its rates for where you actually ship.
WooCommerce Payments: install a provider before you remove the sample data, or checkout has nowhere to send a real card.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:
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.
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.
Open Cmsmart › Overview to see the order, revenue and production queue for the account that placed the test order.
A test order in the cart: the printing choices made in the designer carry through to the line item and the total.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.
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.
"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.
In short
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.
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:
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.
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:
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:
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.
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:
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:
Next, check the sample catalogue and the design settings on one product:
Then connect the business side so you can actually take orders:
Finish with a real test order and a go-live pass:
Go-live checklist
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.
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:
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.