Shapes QR Codes and Drawing Tools in Your Product Designer

Applies to Cmsmart Product Designer (NBDesigner) 2.18.0 · Updated October 2026. Screens below are live captures from the Cmsmart demo store; every feature claim is checked against the 2.17.0 release notes and today's build.

In short

  • Outcome: buyers add their own shapes, icons, QR codes and free-hand drawings right inside your WooCommerce product designer, so fewer orders stall on "I don't have artwork."
  • How it works: the Elements panel sits next to Text and Cliparts in the same online designer your buyers already use, and every shape, QR code or drawn line becomes part of the print-ready file Cmsmart generates for the order.
  • What it takes: the Elements panel ships in Cmsmart Product Designer today; brand-locked shape libraries, dynamic QR destinations and signature capture for legal paperwork are custom development Cmsmart builds for your store.

What does it cost your shop when a buyer has no artwork to upload?

Cmsmart Product Designer removes the "no artwork" dead end by giving buyers shapes, icons, a QR code generator and a free-hand pen on the same screen where they already pick colors and fonts, so a design finishes in one session instead of a support ticket.

Every print shop and personalization store has felt this pain:

  • Abandoned carts. A buyer who can't picture their own logo or a quick sketch on the product closes the tab instead of clicking Add to cart.
  • Staff time redrawing napkin sketches. Someone on your team recreates a customer's rough idea in Illustrator because the storefront had no drawing tool.
  • Email round-trips for a simple mark. A monogram, a seal or a QR code to a venue page becomes three emails and a day of delay instead of a few clicks.
  • Reprints from mismatched artwork. A shape or line pasted in as a flat image prints blurry or off-center because it was never part of the actual print file.

Work out your own cost of the status quo: (abandoned sessions per week) × (average order value) + (staff minutes spent on manual artwork) × (your hourly rate). Even a handful of stalled orders a week adds up faster than a design tool costs to run.

WooCommerce product page with Start and upload design button for shapes QR codes and drawing tools
The buyer's entry point: a normal WooCommerce product page with a "Start and upload design" button.

Cmsmart insight: in our delivery work, the stores that lose the fewest custom orders are the ones that let buyers finish artwork in the same tab as checkout. Every extra app, upload portal or "email us your logo" step is a place a buyer quietly leaves.

What do shapes QR codes and drawing tools look like inside Cmsmart's product designer?

Cmsmart's Elements panel sits in the designer's left-hand toolbar next to Templates, Text, Cliparts and Photos, and it gives buyers shapes, an icon library, a QR code generator and a free-hand brush on the same canvas they already use for their design.

Example scenario: a buyer opens a wedding invitation product at 10 p.m., picks a template, adds a QR code linking to the couple's RSVP page, drops in a small heart shape, and signs the corner with the free-hand pen. They check out five minutes later, and the design that reaches your order queue already carries the QR code and the signature as real design layers, not a screenshot.

Online designer left-hand toolbar with Templates, Text, Cliparts, Photos, Elements and Layers tabs
The same left-hand toolbar holds the Elements tab, shown here with Templates open on a wedding invitation.

How does Cmsmart's online designer turn Elements into print-ready artwork?

Cmsmart connects the storefront, the online designer and the production side into one path: a buyer's shapes, QR code and drawing are saved as design layers, carried through the cart and order, and turned into a print-ready PDF that matches the order automatically.

The building blocks behind that one path:

  • Storefront entry. The product page offers "Design here online" or "Upload a full design" so buyers choose their own route.
  • Online designer. Templates, Text, Cliparts, Photos, Elements and Layers all live in one workspace, so a QR code sits on the same canvas as the buyer's text and photos.
  • Cart and checkout. The saved design, including every shape and drawn line, rides along as a line item through cart and checkout, with an Edit design link if the buyer wants to change anything.
  • Approval and production. Your team reviews the finished artwork in the order screen, and an approved design is locked from further edits.
  • Print-ready output. Cmsmart's cloud renderer produces the print-ready PDF that matches the order, including the buyer's custom shapes and QR code, not just the product mockup.
Product page showing Your artwork preview after a buyer finishes a design with shapes and drawing tools
Back on the product page, the finished design — shapes, QR code and all — shows as "Your artwork" next to Add to cart.
WooCommerce cart line item carrying the custom design with Edit design and Upload design links
The cart line item carries the design preview, with Edit design and Upload design still available.
Doing it without a design tool vs. Cmsmart's Elements panel
StepWithout a design toolWith Cmsmart's Elements panel
Buyer wants a QR code or shapeEmails the shop, waits for a replyAdds it from the Elements tab in seconds
Buyer wants to sign or draw somethingSends a photo of a paper signatureDraws it with the free-hand brush, as a real layer
Getting a print fileStaff rebuilds the artwork by handCmsmart renders a print-ready PDF that matches the order
Catching a sizing mistakeFound at the press, after printingChecked against DPI and bleed settings before approval
Video thumbnail for Cmsmart modern WooCommerce product customization demo
Video: Modern WooCommerce Product Customization & Web-to-Print UI (Cmsmart on YouTube).

What's the business value of letting buyers add their own shapes and QR codes?

Cmsmart turns self-serve shapes, QR codes and drawing into measurable business value: fewer stalled carts, less staff time spent recreating artwork, and fewer reprints because the approved design is locked before it reaches production.

BenefitHow it shows up in your businessKPI to track
Fewer abandoned designsBuyers finish artwork without leaving the product pageCart-to-order rate on design-enabled products
Less manual artwork workStaff stop redrawing logos, signatures and QR links by handStaff hours per week on design support
Fewer reprintsApproved artwork is locked before it reaches the pressReprint rate on custom orders
Faster quote-to-proofA QR code or shape is added and approved in one sittingTime from order to approved proof

