Custom Shape Product Design Area Setup for WooCommerce

Applies to Cmsmart Product Designer (NBDesigner) 2.17.x+ (captured on the live demo store running 2.18.0) · Updated October 2026. Screens and steps below are today's live captures, not an old build; the shape and size behaviour they show is documented in the 2.17.0 changelog and unchanged since.

In short

  • A design area with the right shape and size stops buyers placing artwork outside the printable zone, so a die-cut sticker or custom-size card gets a print file matching the shape you actually cut, not a generic rectangle.
  • Shape and size live in two places: the product's Online Designer toggle (canvas on, 1- or 2-sided) and Printing Options, where Area design shape, Custom area design shape, Size and Custom dimension fields bind the canvas to the real product.
  • It takes about fifteen minutes per product once you know three screens: Online Designer, the Printing Options field picker, and Create PDF, which confirms the geometry carried through.
WooCommerce product page with the Start and upload design button that opens a custom shape product design area
Where it starts: the product page button that opens the online designer, bounded by whatever shape and size you configured for this product.

Why does a rectangle-only custom shape product design area cost you orders?

Cmsmart Product Designer binds the editable canvas to the product's real shape and size, which stops a buyer's artwork from printing outside a die line or a custom dimension — removing a manual check most print shops and POD sellers still do by hand.

Without shape and size control, a shop selling anything other than a plain rectangle typically runs into:

  • Manual shape proofing — staff check every die-cut or custom-size order against the cutting template by eye.
  • Reprints on non-standard shapes — a circular sticker centered on a square canvas prints off-center once it's actually cut.
  • Wasted custom-size stock — a buyer's own width and height don't carry through, so the print file reverts to the template default.
  • Support tickets instead of orders — a buyer asking why their sticker got cut through the text is a cost, not a sale.

Estimate your own exposure instead of trusting an industry-wide number: monthly die-cut or custom-size orders × % needing manual review × minutes per review × hourly staff cost. Run that on your last 100 shape or size orders and compare it with the time it takes to configure the fields once. Talk to an ecommerce expert if you'd rather have someone map your whole catalog's shapes in one pass.

What would a precisely shaped, correctly sized design area look like for your buyers?

With Cmsmart Product Designer's shape and size fields configured, a buyer opens the designer and the canvas is already the outline and dimensions of the product they picked — they design inside it by default, and the file they approve is the file that gets cut and printed.

Example scenario. A buyer lands on a die-cut sticker product at 11pm, picks Design here online, and the canvas that opens already matches the sticker's die line — not a generic square they have to guess around. They type their shop name, nudge it to stay inside the printable zone the shape enforces, and check out. A buyer on a custom-size banner product instead sees a Size field, types in their own width and height, and the canvas resizes to match before they place a single line of text. Neither buyer emails a proof request; neither order needs a manual crop the next morning.

NBDesigner online designer canvas with ruler guides showing the design bound to its configured area, 2.17
The online designer canvas with ruler guides — the same bounding mechanism that holds a design inside whatever shape and size the Printing Options fields define for the product.

That boundary follows the design everywhere it travels next: into "Your artwork" on the product page, into the cart, and into the production files your team downloads.

Product page showing 'Your artwork' thumbnail confirming the design stayed inside the configured shape and size
Back on the product page, "Your artwork" shows the saved design exactly as it sits inside the configured area — the same file that follows the order into production.

How does Cmsmart build shape and size into a product's design area?

Cmsmart Product Designer splits shape and size across a product-level switch (Online Designer canvas on/off, 1- or 2-sided) and the Printing Options module, where Area design shape, Custom area design shape, Size and Custom dimension fields attach to the product or category.

Three building blocks make this work, and today's demo store shows all three:

  1. Online Designer toggle. On the product edit screen, the Designer Canvas checkbox turns the editor on for that product, and a Sides preset (1-sided / 2-sided) sets how many faces it has.
  2. Printing Options field picker. A dedicated options editor lists Area design shape and Custom area design shape alongside Size, Custom dimension, Side list, Front/Back Sides, Orientation, Padding and Rounded corners — add one and it changes the canvas's outline or dimensions for every product that option set applies to.
  3. A dedicated option set per non-standard product. The live demo's Printing Options list carries a standalone Area Design Shape option on the Sticker product and a separate Die cut sticker option on the Die cut sticker product — shape fields assigned per product, not forced onto the whole catalog.
