Sellamensa — Office Furniture Storefront
Stack: Shopify (custom theme), Liquid, JavaScript, CSS
A custom Shopify theme for an ecommerce store selling desks, chairs, and complete office setups. I built the storefront’s filtering experience, navigation, hero sections, and product page extensions.
Here is mostly what I did in this product:
-
Custom Search & Filter System
Replaced Shopify’s built-in faceting with a fully custom filter sidebar on collection and search pages. Single-thumb price slider with locale-aware currency formatting (EU comma locales via
Intl.NumberFormat), dimension sliders for height / width / depth (cm) that auto-compute min/max from facet values — essential for furniture sizing — plus checkbox groups, a collection list inside the facets, and apply/reset actions that preserveq,sort_by, and option params in the URL. -
Dedicated Search-with-Filters Page
A 667-line custom section that wires the search results to the custom facet UI, with filter tags, a vertical sidebar layout, and a mobile filter drawer so the experience works on small screens.
-
Header, Mega-Menu & Mobile Drawer
Custom dropdown header with mobile-visible mega-menus, proper z-index stacking, and a sidebar drawer with nested dropdowns. Restyled the predictive search bar and added dynamic logo-height calculation so the header scales to the configured logo size.
-
Configurable Image-Banner Hero
Hero section supporting rich text + per-element color settings for tagline and heading, button configuration, optional overlay, and a responsive flex layout — fully editable from the Shopify theme editor.
-
Product Page Extensions
Conditional 3D-Viewer iframe rendered inline in the product description when a 3D model is provided, custom “sold out” state on product cards, and CTAs routed to the live
collections/availableinstead ofcollections/all. -
Supporting Components
Top announcement banner, breadcrumb snippet with home icon, an Ankauf (buy-back) page template, a reusable button snippet (primary-dark + outlined variants), theme color variables added to the settings schema, and various polish on the footer, testimonial carousel, and product card image dimensions.
-
What I Learned
Hardest part was making a custom filtering system feel as fast and predictable as Shopify’s native one, especially around URL state, locale-aware money formatting, and keeping the mobile filter drawer in sync with the desktop sidebar.