Rough ROI worksheet: (orders per month with custom artwork) × (minutes your team currently spends redrawing or emailing about artwork) × (your fully-loaded hourly rate) = monthly cost of the manual path. Compare that to a one-time investment in setting up the Elements panel and a QR workflow for your products.

Buyers increasingly expect this kind of self-serve detail: GS1 US's 2024 Consumer Pulse Survey found 79% of consumers say they are more likely to buy a product with a scannable QR code that gives them more information, which is exactly what a buyer-generated QR code on a printed product can offer. The broader market backs the trend too: the print-on-demand market was valued at $10.8 billion in 2025 and is forecast to grow at a 23.6% CAGR through 2033, and the U.S. personalized gifting market alone was worth $9.69 billion in 2024, rising toward $14.56 billion by 2030.

How do you set up and use the Elements panel for shapes, QR codes and drawing?

You set up Cmsmart's Elements panel by enabling it on your design-ready products and checking your upload and output settings, so shapes, QR codes and free-hand drawing print at full quality alongside everything else in the order.

  1. In wp-admin, go to Cmsmart → Products and open the product you want buyers to design.
  2. Turn on the online designer for that product and confirm a design area (canvas) is defined for each print side.
  3. Open Cmsmart → Settings → Upload design and set allowed file types, maximum upload size and minimum DPI, so any image a buyer drags in prints as sharp as a shape they draw natively.
  4. Check Cmsmart → Settings → Output for bleed, CMYK/ICC handling and your print-ready PDF settings, since these apply to every element a buyer adds, not just templates.
  5. On the storefront, open the product and choose Design here online to confirm Templates, Text, Cliparts, Photos, Elements and Layers all load in the designer toolbar.
  6. Open a test design, use the Elements tab to add a shape, generate a QR code and try the free-hand pen, then click Process to save it against a test order.
  7. In Cmsmart → Orders, open that order and use the Customer Design box to review and approve the artwork before it goes to production.
  8. From the order's design detail screen, click Create PDF (or let automatic export run) to confirm the print-ready PDF carries the shape, QR code and drawing exactly as the buyer placed them.
Cmsmart upload design settings with allowed file types and minimum DPI for shapes and QR codes
Settings > Upload design: file types, size limits and the minimum DPI that also protects elements buyers draw or add as shapes.
Order detail Create PDF tab showing the print-ready PDF status for a design with custom elements
Create PDF on the order screen renders the print-ready PDF that matches the order, including any shape, QR code or drawing the buyer added.

How far can Cmsmart take this with custom development?

Cmsmart builds the parts of a shapes-and-QR workflow that go beyond the standard Elements panel: dynamic QR destinations, brand-locked shape libraries and signature capture for legal paperwork, delivered as custom development for your store.

  • Dynamic QR destinations. A QR code that always points to the latest tracking page or a reorder link, instead of a fixed URL baked in at design time — Cmsmart builds this as a connector between the designer and your order system.
  • Brand-locked shape and icon libraries. For B2B or franchise stores that need every logo and shape to stay on-brand, Cmsmart builds a curated, permission-gated Elements library for your account managers and customers.
  • Signature capture for legal or warranty paperwork. Beyond a decorative free-hand drawing, Cmsmart builds a signature step tied to order terms, timestamped and stored with the order record.
  • Vector tracing of hand-drawn art. Turning a buyer's rough free-hand sketch into a clean vector shape before it reaches production is custom development Cmsmart can add to the designer pipeline.

Plan my shapes and QR code workflow

See the full product designer customization service or browse the web-to-print solutions hub for related builds.

Customer Design approval box showing an accepted design before it reaches production
The Customer Design box: a shape, QR code or drawing is reviewed here, then locked once approved.

Why work with Cmsmart on your product designer?

Cmsmart has built and supported WooCommerce product designer stores since 2012, so the team that adds your QR, shape and drawing workflow already knows how it has to behave at checkout, in the cart and on the print floor.

Cmsmart is a Netbase JSC division running web-to-print and product customization projects since 2012, with 6,300+ client projects and a 4.2-out-of-5 Trustpilot rating from 404 reviews. Every custom-development engagement follows the same project delivery process: discovery, scoping, design, build, QA and launch, tracked on a shared dashboard so you always know where your QR or shape build stands.

Related reading: how to make your designs come alive with cliparts and how to work with layers in the product designer cover the other panels that sit alongside Elements. You can also see the designer itself on the Online Designer product page.

Frequently asked questions about shapes, QR codes and drawing in Cmsmart's product designer

Do I need a separate plugin for QR codes?

No. The QR code generator is part of the Elements panel inside Cmsmart Product Designer, on the same canvas as text, cliparts and photos.

Can buyers draw a real signature, not just type their name?

Yes, the free-hand drawing tool lets a buyer choose a brush width and color and draw directly on the design, which is how the original signature feature in this tutorial has worked for years.

Will a shape or QR code print as sharp as the rest of the design?

It's handled the same way as every other layer: the print-ready PDF Cmsmart renders for the order includes shapes, QR codes and drawn lines at the product's configured size and resolution, checked against your Output and Upload design settings.

Can we make the QR code point to a different page after the order ships?

Not out of the box — a QR code is fixed to whatever link the buyer enters at design time. A QR code that updates automatically (for example, always pointing at the live tracking page) is custom development Cmsmart builds for your store.

How long does it take to add a custom QR or shape workflow?

It depends on scope. A connector that generates dynamic QR destinations or a brand-locked shape library is scoped during discovery on your quote request, then delivered through Cmsmart's standard discovery-to-launch process.

Does this work on mobile?

Yes, the same online designer, including the Elements panel, loads on the mobile product page buyers use to start a design from their phone.