Ukraine · Croatia
Demo · WooCommerce · built from someone else’s design
Aubrell
A clothing store built from a public Figma template by another designer, to show how closely we follow a design we did not draw. The brand is fictional: nothing is sold and no payment is taken.
34 screens
frame and build side by side
1–3 px
off the frames, desktop and phone
Every change
from the design listed with its reason
The design and the build
The frame on the left, the store on the right.
Every frame in the Figma file was built, then screenshotted in the same state at the frame’s width: 1920 px on desktop, 375 px on a phone. Offsets were measured from the pixels of both images: the edges and baselines of photos, text, fields and buttons.
Most pairs sit within 1–2 px, a few within 3. Where a page runs taller or shorter, our text is a line longer or shorter than the design’s.
Figma frameOur build
Figma frameOur build
Figma frameOur build
Figma frameOur build
Figma frameOur build
Figma frameOur build
Left in each pair: a frame from “eCommerce Template – Clothes Shop” by Viachas Kul, CC BY 4.0, with its own sample photos. Right: the build, with our photos and copy.
Where the build differs
Nothing changed quietly.
Where a frame could not be built as drawn, the change was written down with its reason before it was built. You get the list with the handover, so you know what to tell the designer and the client.
Right: six of the eighteen changes on this store.
| Where | In the design | In the build | Why |
|---|---|---|---|
| Checkout | Three separate pages | Three steps of one form on one address | Keeps WooCommerce’s own validation, hooks and order handling |
| Payment step | Card number, expiry and CVC fields | The same layout without card fields | A demo must not collect card details or look as if it does |
| Catalog filters | The frames disagree: Size on one, Color on another | Collection, Size and Color together | Covers both frames and works without JavaScript |
| Search on wide screens | No frame shows it open | The phone menu’s search field in a small panel | Built from the closest frame instead of a new component |
| Checkout buttons | Text repeated from other steps, such as “Continue to payment” on the Payment step | “Place order” | Each button says what it does |
| Information step | “Keep me up to date” and “Save this information” | Not built | The store sends no mail and has no accounts, so both would do nothing |
What the frames don’t show
Every width between the frames
The frames are drawn at 1920 and 375 px. The store was checked at seven widths from 320 to 1920. At 768 and 1024 px the catalog and product pages first scrolled sideways. Now their columns shrink in proportion.
Errors and wrong input
No frame shows a field error. They follow the file’s own styles and components: a size not chosen, an empty field or a wrong ZIP code at each checkout step.
Without JavaScript
The size select, Add to cart, checkout, the Stockists countries and the Campaigns photos all work with scripts turned off.
Edited in the block editor
About, Values, Contact, Stockists and Campaigns open in the block editor with every block valid, so the client’s team changes text and photos without a developer.
Proof of testing
Checked like client work.
The same QA log we hand over on a client project: what we did, what should happen and what actually happened. Wrong inputs are tried on purpose.
Right: six rows from this store’s log.
| # | Step | Expected | Actual | Result |
|---|---|---|---|---|
| P3 | Add to cart without a size | Message, nothing added | “Select a size first.”, Cart(0) | Pass |
| P6 | Information step: Continue with every field empty | Messages, stays on the step | 5 field messages, still on Information | Pass |
| P7 | Email “buyer@”, ZIP “123” | Email and ZIP messages | “Enter a valid email address.” “Enter a 5-digit ZIP code.” | Pass |
| P11 | Different billing address without a last name | Order refused on the Payment step | “Billing Last name is a required field.” | Pass |
| P12 | Place a valid order | Order received, $600.00 | Order received, $600.00, no payment taken | Pass |
| A3 | Keyboard: tab through home, shop, product, contact, checkout | Every focused element visible | 15 stops on each, all with a focus outline | Pass |
Checked in Chrome and in WebKit, the engine behind Safari, at seven widths from 320 to 1920 px, on the live store.
Stack
- WordPress
- WooCommerce
- Block theme
- PHP 8.4
- MariaDB
- Docker
- GitHub Actions
Design based on “eCommerce Template – Clothes Shop” by Viachas Kul, CC BY 4.0, adapted. Photos: Unsplash contributors, Unsplash License.
Have a design to build?
Send us the file or a link to it. We’ll say what can be built as drawn and what needs a decision.