AURA / 01
A headphone concept store, developed from an initial Figma shopping flow into an editorial Shopify storefront.
Personal practice projectShopify visitor password: GerardoAuraDemo. The store is password protected and checkout is not enabled. Saved screenshots remain available if the trial storefront becomes unavailable.
One product. A clear shopping path.
I put together a headphone store concept with two finishes, Ink and Chalk. The goal was to keep the product easy to find, the options easy to understand, and the bag easy to update.
Design, build, and check.
- Editable Figma desktop and mobile layouts, with linked shopping states
- Shopify sections, Liquid templates and responsive CSS
- One product, two color variants, sample inventory and unique SKUs
- Navigation, information pages, metadata and cart checks
From the first plan to Studio Edition.
The first image shows the initial Figma direction. The current Shopify build expands that foundation with a forest-and-lime palette, larger vector artwork, finish previews and a longer product story.
01 / Initial Figma direction
The initial monochrome layout and linked desktop/mobile shopping states. This prototype documents the first design stage.
02 / Current Shopify — Studio Edition
A revised art direction with shaded vector product artwork, moving typography, design-detail panels, two finish cards and native Shopify cart data.
Visitor password: GerardoAuraDemo
A consistent visual foundation.
A large product composition, serif accents and alternating light/dark sections give the single product more visual depth. Finish swatches update the artwork; the mobile page stacks sections and keeps controls within easy reach.
Typography: Manrope with Georgia italic accents. Figma layouts: 1440 px desktop and 390 px mobile.
From finding the product to editing the bag.
Home → headphones collection → product → finish selection → bag → quantity update or removal
The prototype includes Ink and Chalk, matching bag states, quantity changes and an empty bag. The current Shopify build uses finish swatch buttons backed by the native variant selector. Product details use expandable rows, and Shopify supplies the real variant IDs, prices and stock availability.
Headphones use an adjustable, one-size concept, so a clothing-size selector would add an unnecessary step.
What I checked.
| Check | Observed result |
|---|---|
| Figma navigation | Desktop and mobile starting points; linked product, finish, bag and information screens. Navigation destinations were checked. |
| Product setup | Ink and Chalk at $79 USD, with two unique SKUs and ten sample units per finish. |
| Cart | Both finishes added correctly. One item showed $79; two showed $158. Quantity updates, removal and the empty bag worked. |
| Mobile homepage | Homepage, product and cart reviewed at a 390 px browser viewport, with no horizontal overflow. This was not testing on a physical phone. |
| Checkout | Shopify displayed “This store isn’t set up to receive orders yet.” No order or payment was created. |
A practical design-to-build exercise.
This is personal training work. The product name, artwork, price and stock are illustrative; they do not represent an original manufactured product or verified supplier specifications. The supplied one-product tutorial informed the product-led composition. The theme code and vector artwork were developed for this practice build; the reference template was not installed.
I used the project to practice planning a shopping flow and translating it into Shopify. It has not been usability-tested with customers, and no sales or conversion improvement is claimed.