KingBelt
A custom D2C storefront for KingBelt, built to make belt variants, sizing and buying decisions clear while keeping the brand's editorial character — catalogue, product detail, cart and a headless Shopify commerce architecture behind a publicly accessible storefront.
Client work ECOMMERCE 2026
Context
KingBelt is a Spanish leather-accessories brand selling directly to consumers. Its products are organised into collections, colours and belt sizes, and the digital experience has to balance a recognisable brand identity with the practical product discovery a direct-to-consumer store depends on.
- KingBelt
- Leather accessories / retail
- D2C commerce system
- Client work
- In development
- 2026
Problem & objective
The website needed to make product variants, sizing and purchase decisions understandable without losing the restrained editorial character of the brand. Belt sizing is not obvious to a first-time buyer, colours multiply the catalogue, and the storefront has to stay legible and operational while the underlying commerce architecture is separated from brand presentation.
- Multiple product colours and belt sizes
- Preserve accurate product descriptions, references and imagery
- Separate commerce logic from editorial frontend presentation
- Keep launch and Shopify operational readiness distinct from the public-facing UI
Create a distinctive online storefront with an organised, variant-aware catalogue and a maintainable foundation for direct-to-consumer commerce — one coherent visual system from collection browsing to the cart, without collapsing brand experience and operational commerce into the same layer.
(03) Plates
Solution & decisions
An Astro frontend with custom collection and product pages, variant-aware interfaces, a cart and a Shopify-facing commerce integration. Catalogue, variants, cart and checkout are modelled through a commerce layer rather than hard-coded into the UI, and brand storytelling, sizing guidance and editorial content support product discovery.
Architecture
The frontend is built with Astro and TypeScript. Catalogue, variants, cart and checkout are modelled through a headless Shopify-facing commerce layer rather than being embedded in presentation components, so the brand frontend can evolve independently of the commerce backend. Collections organise the catalogue, product pages resolve colour and size variants against the same commerce model, and the cart connects selection to the buying journey while keeping operational readiness separate from the published interface.
Design
An understated, material-led art direction prioritises leather textures, product photography, oversized typography and a restrained hierarchy. Collection and product surfaces remain legible and operational rather than competing with the products, and variant controls stay predictable as a buyer moves between colour and size.
-
Product-first design
Photography, finish and material information lead the composition while purchase controls stay predictable, so the products carry the experience instead of the interface.
-
Decoupled commerce architecture
Astro handles presentation and Shopify the commerce data, separating brand experience from operational commerce and keeping catalogue, variants and cart in one integration layer rather than scattered across components.
-
Variant-aware interfaces
Colour and size are treated as first-class product data, so selection, pricing and the cart stay consistent across the catalogue as it grows.
-
Explicit launch gates
The implementation distinguishes the publicly accessible storefront from final payment, fulfilment and analytics acceptance, so published UI is never presented as a completed commercial launch.
Astro, TypeScript and responsive interfaces connect with Shopify Storefront APIs through a commerce abstraction. The repository includes isolated demo data, cart and session handling, SEO paths and launch validation procedures, keeping the storefront demonstrable without treating operational commerce as finished.
Implemented scope
- Responsive editorial storefront and navigation
- Collection browsing and product filtering
- Product detail pages with colours and sizes
- Cart interface and Shopify commerce integration
- Size guidance, brand journal and editorial content
Verification & outcomes
The public storefront presents collections, product details and editorial content through one coherent visual system, with variants and the cart carried by a decoupled Shopify commerce layer. Final commerce, fulfilment and analytics readiness remain explicitly separate from the published frontend, so this case is published as work in development rather than a completed launch.
- The public KingBelt homepage is accessible at kingbelt.es
- Collection pages show categories, filtering controls and product listings
- Public product detail pages show sizes, colours and add-to-cart actions
- Astro
- TypeScript
- Shopify
- Vercel