E-commerce · Fashion & Apparel Store

Northline

Technical outdoor wear with a clothing rail you can actually pull pieces off.

Interactive — this is the real demo running inside the page. Full screen
Northline — screenshot of the live demo

What this template does

A premium outdoor apparel storefront: cinematic hero, spec call-outs around the hero shell and a physical clothing rail with inertia and swing. Shop with filters, a fit finder and size guide, then check out in three steps with cash on delivery.

Signature interaction

Garments hang on a rail that swings as you drag it with inertia; click one to lift it off into a product view and flip it front to back.

Working in the demo

  • Draggable clothing rail with inertia
  • Lift-off garment with front/back flip
  • Spec call-outs around the hero product
  • Headlamp outline marquee
  • Category, size, colour and price filters
  • Sort and instant search
  • Colour swatches recolour the product
  • Hover zoom gallery
  • Fit finder from height and weight
  • Size guide with cm/in toggle
  • Wishlist
  • Coupon SITESUP10 and cash on delivery checkout

Motion preview

Screen recording of the live demo. Concept template — sample data.

Features inside this template

Product Variant Selection — live feature demo
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
Quick Product View — live feature demo
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
Interactive Product Hotspots — live feature demo
E-commerce

Interactive Product Hotspots

A shop-the-look room photo with pulsing hotspots on every piece. Hover or tap a dot for a product popover with price, rating and add to bag, tick pieces in the look panel to build a bundle, and switch on merchant edit mode to drag hotspots into place.

Try it
Multi-step Checkout — live feature demo
E-commerce

Multi-step Checkout

A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.

Try it