Custom T-Shirt Website Software: Install & Setup Guide

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Steps and screenshots are verified against the current plugin release and a live demo store; anything the core plugin does not do today is marked as custom development.

In short

  • Outcome: launch a custom T-shirt website where buyers design their own shirt, see a live price, and pay — while you get a print-ready file instead of a pile of email attachments.
  • How it works: Cmsmart Product Designer (NBDesigner) adds an online design canvas, a price matrix and a print-ready PDF pipeline to a normal WooCommerce product, and a sample T-shirt catalogue gets you started in minutes.
  • What it takes: a WordPress + WooCommerce store, the NBDesigner plugin and license, your T-shirt products and print specs, and about an afternoon for the first working setup.

What does it cost you to run a T-shirt store the manual way?

Without Cmsmart Product Designer (NBDesigner), a WooCommerce T-shirt store usually means static product photos, a contact form for custom requests, and a staff member manually mocking up every design in Photoshop before quoting a price — which is slow, error-prone and caps how many custom orders you can take.

Most T-shirt sellers who outgrow a plain WooCommerce catalogue hit the same five walls:

  • Manual mockups. Someone opens Photoshop for every quote request, since the product page can't show the customer's own design on the shirt.
  • Quoting by hand. Sizes, print placements and quantity breaks all change the price, so staff build one-off quotes instead of the cart doing it.
  • Email ping-pong for proofs. Artwork approval happens over email threads, so nobody has one place to see what was approved and when.
  • Reprints from bad files. Customer art arrives at low resolution or the wrong color mode, and it isn't caught until the shirt is already printed.
  • Cart abandonment. A shopper who can't see their design before paying is a shopper who leaves to "think about it."

Put a rough number on it: if your team spends t minutes per quote, handles n custom orders a month, and a staff hour costs c, manual quoting alone costs roughly n × (t ÷ 60) × c a month — before a single reprint. Add your reprint rate r (per 100 orders) times cost per reprint p, and the status quo has a real, recurring price tag.

Cmsmart insight: in our delivery projects, most reprint costs trace back to one of two things: a customer-uploaded file below the minimum DPI for the print size, or a color mode mismatch (RGB art sent to a CMYK press). Catching both before the order reaches production removes most of the reprint line item.

What could your T-shirt website look like with online design built in?

With Cmsmart Product Designer, a shopper opens a T-shirt product, adds their own text, photo or clipart on a live canvas, watches the price update as they pick size and print options, and checks out — while you receive a print-ready PDF for the press, not a request for a quote.

Example scenario. A shopper lands on your Men's T-shirt product page late one evening. They click Start Design, drop their own photo onto the shirt, add a line of curved text, and watch the total update as they switch from a 1-color front print to front-and-back. They add it to the cart and pay, with the T-shirt in their cart carrying its own design preview. By the next morning your Orders screen shows the order marked In production, the print-ready PDF already rendered, and nothing to re-key by hand.

Custom t-shirt website software: product page with Start Design button on the Cmsmart NBDesigner live demo
A T-shirt product with the design entry point live on the product page.
Cmsmart online T-shirt designer canvas with text and clipart panels
The online designer opens straight from the product page — no software to install for the buyer.

This isn't a niche idea. The custom t-shirt printing market was valued at $5.2 billion in 2024 and is projected to reach $9.8 billion by 2030 (Grand View Research, 2025), and apparel is the single largest category inside the broader print-on-demand market, holding 39.5% of its revenue share in 2025 (Grand View Research, 2025). T-shirts are a reasonable first product to put an online designer in front of.

How does Cmsmart's custom t-shirt website software work?

Cmsmart Product Designer sits on top of WooCommerce: it adds a design canvas to your chosen products, a price matrix for sizes and print options, an order-side approval box, and a print-ready PDF pipeline run by Cmsmart Cloud — so the whole path from "shopper designs a shirt" to "press-ready file" lives in one plugin.

The moving parts, in the order an order actually flows through them:

  • Storefront & catalogue — your WooCommerce T-shirt products, each with the Online Designer turned on. In the plugin.
  • Online designer — the canvas where a buyer adds text, uploads or clipart on your T-shirt template. In the plugin.
  • Printing options & price matrix — sizes, colors and print placements, each with its own price rule. In the plugin.
  • Order & approval — the order screen gains a Customer Design box so staff accept or decline artwork before it ships. In the plugin.
  • Print-ready output — a PDF rendered by Cmsmart Cloud that matches the order, including custom sizes, from Create PDF on the order screen. In the plugin, 2.17.
  • Fulfillment / ERP hand-off — pushing the approved print file into a press queue, MIS or 3PL system without re-uploading it by hand. Custom development.