NBDesigner admin product edit screen: Online Designer section with Designer Canvas toggle and Sides preset for a Sticker product
Product edit screen (Sticker, #62): the Online Designer section where a store owner enables the canvas and picks a sides preset before the Printing Options fields take over shape and size.
NBDesigner Printing Options list showing a dedicated Area Design Shape option on the Sticker product and a Die cut sticker option
Printing Options list: an Area Design Shape option set applied to Sticker, and a separate Die cut sticker option applied to the Die cut sticker product — shape fields assigned where they're actually needed.
NBDesigner printing option editor field picker showing Area design shape and Custom area design shape fields next to Size and Custom dimension
Inside an option set: the "Online design fields" group carries Area design shape and Custom area design shape next to Size, Custom dimension, Side list, Front/Back Sides, Orientation, Padding and Rounded corners.

Cmsmart insight: shape and size fields live in Printing Options, not the product's Online Designer toggle — in our delivery work, the most common mistake is turning the canvas on and stopping there. The canvas works, but every size looks identical because nobody attached a shape or Size field. Treat Printing Options as a required second step, not an afterthought.

What happens in the plugin today versus what we build on top for shapes and sizes outside the standard fields:

In NBDesigner 2.17 todayCustom development
Design shapeArea design shape and Custom area design shape fields, assignable per product or category via Printing OptionsA shape library auto-generated from a vector cutting file or die-line feed
Design sizeSize and Custom dimension fields let a buyer pick a preset or enter their own width/height, bound to the same canvasVariation-driven shape-and-size combinations pulled from a PLM/MIS product feed
Sides and layoutSide list, Front/Back Sides, Orientation and Padding fields for 1- or 2-sided, portrait or landscape productsN-panel folded or packaging dielines with per-panel bleed
Print geometry matchCreate PDF, the automatic export and the cloud renderer read the same page geometry, including custom sizes (2.17)Automated preflight report on shape/size mismatches, emailed to production staff pre-run

What's the ROI of getting shape and size right?

A correctly configured shape and size turns Cmsmart Product Designer's print-ready PDF into the same file for the mockup, Create PDF and the automatic export — so the value shows up as fewer manual shape checks and reprints, not a vague better experience.

BenefitHow it shows up in your businessKPI to track
Fewer off-shape filesStaff stop manually checking die-cut and custom-size orders against the template% of shape/size orders needing manual correction
Fewer reprints on non-standard productsThe canvas outline matches the die line or custom dimension the buyer actually orderedReprint rate on die-cut or custom-size SKUs
Faster order-to-print timeCreate PDF and the automatic export read the same geometry (2.17), so there's no "which file is correct" stepHours from order placed to print-ready file
More non-standard SKUs worth listingShape and size fields make it practical to sell circles, ovals and custom dimensions without a one-off build per productNumber of non-rectangular SKUs live in the catalog

Quick ROI check: (die-cut or custom-size orders per month) × (minutes saved per order) × (staff hourly cost ÷ 60) = monthly hours saved. Add (current reprint rate − expected reprint rate) × orders per month × cost per reprint for the reprint side. Plug in your own numbers — a small sticker shop and a high-volume label printer get very different answers from the same formula.

How do you set up a custom shape and size design area?

To configure a custom shape and size, install and activate Cmsmart Product Designer, enable the canvas on the product, then add the matching fields in Printing Options — the steps below follow exactly what today's admin shows.

These are the steps as they appear on the live demo store. To enable the designer across every product first, see the related tutorial on configuring online design for each product.

  1. Open the product. WordPress admin → Products → the product you want a custom shape or size for (the capture above uses a sample Sticker product).
  2. Find the Online Designer section. Scroll past Production specs (material, bleed, resolution, color profile) to "Online Designer."
  3. Enable the Designer Canvas checkbox — the master switch. Leave it off and the product sells without customization.
  4. Pick a Sides preset: 1-sided for a sticker or flat card; 2-sided for anything printed front and back.
  5. Open Printing Options. Create a new option set, or edit one already applied to this product's category.
  6. Add the Area design shape field, or Custom area design shape for a non-rectangular zone that isn't one of the presets.
  7. Add Size and Custom dimension if buyers choose their own measurements; add Side list, Front/Back Sides, Orientation and Padding for anything beyond one flat side.
  8. Apply the option set to the product or its category under "Apply for," then publish.
  9. Preview the product page and open the designer to confirm the canvas matches the shape and size you configured.
  10. Check the print file. On a test order, open Create PDF and confirm the size and outline match — the same geometry the automatic export uses on 2.17. See exporting a design online as PDF for the buyer side of that file.

On the buyer side, those settings carry straight through to mobile, where the same shape-bound canvas opens above Add to cart.

Mobile product page at 390px with the Start and upload design button above Add to cart
The same shape and size configuration carries through to a 390px mobile product page.

For deeper print settings — upload file types, minimum DPI, PDF/ICC export — see the plugin's product page, and for how the price matrix reacts to size and option choices, see Cmsmart's Pricing Options module.

Going further: custom shapes and sizes beyond the standard fields

Beyond Area design shape and Custom area design shape, Cmsmart builds shape and size logic the standard fields don't cover — automated die-line sourcing, variation-driven dimensions, and shape-aware preflight — as custom development on top of NBDesigner.

Extensions we most often build for print shops, label printers and POD brands that outgrow the presets:

  • Die-line-sourced shapes. Sign, label and packaging shops need an editable zone that matches a physical cutting plotter file exactly. We build shape data generated from your vector cutting file instead of a manually traced preset.
  • Variation-driven shape and size. The same product (a sticker sheet, say) needs a different shape or size per variation. We build configuration that switches the shape and dimension fields with the WooCommerce variation chosen.
  • Shape-aware AI preflight. A correct canvas outline still won't catch text that sits too close to a die line. We build automated checks tuned to the product's actual shape, not a generic rectangular safe zone.
  • ERP/MIS-fed shape libraries. A B2B portal with hundreds of SKUs can't hand-configure every shape. We build an integration that generates shape and size settings from your product feed.
  • 3D or AR shape preview. Apparel, packaging and signage buyers convert better seeing an irregular shape on a realistic mockup. We build a 3D or AR layer on top of the existing 2D fields.

Delivery is the same whether it's one custom die line or a full product-feed integration: discovery call → solution design → sprints → QA against your real products → launch → support. See examples at Cmsmart's ecommerce project gallery.

Get a custom shape and size quote

Why work with Cmsmart on your product designer's shape and size setup?

Cmsmart has been building WooCommerce web-to-print and product customization solutions since 2012 as a Netbase JSC division, with thousands of client projects and a published Trustpilot track record — not a plugin support desk guessing at your die lines.

Cmsmart (a Netbase JSC division, since 2012) has delivered 6,300+ client projects and 4,600+ completed deliveries, with 1,800+ stores live across 80+ countries, including 500+ custom development engagements. Trustpilot rates Cmsmart 4.2 out of 5 from 404 reviews.

One review, from a developer who has run NBDesigner for three years, speaks directly to this kind of per-product configuration work:

"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, Sep 2026

Shape and size matter more every year: print-on-demand is projected to grow from $12.15B in 2025 to $15.19B in 2026, a 25.05% CAGR through 2031 (Mordor Intelligence, 2026), and WooCommerce now powers 33.4% of tracked ecommerce stores — 4.53 million active stores (StoreLeads via Red Stag Fulfillment, Aug 2025). More stores competing on non-standard products means a shape that doesn't match the die line costs orders, not just support time.

How to Create Area Design Shape For Online Design - NBDesigner video thumbnail
Video: How to Create Area Design Shape For Online Design (Cmsmart on YouTube)

See related work in Cmsmart's web-to-print solutions hub.

Frequently asked questions

What's the difference between Area design shape and Custom area design shape?

Area design shape gives a product a defined outline; Custom area design shape is the companion field for a non-rectangular zone outside the standard presets. Both are assigned per product or category in Printing Options.

Can the same product offer more than one shape or size?

Yes. Add Size and Custom dimension fields and the buyer picks a preset or enters their own measurements; the canvas rebinds to whichever one they choose.

Does changing the shape or size affect the print file, or just the on-screen editor?

Both. Since 2.17.0, the automatic export, Create PDF and the cloud renderer all read the same page geometry, including custom sizes, so the configured shape is what ends up in the print-ready PDF.

What if my product needs a die-cut shape that isn't a standard preset?

Custom area design shape covers a non-rectangular zone you define by hand. A shape generated automatically from your own cutting-plotter file is outside the standard fields — Cmsmart builds that as custom development (see "Going further" above).

How long does it take to configure shape and size for an existing catalog?

About fifteen minutes per product once you know the three screens involved. For hundreds of SKUs, most stores ask Cmsmart to build a feed-driven setup instead.

Can Cmsmart configure this for me instead of my team doing it?

Yes — it's exactly what Cmsmart's product designer customization service covers, from one product's shape to a full catalog rollout.