WearLab Design Mockup — all major and minor updates.
Stock due dates
- Out-of-stock sizes show a due date on the next line when Cloke provides one (e.g. Due 17/08/26)
Clearance banner
- Clearance styles show a red “THIS ITEM IS ON CLEARANCE” banner beside the selected colour
- Clearance list synced from Cloke’s clearance feed (cached hourly)
Out-of-stock sizes
- Quantity inputs are disabled for sizes that are out of stock
Size column highlight
- Selecting a quantity greater than 0 shades that size column yellow; clears when set back to 0
Sizes table
- Removed the total column from the sizes table (order total still updates in the background for pricing)
Sizes table fits width
- Size table scales to the form width — no horizontal scrolling
- Compact columns with wrapped labels and two-line stock counts
Sizes table layout
- Sizes and quantities shown in a rounded table — size names on the first row, amounts on the second
- Stock levels sit in a third row; total remains in the last column
Sizes row layout
- Size quantities and total sit on one bar — total aligned at the end with a divider
- Narrower centred quantity inputs; sizes scroll horizontally when needed
Sizes on one row
- All size quantity fields stay on a single horizontal row (scrolls sideways on narrow screens)
Stock label wording
- Stock line now reads like “8,922 in stock” instead of “In Stock: 8922”
Readable size labels
- Size fields show full names (Small, Medium, X Large, etc.) centred above each quantity input
- In Stock line centred below each input
Stock under size fields
- Cloke stock shown below each size quantity as “In Stock: X” (red when 0)
- Size list matches Cloke’s sizes so every row shows stock (fixes missing 2XL)
Sizes & quantities polish
- Removed instructional hint above size quantity fields
- Larger stock count superscript beside each size
Clearer stock display
- Exact Cloke stock shown as a grey superscript beside each size (no brackets or 500+ cap)
- Out-of-stock sizes show a red 0 superscript
Live stock by size
- Size quantity fields show Cloke stock for the selected colour (e.g. S (149), M (500+))
- Stock is fetched from Cloke when you change garment or colour; out-of-stock sizes are muted
Size chart link restored
- Removed the garment size dropdown; per-size quantities stay in the order form
- Reinstated “View Size Chart” to open the measurement chart image
Cleaner garment bar
- Removed the “Size” label above the size dropdown
Per-size ordering
- Synced available sizes from Cloke for every garment style
- Replaced “View Size Chart” with a Size dropdown (includes size chart option)
- Order form has quantity fields per size; total updates automatically
More text fonts
- Added 19 Google Fonts for t-shirt text — display, script, sans, and serif styles (e.g. Bangers, Caveat, Lobster, Orbitron, Staatliches)
Cleaner text tools
- Removed the “Add text” heading above the text, font, and colour fields
Text tools on one row
- Text, font, and colour fields sit on a single row in Add text
Simpler text colour picker
- Removed preset colour circles under text tools; choose colour from the dropdown picker only
Vision-only artwork screening
- Removed manual hate/offensive phrase matching; screening again uses only what Google Cloud Vision returns (logos, web labels, Safe Search)
Offensive imagery screening
- Swastikas, Nazi symbols, and similar hate imagery are flagged as possible offensive imagery (shown in red) instead of trademark warnings
- Generic WWII/flag labels are dropped when offensive content is detected; false “suggestive” flags are suppressed for those images
Cleaner screening loader
- Divider line below the artwork analysis spinner is hidden until the review finishes
Simpler image editor
- Removed instructional hint line from the Edit image modal
Indemnity wording tweak
- Artwork screening agreement now refers to “this image” consistently
Artwork review modal UX
- Wider artwork screening modal so the indemnity agreement fits on fewer lines
- Modal can only be closed with Cancel or Proceed — clicking outside no longer dismisses it
Artwork indemnity confirmation
- Proceed checkbox now requires confirmation of usage rights and agreement to indemnify WearLab against IP infringement claims
Related-image warning layout
- “Image appears related to” warnings split across three lines (label, match, rights reminder)
Artwork review disclaimer
- Updated artwork screening footer text for clearer wording
Logo warning layout
- Recognized brand or logo warnings split across three lines (label, brand name, rights reminder)
Colour-coded artwork warnings
- Artwork review labels stay black; matched names and terms show in blue
- Adult or explicit content warnings show in red
Artwork review layout
- Trademark and “image appears related to” warnings split across two lines for easier reading
Remove center button
- Removed the Center on garment button from the selection toolbar
Clearer artwork review warnings
- Multiple “Possible trademark or copyrighted content” hits are combined into one line (e.g. Jenna Haze, Nudity, Nude, Pussy)
- Similar combined lines for recognized logos and “image appears related to” matches
Center placement and form tweaks
- Center on garment button appears when text or an image is selected — aligns it to the middle of the print area
- Quantity field is now a number input (minimum 1)
- Canvas hint on mobile mentions the Delete button above the garment instead of keyboard keys
Home page URL fix
- https://mockup.wearlab.co.nz/ loads the mockup app directly without needing /index.php
- Broken redirect loops to /mockup.wearlab.co.nz/... paths are corrected automatically
Richer text colour names
- Custom text colours show the nearest specific colour name from a 1,400+ name dictionary (e.g. Cornflower, Teal Blue, Salmon)
- Matching uses perceptual colour distance so similar shades get distinct labels across all hues
Refresh page warning
- Browser warns before refresh or leaving the page if you have artwork or text on your design
- Warning is cleared after a successful mockup submission
Automatic artwork screening
- Trademark and character checks now use Google Vision results directly — no manual blocklists
- Generic labels like “Art” or “Pineapple” are filtered out to reduce false positives
- Recognized logos, web matches, and cartoon-character labels are flagged from the API
Mobile photo upload fix
- Phone camera photos and gallery picks without a file type are accepted and sent as JPEG
- Image verification and submit no longer fail with a blank server error on upload
Remove duplicate Take photo button
- Removed the separate Take photo button — use Add images (Take photo is in that menu on mobile)
Native camera on mobile
- Take photo on phones and tablets opens the device camera app instead of the in-browser webcam modal
- Desktop still uses the webcam modal with countdown and review
Longer design sessions
- Server session extended to 12 hours for long mockup design work
- Page quietly refreshes your session every 5 minutes while you work
- Submit automatically retries once if the session expired — your design stays on the page
Text colour picker fix
- Text colour field and preset swatches work on mobile — tap opens the picker and applies the chosen colour
Centered mobile header
- Site header logo and tagline are centered on mobile
Mobile layout improvements
- Garment colour swatches show all colours without scrolling on mobile
- Price tag and Front/Back tabs sit below the garment preview on mobile instead of overlapping it
Free aspect ratio crop
- Crop handles in Edit image can resize the crop area to any aspect ratio
Hide artwork filenames in library
- Filenames are no longer shown under thumbnails in the images list
Artwork library empty hint spacing
- Adjusted spacing above the empty images hint to sit between the previous too-large and too-tight gaps
Tighter artwork library empty hint
- Reduced spacing above the empty images hint in the artwork library
Crop independent of background removal
- Crop Image stays available after background removal finishes in Edit image
Background Removed button label
- After background removal in Edit image, the disabled button now reads Background Removed
Crop outline on demand
- Edit image shows the crop outline only after you press Crop Image
- Save still applies background removal and crop together when both are used
Edit image Save and Cancel
- Crop and background removal in Edit image are preview-only until you press Save
- Cancel discards all edit changes and restores the original image
- Save applies both crop and background removal together
Cleaner artwork drag preview
- Dragging an image onto the garment now shows only the artwork, not the red delete button or thumbnail chrome
Unified Edit Image modal
- Replaced separate Crop and Remove BG thumbnail buttons with a single Edit Image button
- Edit Image opens the image editor with Crop Image and Background Remover actions
- Background removal refreshes the editor preview so you can crop after removing the background
Drag-and-drop artwork fix
- Dragging a thumbnail onto the garment now places only the image, not the thumbnail card UI
- Drag handle limited to the image preview area; buttons no longer move with the drag
- Design zone clears stray HTML if the browser inserts it during drop
Text resize fix and changelog polish
- Fixed text not enlarging on hoodies and other garments after manual resize
- Text can now scale up to the full printable area on the garment
- Wider changelog modal for easier reading
- Footer version matches surrounding text but remains clickable to open release history
Changelog and release history
- Footer version number opens a full release history modal
- Documented all major and minor releases from initial launch
Camera capture, size charts, and polish
- Take photo button — webcam capture with 3-2-1 countdown, camera flash, and Save / Retake / Cancel review
- View Size Chart link on garment colour line with zoomable lightbox (100–300%)
- Background removal progress uses a spinner instead of a percentage
- Garment price tag shows italic red “from” above the price
- Email address format validation on the order form
- CloudLink Communications footer branding
- Header tagline: Apparel Design Mockup; submit button styled Submit Mockup
- Removed redundant status toasts (upload added, BG removed success)
Xero invoicing and order billing
- Draft Xero invoice created on mockup submit (WearLab organisation)
- Invoice line items: Apparel charge, DTF Image/Text charges (with front/back position), flat-rate shipping
- Contact matched or created by customer email; delivery address saved to Xero
- Order quantity applies to apparel; each image/text placement billed separately
- Tax-inclusive invoice amounts
- WearLab-only admin note in email when a Xero draft invoice is created
- Order address fields: street, suburb, city, postcode
- Dedicated WearLab Xero integration (separate from CloudLink portal files)
- Admin garment pricing page and Silver pricelist import
Artwork tools and print quality
- In-browser background removal (Remove BG) with mobile phone optimisations
- Crop image modal with free aspect ratio and Save / Cancel
- Google Cloud Vision artwork screening (trademark and character checks)
- Retina-sharp canvas rendering so placed images and text match upload resolution
- Keep images and text within garment bounds so resize handles stay visible
- Text field clears after Add text; selecting placed text no longer refills the form
- Fixed garment price display (removed duplicate addon on base garment price)
Full Cloke garment catalogue
- Synced full Cloke product catalogue with real front/back flat-lay images
- Colour swatch picker per garment with live mockup preview
- Garment search and grouped categories for large catalogues
- Garment descriptions from supplier data
- Catalog sync and reconcile scripts; only colourways with valid images shown
- Replaced placeholder SVG silhouettes with supplier photography
Submit flow and layout polish
- Higher-quality front/back mockup PNGs in order emails
- Confirmation email CC to customer
- Required phone and estimated quantity fields
- Fixed submit JSON errors and export placement accuracy in emails
- Redesigned editor layout — front/back tabs on mockup corner
- Custom font picker showing each font in its own style
- Preset text colour swatches and uniform field heights
- Live garment price tag on the mockup preview
Text, garments, and editor UX
- Add text with font and colour; font family and print dimensions included in order email
- Multiple garment types (tees, polos, hoodies, singlets, and more)
- Black and white garment colour options with consistent sizing
- Delete / Backspace removes selected image or text from the garment
- Click anywhere outside the mockup to deselect
- Word-style white resize handles and curved rotate control
- Artwork thumbnail library — drag onto mockup instead of auto-placing
- Red X on thumbnails to remove uploaded images
- Upload moved into the design step; simplified step flow
Placement rules and upload flexibility
- Artwork clipped to garment shape — nothing visible off the shirt
- Free drag placement on front and back (not locked to chest)
- Aspect ratio locked when resizing images
- Any image size accepted; soft warning when resolution may look fuzzy when printed
- Multiple image upload; files always added to the active front/back view
- Removed print width selector and opacity control
- Removed orange dashed print-zone outline from the editor
Realistic mockups and branding
- CLOKE Outline Tee product photography for black and white garments
- Sharp garment layer — photo behind transparent design canvas (not drawn on canvas)
- Transparent PNG garment assets; mockup fills available space
- Vector WEARLAB logo; white header matching logo background
- Matched black and white garment scale in the editor
Initial WearLab Design Mockup launch
- Front and back garment mockup editor (Fabric.js)
- Upload PNG/JPEG/WebP artwork with DPI guidance for print
- Drag, resize, and rotate artwork on the garment
- Submit mockup — emails preview and original print files to info@wearlab.co.nz
- Secure file storage for print-ready ordering
- Responsive layout for desktop and mobile
- WearLab branding and clean modern UI