StepManual T-shirt workflowCmsmart workflow
Seeing the designCustomer emails a file; staff mock it up in PhotoshopBuyer designs on the product page and sees it on the shirt instantly
PricingStaff quote by hand per size / print placementPrice matrix updates the total live as options change
ApprovalBack-and-forth over email threadsApprove / decline in the Customer Design box on the order
Print fileSomeone exports and checks color mode manuallyPrint-ready PDF generated to match the order, with bleed and margins set per product
Cmsmart Printing Options list showing a T-shirt price matrix entry
Printing options define the price matrix — sizes, colors and print placements each carry their own rule.

What's the business value of adding online design to a T-shirt store?

Cmsmart replaces manual quoting and email proofing with a priced, self-serve design flow, which shows up as fewer abandoned custom-order enquiries, less staff time per order, and fewer reprints — each one a KPI you can track from Orders without new tooling.

BenefitHow it shows up in your businessKPI to track
Faster quote-to-orderPrice updates live instead of a staff quoteMinutes from product view to add-to-cart
Fewer reprintsLow-DPI uploads and color-mode issues get caught before the pressReprints per 100 T-shirt orders
Less manual staff timeNo more one-off Photoshop mockups per enquiryStaff minutes per custom order
Higher add-to-cart rateBuyers see their actual design before payingProduct-page to cart conversion on designer-enabled products

Rough ROI worksheet: take your current custom T-shirt orders per month (n), minutes saved per order once quoting is automatic (m), and loaded staff cost per hour (c). Monthly time saved is n × m ÷ 60 × c. Add avoided reprints: reprint rate (r per 100 orders) times cost per reprint (p), times n ÷ 100. Plug in your own numbers — the setup changes how often you hit either cost, not what your shop pays per hour or per reprint.

How do you set up a T-shirt website with online design, step by step?

Setting up Cmsmart Product Designer for a T-shirt store means installing the plugin, activating your license, importing or configuring T-shirt products with their print specs, and building the price matrix — most stores have a working product live the same day.

Here is the full install-to-first-order path, verified against the plugin's current admin screens:

  1. From Plugins, install and activate the Cmsmart Product Designer (NBDesigner) plugin (requires WooCommerce).
  2. Open Cmsmart › License and activate your license key so Cloud rendering, hi-res export and automatic updates are available.
  3. Go to Cmsmart › Import Products and import the sample product package — it includes a T-shirt with print option entry pre-configured with printing options and templates, so you're not starting from a blank product.
  4. In Manager Products, confirm your T-shirt products show Designer: Enabled and Status: Active, or add new ones with Add new.
  5. On each T-shirt product's configuration screen, set the Production specs: material, bleed area, print resolution (DPI) and color profile (CMYK for print, not RGB).
  6. Under Settings › Upload design, set the allowed file types and the minimum upload DPI, so a customer's own art is rejected before it reaches the press rather than after.
  7. Under Printing Options, build (or confirm) the price matrix for your T-shirt sizes, colors and print placements, and apply it to the product.
  8. Open the product on the storefront and click through the designer yourself: add text, add an image, and confirm the price changes with your options.
  9. Click Process to generate "Your artwork," then add the designed shirt to the cart and confirm it carries a design preview through checkout.
  10. Place a real test order (or use a sandbox payment method) and open it from Cmsmart › Orders to see the production timeline and the Customer Design approval box.
  11. From the order's Create PDF tab, generate the print-ready PDF and confirm its paper size, margins and bleed line match what your press expects before you approve the order for production.
Cmsmart Product Designer NBDesigner plugin row active in the WordPress Plugins screen
Step 1: the plugin active in WordPress › Plugins, alongside WooCommerce.
Cmsmart License and activation screen showing a premium license active
Step 2: license and activation — also where you see the plugin, WordPress, PHP and WooCommerce versions for support.
Cmsmart sample data import screen with pre-configured T-shirt and print-on-demand products
Step 3: the sample product package includes a ready-made T-shirt with printing options, which is the quickstart shortcut this guide is named for.
Cmsmart Manager Products list showing Men's T-shirt and T-shirt with print option enabled for the designer
Step 4: Manager Products shows which products have the online designer enabled, including the T-shirt entries.
Cmsmart product configuration screen showing production specs: bleed area, print resolution and color profile
Step 5: production specs — bleed, DPI and color profile — shown here on a Sticker product; the same panel applies to every designer-enabled product, including T-shirts.
Cmsmart Upload design settings showing allowed file types and minimum DPI
Step 6: upload rules decide which customer-supplied files are even accepted.
Your artwork preview and Add to cart button after processing a T-shirt design
Step 9: after Process, the buyer sees "Your artwork" before adding it to the cart.
Print-ready PDF status showing Ready, rendered by the Cmsmart cloud renderer
Step 11: the print-ready PDF status on the order, rendered by Cmsmart Cloud to match the order's exact size.

