Work / Shopify store prototype
Shopify · Interactive prototypeParts that fit, for the car you drive
A Shopify homepage prototype for a store selling performance parts, flash tunes and dyno services. Customers tell the store which car they drive, and the whole page shows them only the parts that fit.
Shopify prototype: a working design proposal with sample content, not a launched store
- Client
- Performance parts retailer, USA
- Platform
- Shopify
- Scope
- Homepage UX/UI design and interactive prototype
- Date
- October 2026
1Predictive search2Your car, saved3Fitment-first promise4Four-step vehicle finder5One signal-yellow action
- Predictive searchResults appear while typing, across products, part numbers, brands and car models. Press / to jump straight in.
- Your car, saved“Add your vehicle” becomes My Garage, shown in the header on every page.
- A fitment-first promiseThe headline says what makes this store different before anything else: parts that fit.
- Four-step vehicle finderYear, make, model, engine. Each step only offers real options, so the result always fits.
- One signal-yellow actionYellow is kept for the most important button on the page, so the eye goes straight to it.
Performance parts only sell when they fit. Customers were left to work out compatibility themselves, and wrong orders meant returns.
We designed a new homepage around one idea: ask for the car first, then shop for that car. The prototype keeps the store's existing black and white look, makes it feel more premium, and promotes the high-value services: phone-based flash tuning and dyno sessions.
Four quick steps, then the store shops for your car
Year, make, model and engine. Each step only offers options that exist for the choices before it, so nobody can pick an impossible car. The vehicle is saved to My Garage and stays in the header on every page.
Every product says whether it fits
Once a car is saved, the homepage reorders itself: “Top picks for your M3”, with a badge on every card. Parts that fit are marked in green, universal items in blue, and parts that don't fit stay visible but clearly marked, so customers never order the wrong part by mistake.
Find it fast, buy it without leaving the page
Search shows results while you type, across product names, part numbers, brands and car models. Adding to cart opens a side drawer with a free-shipping progress bar, a fitment check on each item and Shop Pay.
Tuning and dyno time, sold on the homepage
The phone-based flash tuner gets its own dark feature section: three simple steps, a phone mock-up with an animated dyno curve, and an add-to-cart button. Dyno sessions follow with next available time slots.
Built for shopping on a phone
The finder stacks into one thumb-friendly column, products become a swipeable carousel, and menu, search and cart open as full-height panels. Tested on a 390px screen with no sideways scrolling.
Designed to run on standard Shopify
Everything in the prototype uses features the store owner can manage from the normal Shopify admin. No custom platform, no lock-in.
| Prototype feature | Shopify building block |
|---|---|
| Vehicle data: makes, models, years, engines | Metaobjects (a “Vehicle” entry type) |
| Which vehicles a product fits | Product metafields linked to vehicles |
| Fitment filters on collection pages | Shopify Search & Discovery app |
| Vehicle finder, My Garage, fitment badges | Custom theme sections (Liquid and JavaScript) |
| Predictive search | Shopify's built-in Predictive Search |
| Cart drawer and free-shipping bar | Shopify cart with a custom drawer |
| Shop Pay, Apple Pay, Google Pay | Shopify Payments accelerated checkout |
| Editable homepage sections | Shopify theme editor, no code needed |
Black and white, with one signal colour
The store's existing black and white look, warmed up, with a single yellow accent saved for the actions that matter, like “Show parts that fit”.
About this prototype
This is a design proposal, not a live store. To protect the client, the brand name shown (TORQLINE) is a placeholder. Products, prices, part brands, reviews and statistics are sample content for showing the design, and the photos are free stock images.
Planning a Shopify store?
We design and build Shopify and WooCommerce stores that help customers find the right product and check out without friction.