INPUT LAB — Interactive Shopify Accessories Store (Concept) by Nolan TyreeINPUT LAB — Interactive Shopify Accessories Store (Concept) by Nolan Tyree

INPUT LAB — Interactive Shopify Accessories Store (Concept)

Nolan Tyree

Nolan Tyree

The chosen Axis 75 configuration carries through from the homepage to the product page.
The chosen Axis 75 configuration carries through from the homepage to the product page.
A coordinated desk setup brings keyboard, mouse and mat selections together with a combined total.
A coordinated desk setup brings keyboard, mouse and mat selections together with a combined total.
Original desk and close-up imagery carry the cream, cobalt and charcoal identity across the collection.
Original desk and close-up imagery carry the cream, cobalt and charcoal identity across the collection.
Product imagery and model controls adapt to a compact mobile layout.
Product imagery and model controls adapt to a compact mobile layout.
INPUT LAB is an independent Shopify concept for a fictional keyboard and desk-accessory brand. The design brief was to make a small technical catalog feel distinctive and approachable, while giving visitors useful ways to choose between models and configurations. Six synthetic products and 11 variants provide the working catalog inside a protected Shopify Dev store.
The homepage is organized around the products themselves. Visitors can switch between the Axis 75 keyboard, Shift 65 keyboard and Arc mouse, with the image, description, price and product link updating together. The selected configuration remains connected to the next product page. This puts the main buying decision into the opening experience while retaining a clear route to the full collection.
Charcoal surfaces, lime actions, cream hardware and cobalt details establish the visual identity. Technical labels and measured layouts support the equipment theme, while a complete desk photograph and product close-up show the collection in context. The aim was a recognizable product world that remains practical to browse, with primary prices and actions receiving more emphasis than supporting specifications.
The setup builder lets visitors assemble a keyboard, mouse and desk mat, with visual presets as starting points and a visible combined total. A comparison view places selected products and their sample specifications together. Product pages retain the same visual language while providing configuration choices, quantity controls, supporting information and related accessories.
The storefront was built with Shopify Liquid, HTML, CSS and JavaScript, using original AI-generated concept imagery. Targeted checks covered model switching, variant-price and destination updates, the setup total, comparison dismissal and keyboard focus return. Native cart add, quantity update and removal were also checked. Desktop, tablet and phone reviews led to a specific tablet-grid correction so the product image uses the available space cleanly.
This project demonstrates how product discovery and configuration can become part of a store’s identity. The visual direction and selection workflow can be adapted to a merchant’s own catalog and requirements after scope is established. It is self-directed concept work, with fictional merchandise, prices and illustrative specifications. No commissioned client, sales improvement or conversion result is claimed. Production checkout, payments and fulfillment were not launched.
Message me on Contra with your catalog, configuration options and the selection flow you want to improve to discuss a Shopify accessories project.
Like this project

Posted Nov 4, 2026

A custom Shopify concept for keyboards, mice and desk accessories, with live product configuration, comparison and a setup builder.