For the deeper settings behind any of these screens — output options, ICC profiles or automatic export rules — see the general NBDesigner installation guide and the lite-to-premium activation walkthrough.

Video thumbnail: how to install a T-shirt print website with online design and quickstart package
Video: How to install T-shirt Print with online design, quickstart package (Cmsmart on YouTube).

What can Cmsmart build on top of a T-shirt website?

Once the core designer and price matrix are live, Cmsmart builds the parts that are specific to your shop as custom development — from gang-sheet layouts for DTF printers to team-store ordering portals — so the storefront keeps matching how your production floor actually works.

Common next steps we see T-shirt and apparel sellers ask for, going further than the core plugin:

  • DTF gang-sheet builder. For DTF transfer printers, Cmsmart builds a gang-sheet layout tool that nests customer designs onto one sheet to cut material waste. Custom development.
  • Team / bulk ordering portal. A portal where a sports team or company orders one design across many sizes and names in a single checkout. Custom development.
  • ERP / MIS / 3PL hand-off. Pushing the approved print-ready PDF straight into your press queue, MIS or a fulfillment partner's API, instead of re-uploading it by hand. Custom development.
  • AI checks tuned to your press. Beyond the plugin's AI preflight, Cmsmart tunes resolution and bleed checks to your specific press tolerances and materials. Custom development.
  • Reorder & loyalty flows. A "My designs" experience that lets a returning customer reorder a past design in a new size or color in two clicks. Custom development.

Our delivery approach for any of these is the same: discovery call, a short solution design, build in sprints, QA against your real catalogue, launch, then support — see how we scope these on the ecommerce project delivery page or browse the T-shirt & apparel POD development service directly.

Plan my custom T-shirt store

Why work with Cmsmart on your T-shirt website?

Cmsmart has built and supported WooCommerce print-on-demand stores as a Netbase JSC division since 2012, with the T-shirt-specific online designer, price matrix and print-ready pipeline used across thousands of client projects — so you're setting up a workflow that's already been through real production runs.

A few numbers: Cmsmart has delivered 6,300+ client projects and 4,600+ completed projects since 2012, with 1,800+ live stores running today across 80+ countries, and holds a 4.2 rating on Trustpilot from 404 reviews.

From a Trustpilot review of the T-shirt setup itself: “The tshirt website is very user friendly. Very good service thank you very much CMSmart.” — Brahimi Manal.

If you'd rather see finished work than take our word for it, browse merchandise and apparel project examples, or look at the ready-made T-shirt Store package if you'd rather start from a finished theme than a bare plugin. For anything beyond a standard setup, talk to an ecommerce expert before you build.

WooCommerce remains the platform this is built on for a reason: it's detected on 6.64% of all measurable web origins and holds the largest share, 39.0%, among named ecommerce platforms as of May 2026 (GravityKit, 2026) — a large, well-supported base to build a print-on-demand storefront on. For the broader designer feature set beyond T-shirts, see the Cmsmart Product Designer plugin page or the web-to-print solutions hub.

Frequently asked questions

How long does it take to launch a T-shirt website with online design?

Installing the plugin, activating your license and importing the sample T-shirt product typically takes under an hour. Building out your full size and print-option price matrix, testing the buyer flow and confirming your print-ready PDF settings usually brings a first real launch to a day or two, depending on how many T-shirt variants you sell.

Can I import ready-made T-shirt products instead of configuring everything by hand?

Yes. Cmsmart › Import Products includes a sample package with a "T-shirt with print option" product already configured with printing options and templates, which you can use as-is or duplicate and adjust for your own catalogue.

Does the online designer work on a phone?

Yes, the product page and its "Start Design" entry point are shown on mobile as well as desktop; buyers can design and check out from a phone.

What file do I actually get for printing?

A print-ready PDF generated by Cmsmart Cloud that matches the order's exact size, including custom dimensions, margins and bleed; you can also download the design as SVG, high-resolution PNG or a CMYK JPG with an ICC profile from the order's Download design panel.

Can this connect to my existing fulfillment or ERP system?

The core plugin produces the print-ready file and keeps it on the order. Pushing that file automatically into a press queue, MIS or third-party fulfillment API is something Cmsmart builds as custom development, tailored to your specific systems.

Do I need a paid license to go live?

A free/lite tier exists for testing, but hi-res export, the full price matrix and Cloud rendering for the print-ready PDF require an activated license, managed from Cmsmart › License in wp-admin.