A marketplace front end that's actually architected to change.
27 pages. Three complete homepage variants. A full vendor platform. A SASS token system that rebrands everything in one compile. This is the front-end foundation we build multi-vendor commerce businesses on.
// the reasoning
Buy the design. Build the system.
A marketplace front end is a genuinely large surface. Three homepage variants. Product listings with faceted filters. Product detail, comparison, wishlist, cart, checkout, order tracking. A vendor directory, individual vendor storefronts, a seller onboarding flow, a full account dashboard, blog, FAQ, legal pages, and dedicated empty and error states. Around 58,500 lines of HTML across 27 pages.
Designing and building that from zero is months of work — and almost none of it is the part that makes a marketplace succeed or fail. The hard problems are inventory, vendor identity, split orders, payouts and trust. A licensed design foundation that is architected well enough to change cleanly is a legitimate strategy. We audit that before we recommend one.
// what's inside
Three complete layers.
Three Homepage Variants
index.html, home-two.html, home-three.html — each a complete page with its own image set, section composition, hero slider, category grid, flash sale, weekly deals, new arrivals, best sellers, top sellers, brand strip, and footer. Three distinct presentations of the same product catalogue.
The Commerce Funnel
Product listing with faceted sidebar filters, product detail with linked thumbnail gallery, compare, wishlist, cart, checkout, order tracking — plus dedicated empty states for cart and wishlist and a 404. Every step a customer takes from browse to delivery confirmation.
The Vendor Platform
sellers.html (vendor directory), seller-sidebar.html (individual storefront with its own filter sidebar), become-vendor.html (merchant onboarding), and user-profile.html — a full dashboard covering personal info, shop info with logo upload, payment methods, multiple shipping addresses, order history, and a support ticket panel.
// the design system
Rebrand through the token layer — not find-and-replace.
The naive approach to rebranding a 58,500-line template is to search for colour values. That way lies weeks of work and a permanent trail of missed instances.
ShopUs is built on a genuine token layer. Redefine the palette and the type stacks, adjust the component mixins, recompile. Every button, badge, card shadow and hover state across all 27 pages moves together and stays consistent — and the design system the client can extend. New pages inherit the brand automatically.
Colour & Typography Tokens
Magenta primary, amber secondary, coral and charcoal accents, plus five Google font stacks — all defined as SASS variables. Swap any of them and the entire site recompiles consistently.
Layout Mixins
flexItem(), flexBetween(), gridItem() with sensible defaults — write one line instead of five. Eight named breakpoints ($lg, $mdx, $md, $sm, $xs…) so media queries read as @media #{$sm} instead of raw pixel values.
Component Mixins
shopBtn() takes 12 optional parameters and bakes in a wipe-fill hover effect via an ::after pseudo-element that animates from 0% to 100% width. productBtn(), wrapper(), view() — parameterised, composable, consistent.
// turning static into live
The template is the spec. Wiring it up is the project.
Every page in the template is static HTML with hardcoded content — a product card with a fixed image path and "$20.00" typed into the markup, repeated hundreds of times. Turning 27 static pages into a live application means every interactive piece has to be wired to real data.
// the javascript layer
Well-built components. Zero guessing.
shopus.js is ~250 lines of dependency-light vanilla JS, every block guarded so pages that lack an element don't throw. The interactive pieces are genuinely usable, not decorative.
Four Swiper Instances
Fade-transition hero autoplay, a responsive 3-across testimonial carousel with five breakpoints, and a linked thumbnail-plus-main pair for the product gallery — each independently configurable.
Price Filter + Countdown
noUiSlider dual-handle range with live $min–$max labels. Flash-sale countdown computes day/hour/minute/second deltas on a 1s interval and self-clears when it passes zero.
Mega-Menu + Custom Selects
heightanimation() reads scrollHeight and writes it to a --max-height CSS custom property so dropdowns animate to their real height. Custom select boxes for currency/language switchers in the top bar.
// what we'd tell you before you start
A template is only worth starting from if it's architected well enough to change cleanly.
Right foundation ✓
Build from scratch instead ✗
For those, we build from scratch — and we'll tell you so on the first call, not three weeks in.
// built with
The stack.
Structure & Styling
Interactivity
Assets & Delivery
Front-end design foundation: ShopUs by Quomodosoft, licensed via ThemeForest. All backend engineering, integration, customisation and deployment by Presencify Digitals.
// see it live
Building a marketplace? Let's talk.
We'll audit what you need, tell you honestly whether a foundation-based launch makes sense, and give you a fixed timeline and price either way.
Built by Presencify · presencify.digital