Shopify themes · Men's Grooming Store

BARBER & BLADE

Dark-luxury grooming theme where a face chart builds and times your shave.

Interactive — this is the real build running inside the page. Full screen
BARBER & BLADE — screen from the live build

What it does

A dark-luxury Shopify theme design for a Beirut barbershop brand, built from Online Store 2.0-style sections. Pick your beard, skin and the minutes you have, and a vintage face chart lays out a timed ritual you can run, tweak and add to the bag as a discounted set. A live theme editor recolours, re-types and reorders the store, while collection filters, variants, barbershop pickup, the cart and a one-page preview checkout with cash on delivery, card and Whish all work end to end.

Signature interaction

Choose your beard, skin and the minutes you have, and a vintage barber's face chart draws your beard and lays out a timed ritual: each step lights up its zones on the chart, the set price drops as the ritual grows, and Run the ritual walks you through it with a live countdown.

What works in it

  • Ritual builder with a live barber's face chart
  • Timed ritual player that lights each step's zones
  • Ritual set pricing: 10% off 3 products, 15% off 5
  • Theme editor for colour scheme, fonts, buttons and announcement
  • Drag to reorder or hide home page sections
  • Predictive search with products, collections and suggestions
  • Filters for availability, price, type and colour swatches, with sort and grid density
  • Variant swatches that recolour the razor, with notify-me for sold-out options
  • Barbershop pickup availability and a live delivery estimate
  • Cart drawer with free-delivery meter, gift wrap, notes and SITESUP10
  • One-page preview checkout with cash on delivery, card and Whish
  • Customer account with email-code sign-in and order history

Motion preview

Screen recording of the live build, running on sample data.

Features inside this build

Product Bundles — the feature running live
E-commerce

Product Bundles

Two bundle mechanics in one feature: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.

Try it
Advanced Product Filters — the feature running live
E-commerce

Advanced Product Filters

A 24-product catalogue with faceted filters for category, price (dual slider over a price histogram), colour swatches, size, rating and in-stock. Active filters show as removable chips, counts update live, the grid re-sorts with smooth FLIP animation and the whole state lives in the URL so a filtered view can be shared.

Try it
Quick Product View — the feature running live
E-commerce

Quick Product View

A product grid where Quick view zooms the card image straight into a modal (shared-element transition) with a gallery, colour and size selection, quantity and add to bag. It is fully keyboard driven: Enter opens, arrows browse images, Tab is trapped inside and Esc returns focus to the card.

Try it
Product Variant Selection — the feature running live
E-commerce

Product Variant Selection

A phone product page where colour swatches swap the gallery with a circular colour-wipe, storage options show price differences and low or sold-out stock per colour, an availability matrix shows every colour × storage combination at a glance, and the SKU, price and URL update with each choice.

Try it