TRUWEAR
MOCKUP GENERATOR
PRODUCT DESIGN & WEB APP
Designer + Builder
My Role
Shopify App
Type
3 Days
Timeline
In Use
Status
01
PROJECT OVERVIEW
Truwear is a corporate apparel brand with a large Shopify catalog. Every time a client wanted to see their logo on a garment, a designer had to manually open Figma, place the logo, adjust sizing, export, and repeat, for every product, every colorway. It was slow, it blocked the sales team, and it didn't scale.
The raw materials were all there: product photography, a live Shopify catalog, a repeatable workflow. What was missing was a tool that connected them. So I built one: a bulk mockup generator that lets anyone on the team go from logo upload to downloadable mockups in seconds.
02
THE PROBLEM
Bottleneck
Everything went through a designer
Sales reps couldn't generate mockups on their own. Every client request created a queue and constant context-switching for the design team.
Time Cost
Repetitive work eating into design hours
One logo placement takes 2 minutes. Across 10 colorways and 5 garments for a single pitch, that's hours of mechanical work with zero creative value.
Catalog Sync
No connection to the live product catalog
Designers maintained separate asset libraries that went stale quickly. New products on Shopify weren't automatically available for mockups.
Sales Impact
Slow turnaround hurt deals
Clients asking to see their logo on a specific product had to wait hours. In a sales context, that friction costs momentum.
03
WHO I DESIGNED FOR
Three user types with very different technical comfort levels and goals: one tool that had to work for all of them.
Designer
Needs
Create placement templates once and reuse them across every product. Full control over logo positioning.
Was doing
Was manually placing logos in Figma for every client, every product, every colorway.
Sales Rep
Needs
Generate a full mockup set before or during a client call, without needing a designer in the loop.
Was doing
Was waiting hours for files, losing momentum in the sales conversation.
Client
Needs
See their logo on actual products quickly enough to make a decision.
Was doing
Was getting a delayed email with a handful of static images and no easy way to explore other options.
04
THE SOLUTION
Pull the full catalog live from Shopify, let designers define placement zones once, then let anyone generate and download mockups in bulk.
Shopify Integration
Built a custom Shopify app that pulls all product data, images, variants, names, directly from the store. New products appear in the tool automatically. No manual syncing.
→ Custom Shopify app + API auth
Template Creation
Designers drag a placement box over the product image, size it, name it, and save. That template is instantly shared with the whole team: define it once, use it everywhere.
→ Templates shared with the team in real time
Catalog Sets
Individual product selection for control, or pre-built catalogs (Truwear Basics: 49 products, Collegiate Catalog: 60 products) for speed. Pick a catalog, upload a logo, generate.
→ Catalogs for speed, individual selection for precision
Bulk Generation + Download
Drop a logo into the upload zone, hit generate. The tool applies it to every selected product using the saved templates and renders the full set. Download everything at once or grab individual files.
→ Bulk + individual download both available
05
THE PRODUCT
Products View
Full Shopify catalog in a filterable grid. The right panel stays persistent: selected products, logo upload, and the template library are always accessible without losing context.
Catalogs View
Pre-built product sets with one-click generation. Sales reps can have a full client deck ready before a call ends.
Template Creation
Drag the box, size it, name it, save. That template is live for the entire team immediately.
Generated Output
All colorways, logo placed correctly, ready to download. What used to take 20–40 minutes per client request now takes seconds.
06
REFLECTION
No user interviews, no affinity maps. What made it work was a different kind of design thinking: see the workflow problem clearly, design around the real constraints, and ship.
WHAT MADE THIS WORK
Separating "setup" from "generate" was the key decision. Designers define templates once, everyone else just uses them. The complexity is invisible.
WHAT'S NEXT
The logical next step is auto-detecting logo placement areas from the product image, so new items get suggested zones automatically and setup overhead drops to near zero.
Still Ahead
REDUCE FRICTION END TO END
Auto-detect logo placement zones on new products, and let sales reps send clients a shareable link to preview and download mockups directly, removing manual steps on both ends.
Still Ahead
USAGE ANALYTICS
Track which products get mocked up most, giving the brand a clear signal on what clients are actually interested in and where to focus catalog growth.