@pradip1995/segment-powerhouse-shop 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-powerhouse-shop",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/add-to-cart.ts

@@ -0,0 +1,24 @@
+"use server"
+
+import { addToCart as addToCartCore } from "@pradip1995/commerce-core/data/cart"
+import { removeAuthToken, removeCartId } from "@pradip1995/commerce-core/data/cookies"
+
+function isStaleCustomerError(err: unknown) {
+  const message = err instanceof Error ? err.message : String(err)
+  return /customer with id/i.test(message) && /not found/i.test(message)
+}
+
+export async function addToCart(input: {
+  variantId: string
+  quantity: number
+  countryCode: string
+}) {
+  try {
+    await addToCartCore(input)
+  } catch (err) {
+    if (!isStaleCustomerError(err)) throw err
+    await removeAuthToken()
+    await removeCartId()
+    await addToCartCore(input)
+  }
+}

package/src/product-card.tsx

@@ -2,7 +2,7 @@
 
 import { useState, type MouseEvent } from "react"
 import { useRouter } from "next/navigation"
-import { addToCart } from "@pradip1995/commerce-core/client/actions/cart"
+import { addToCart } from "./add-to-cart"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import { isNextRedirect } from "@pradip1995/segment-primitives/is-next-redirect"
@@ -82,6 +82,15 @@ export default function ShopProductCard({
       </LocalizedLink>
 
       <div className="powerhouse-shop__info">
+        {price != null ? (
+          <div className="powerhouse-shop__price">
+            {onSale && originalPrice != null ? (
+              <span className="powerhouse-shop__compare">{formatPrice(originalPrice, currency)}</span>
+            ) : null}
+            <span className="powerhouse-shop__current">{formatPrice(price, currency)}</span>
+          </div>
+        ) : null}
+
         <h2 className="powerhouse-shop__name">
           <LocalizedLink href={href} countryCode={countryCode}>
             {product.title}
@@ -98,15 +107,6 @@ export default function ShopProductCard({
 
         {copy ? <p className="powerhouse-shop__excerpt">{copy}</p> : null}
 
-        {price != null ? (
-          <div className="powerhouse-shop__price">
-            {onSale && originalPrice != null ? (
-              <span className="powerhouse-shop__compare">{formatPrice(originalPrice, currency)}</span>
-            ) : null}
-            <span className="powerhouse-shop__current">{formatPrice(price, currency)}</span>
-          </div>
-        ) : null}
-
         <div className="powerhouse-shop__actions">
           <LocalizedLink href={href} countryCode={countryCode} className="powerhouse-shop__quickshop">
             Quick shop

package/src/shop.css

@@ -1,3 +1,20 @@
+html.powerhouse-filters-open,
+html.powerhouse-filters-open body {
+  overflow: hidden;
+}
+
+.powerhouse-shop .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .powerhouse-shop {
   --layout-container-max-width: 1400px;
   max-width: var(--layout-container-max-width);
@@ -94,29 +111,52 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  margin-bottom: 1rem;
+  margin: 0;
+  padding: 1.1rem 1.15rem;
+  border-bottom: 1px solid #e8e8e8;
+  background: #fff;
 }
 
 .powerhouse-shop__sidebar h2,
-.powerhouse-shop__filter h3 {
+.powerhouse-shop__filter-toggle {
   margin: 0;
   font-family: var(--font-sans, inherit);
   font-weight: 700;
+  color: #1d1d1d;
 }
 
 .powerhouse-shop__sidebar h2 {
   font-size: 1.25rem;
+  line-height: 1.2;
 }
 
 .powerhouse-shop__filter {
-  margin: 0 0 1.5rem;
-  padding-bottom: 1.25rem;
-  border-bottom: 1px solid #dddddd;
+  margin: 0;
+  padding: 0;
+  border-bottom: 1px solid #e8e8e8;
 }
 
-.powerhouse-shop__filter h3 {
-  margin-bottom: 0.75rem;
+.powerhouse-shop__filter-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.05rem 0 0.85rem;
+  border: 0;
+  background: transparent;
   font-size: 0.9375rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.powerhouse-shop__filter-icon {
+  font-size: 1.25rem;
+  line-height: 1;
+  font-weight: 400;
+}
+
+.powerhouse-shop__filter-body {
+  padding: 0 0 1.15rem;
 }
 
 .powerhouse-shop__filter ul {
@@ -126,21 +166,21 @@
 }
 
 .powerhouse-shop__filter li + li {
-  margin-top: 0.45rem;
+  margin-top: 0.7rem;
 }
 
 .powerhouse-shop__filter a {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.7rem;
   color: #1d1d1d;
   font-size: 0.9375rem;
   text-decoration: none;
 }
 
 .powerhouse-shop__check {
-  width: 1rem;
-  height: 1rem;
+  width: 1.05rem;
+  height: 1.05rem;
   flex-shrink: 0;
   border: 1px solid #1d1d1d;
   background: #fff;
@@ -151,38 +191,64 @@
   box-shadow: inset 0 0 0 2px #fff;
 }
 
+.powerhouse-shop__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.powerhouse-shop__swatches li + li {
+  margin-top: 0;
+}
+
+.powerhouse-shop__swatch {
+  display: block;
+  width: 1.35rem;
+  height: 1.35rem;
+  border: 1px solid #cfcfcf;
+}
+
+.powerhouse-shop__swatches a.is-active .powerhouse-shop__swatch {
+  outline: 1px solid #1d1d1d;
+  outline-offset: 2px;
+}
+
 .powerhouse-shop__price-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  gap: 0.65rem;
 }
 
-.powerhouse-shop__price-form label {
+.powerhouse-shop__price-field {
   display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  font-size: 0.8125rem;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+  padding: 0 0.65rem;
+  border: 1px solid #dddddd;
+  background: #fff;
+  font-size: 0.9375rem;
+  color: #6e6e6e;
 }
 
-.powerhouse-shop__price-form input,
-.powerhouse-shop__sort select {
+.powerhouse-shop__price-field input {
   width: 100%;
-  padding: 0.6rem 0.7rem;
-  border: 1px solid #dddddd;
-  background: #fff;
+  min-width: 0;
+  padding: 0.7rem 0;
+  border: 0;
+  background: transparent;
   color: #1d1d1d;
   font-family: var(--font-sans, inherit);
   font-size: 0.9375rem;
 }
 
-.powerhouse-shop__sort select {
-  width: auto;
-  min-width: 12rem;
+.powerhouse-shop__price-field input:focus {
+  outline: none;
 }
 
 .powerhouse-shop__price-form button {
   grid-column: 1 / -1;
-  padding: 0.65rem 0.9rem;
+  padding: 0.7rem 0.9rem;
   border: 1px solid #1d1d1d;
   background: #1d1d1d;
   color: #fff;
@@ -212,37 +278,57 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  margin: 1rem 0 1.25rem;
+  gap: 0.5rem;
+  margin: 0.35rem 0 1rem;
+  flex-wrap: nowrap;
+}
+
+.powerhouse-shop__utils-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.15rem 1.15rem;
 }
 
 .powerhouse-shop__filters-btn,
 .powerhouse-shop__sort {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.45rem;
   font-family: var(--font-sans, inherit);
+  font-size: 0.9375rem;
+  color: #1d1d1d;
 }
 
 .powerhouse-shop__filters-btn {
-  padding: 0.65rem 0.9rem;
-  border: 1px solid #dddddd;
-  background: #fff;
-  color: #1d1d1d;
+  padding: 0.45rem 0.15rem;
+  border: 0;
+  background: transparent;
   cursor: pointer;
+  white-space: nowrap;
 }
 
-.powerhouse-shop__utils-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 0.85rem 1.25rem;
-  margin-left: auto;
+.powerhouse-shop__sort {
+  position: relative;
+  min-width: 0;
+}
+
+.powerhouse-shop__sort select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  min-width: 0;
+  opacity: 0;
+  cursor: pointer;
 }
 
 .powerhouse-shop__utils-label {
   font-size: 0.9375rem;
+  white-space: nowrap;
+}
+
+.powerhouse-shop__view-label {
+  display: none;
 }
 
 .powerhouse-shop__view {
@@ -325,6 +411,7 @@
   display: grid;
   grid-template-columns: 7.5rem minmax(0, 1fr);
   align-items: start;
+  height: auto;
   gap: 1rem;
   padding: 1.25rem 0;
   border-bottom: 1px solid #dddddd;
@@ -332,6 +419,18 @@
 
 .powerhouse-shop__grid.is-list .powerhouse-shop__info {
   padding-top: 0;
+  flex: none;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__name {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+  min-height: 0;
+}
+
+.powerhouse-shop__grid.is-list .powerhouse-shop__price {
+  min-height: 0;
 }
 
 .powerhouse-shop__grid.is-list .powerhouse-shop__excerpt,
@@ -351,25 +450,35 @@
 .powerhouse-shop__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1.25rem 10px;
+  align-items: stretch;
+  gap: 2rem 10px;
+  width: 100%;
 }
 
 .powerhouse-shop__card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
 .powerhouse-shop__media {
   position: relative;
   display: block;
+  width: 100%;
   overflow: hidden;
   background: #f3f3f3;
+  aspect-ratio: 1;
 }
 
 .powerhouse-shop__media img,
 .powerhouse-shop__placeholder {
+  position: absolute;
+  inset: 0;
   display: block;
   width: 100%;
-  aspect-ratio: 1;
+  height: 100%;
   object-fit: cover;
 }
 
@@ -396,15 +505,24 @@
 }
 
 .powerhouse-shop__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
   padding-top: 0.75rem;
 }
 
 .powerhouse-shop__name {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
   margin: 0;
+  min-height: calc(1em * 1.35 * 2);
   font-family: var(--font-sans, inherit);
   font-size: 1rem;
   font-weight: 400;
-  line-height: 1.3;
+  line-height: 1.35;
 }
 
 .powerhouse-shop__name a {
@@ -414,6 +532,7 @@
 
 .powerhouse-shop__stock {
   margin: 0.35rem 0 0;
+  min-height: 1.2em;
   color: #688600;
   font-size: 0.8125rem;
 }
@@ -431,7 +550,8 @@
 }
 
 .powerhouse-shop__price {
-  margin-top: 0.4rem;
+  margin: 0 0 0.4rem;
+  min-height: 2.7rem;
 }
 
 .powerhouse-shop__compare {
@@ -455,22 +575,26 @@
 
 .powerhouse-shop__actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 0.45rem;
+  margin-top: auto;
+  padding-top: 0.75rem;
 }
 
 .powerhouse-shop__quickshop,
 .powerhouse-shop__atc {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   min-height: 2.5rem;
-  padding: 0.5rem 0.85rem;
+  padding: 0.5rem 0.65rem;
   border-radius: 2px;
+  box-sizing: border-box;
   font-family: var(--font-sans, inherit);
-  font-size: 0.8125rem;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
   text-decoration: none;
   cursor: pointer;
 }
@@ -536,40 +660,68 @@
 @media screen and (max-width: 859px) {
   .powerhouse-shop.is-filters-open .powerhouse-shop__sidebar,
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: fixed;
     inset: 0 auto 0 0;
-    z-index: 40;
-    width: min(22rem, 88vw);
-    padding: 1.25rem;
-    overflow: auto;
+    z-index: 80;
+    width: min(26.5rem, 100vw);
+    max-width: 100%;
+    padding: 0;
+    overflow: hidden;
     background: #fff;
-    box-shadow: 8px 0 24px rgb(0 0 0 / 12%);
+    box-shadow: 8px 0 28px rgb(0 0 0 / 18%);
+  }
+
+  .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+
+  .powerhouse-shop__layout.is-filters-open .powerhouse-shop__sidebar-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 0 1.15rem 2rem;
+    -webkit-overflow-scrolling: touch;
   }
 
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__close,
   .powerhouse-shop__layout.is-filters-open .powerhouse-shop__backdrop {
-    display: block;
+    display: flex;
   }
 
   .powerhouse-shop__backdrop {
     position: fixed;
     inset: 0;
-    z-index: 30;
+    z-index: 75;
     border: 0;
-    background: rgb(0 0 0 / 35%);
+    background: rgb(0 0 0 / 45%);
   }
 
   .powerhouse-shop__close {
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-right: -0.45rem;
     padding: 0;
     border: 0;
     background: none;
     color: #1d1d1d;
-    text-decoration: underline;
     cursor: pointer;
   }
 }
 
+@media screen and (max-width: 719px) {
+  .powerhouse-shop__crumbs,
+  .powerhouse-shop__masthead {
+    display: none;
+  }
+}
+
 @media screen and (min-width: 720px) {
   .powerhouse-shop {
     padding: 0 20px 4rem;
@@ -593,7 +745,6 @@
   }
 
   .powerhouse-shop__grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.75rem 20px;
   }
 
@@ -606,6 +757,13 @@
     gap: 1.5rem;
     padding: 1.5rem 0;
   }
+
+  .powerhouse-shop__sort select {
+    position: static;
+    opacity: 1;
+    width: auto;
+    min-width: 10.5rem;
+  }
 }
 
 @media screen and (min-width: 860px) {
@@ -621,6 +779,11 @@
     flex-shrink: 0;
   }
 
+  .powerhouse-shop__sidebar-head {
+    padding: 0 0 0.85rem;
+    border-bottom: 0;
+  }
+
   .powerhouse-shop__sidebar-head .powerhouse-shop__close,
   .powerhouse-shop__filters-btn {
     display: none;
@@ -641,10 +804,15 @@
 
   .powerhouse-shop__utils {
     justify-content: flex-end;
+    margin-top: 0.75rem;
+  }
+
+  .powerhouse-shop__view-label {
+    display: inline;
   }
 
   .powerhouse-shop__grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .powerhouse-shop__grid.is-list {
@@ -668,3 +836,13 @@
     pointer-events: auto;
   }
 }
+
+@media screen and (min-width: 1100px) {
+  .powerhouse-shop__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .powerhouse-shop__grid.is-list {
+    grid-template-columns: 1fr;
+  }
+}

package/src/shop.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useMemo, useState, type FormEvent } from "react"
+import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from "react"
 import { useRouter } from "next/navigation"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import ShopProductCard from "./product-card"
@@ -87,6 +87,22 @@ function buildParams(props: PowerhouseShopProps, extras: Record<string, string |
   return params
 }
 
+function FilterIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M4 6h16M7 12h10M10 18h4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square" />
+    </svg>
+  )
+}
+
+function SortIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M8 7V21M8 7L4.5 10.5M8 7L11.5 10.5M16 17V3M16 17L12.5 13.5M16 17L19.5 13.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square" />
+    </svg>
+  )
+}
+
 function GridIcon() {
   return (
     <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
@@ -157,6 +173,71 @@ function ActiveFilters({
   )
 }
 
+function colorSwatch(value?: string, label?: string) {
+  const raw = (value || label || "").trim()
+  if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(raw)) return raw
+  if (/^(rgb|hsl)a?\(/i.test(raw)) return raw
+  const named = raw.toLowerCase().replace(/[\s_-]+/g, "")
+  const map: Record<string, string> = {
+    black: "#111111",
+    white: "#ffffff",
+    red: "#c62828",
+    blue: "#1565c0",
+    green: "#2e7d32",
+    yellow: "#f1c40f",
+    pink: "#e91e63",
+    purple: "#6a1b9a",
+    orange: "#ef6c00",
+    brown: "#6d4c41",
+    grey: "#9e9e9e",
+    gray: "#9e9e9e",
+    gold: "#c9a86c",
+    beige: "#d7ccc8",
+    navy: "#1a237e",
+    maroon: "#7b1e3a",
+  }
+  return map[named] || null
+}
+
+function CloseIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M5 5L19 19M19 5L5 19" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square" />
+    </svg>
+  )
+}
+
+function FilterSection({
+  id,
+  title,
+  children,
+}: {
+  id: string
+  title: string
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(true)
+  return (
+    <div className={`powerhouse-shop__filter${open ? " is-open" : ""}`}>
+      <button
+        type="button"
+        className="powerhouse-shop__filter-toggle"
+        aria-expanded={open}
+        aria-controls={`filter-${id}`}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span>{title}</span>
+        <span className="powerhouse-shop__filter-icon" aria-hidden>
+          {open ? "−" : "+"}
+        </span>
+      </button>
+      <div id={`filter-${id}`} className="powerhouse-shop__filter-body" hidden={!open}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
 const VIEW_STORAGE_KEY = "powerhouse-shop-view"
 
 function paginationItems(current: number, total: number) {
@@ -197,6 +278,19 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
     setView(next)
   }, [])
 
+  useEffect(() => {
+    document.documentElement.classList.toggle("powerhouse-filters-open", filtersOpen)
+    if (!filtersOpen) return undefined
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setFiltersOpen(false)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => {
+      window.removeEventListener("keydown", onKey)
+      document.documentElement.classList.remove("powerhouse-filters-open")
+    }
+  }, [filtersOpen])
+
   const categories = (props.categories ?? []).filter((item) => item.id && (item.name || item.handle))
   const collections = (props.collections ?? []).filter((item) => item.id && (item.title || item.handle))
   const types = props.typeOptions?.filter((item) => item.value && item.label) ?? []
@@ -307,120 +401,142 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
         <aside className="powerhouse-shop__sidebar" aria-label="Filters">
           <div className="powerhouse-shop__sidebar-head">
             <h2>Filters</h2>
-            <button type="button" className="powerhouse-shop__close" onClick={() => setFiltersOpen(false)}>
-              Close
+            <button
+              type="button"
+              className="powerhouse-shop__close"
+              aria-label="Close filters"
+              onClick={() => setFiltersOpen(false)}
+            >
+              <CloseIcon />
             </button>
           </div>
 
-          <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
-
-          {categories.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Product type</h3>
-              <ul>
-                {categories.map((item) => {
-                  const value = item.id
-                  const selected = activeCategory === value || activeCategory === item.handle
-                  return (
-                    <li key={value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "category", value, selected ? value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.name || item.handle}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {collections.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Collection</h3>
-              <ul>
-                {collections.map((item) => {
-                  const value = item.id
-                  const selected = activeCollection === value || activeCollection === item.handle
-                  return (
-                    <li key={value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "collection", value, selected ? value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.title || item.handle}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {types.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Type</h3>
-              <ul>
-                {types.map((item) => {
-                  const selected = activeType === item.value
-                  return (
-                    <li key={item.value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "type", item.value, selected ? item.value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.label}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          {colors.length ? (
-            <div className="powerhouse-shop__filter">
-              <h3>Colors</h3>
-              <ul>
-                {colors.map((item) => {
-                  const selected = activeColor === item.value
-                  return (
-                    <li key={item.value}>
-                      <LocalizedLink
-                        href={toggleFilter(propsWithView, "color", item.value, selected ? item.value : undefined)}
-                        countryCode={countryCode}
-                        className={selected ? "is-active" : undefined}
-                      >
-                        <span className="powerhouse-shop__check" aria-hidden />
-                        {item.label}
-                      </LocalizedLink>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          ) : null}
-
-          <div className="powerhouse-shop__filter">
-            <h3>Price</h3>
-            <form className="powerhouse-shop__price-form" onSubmit={handlePrice}>
-              <label>
-                <span>From</span>
-                <input name="min_price" type="number" min={0} defaultValue={props.minPrice || ""} inputMode="decimal" />
-              </label>
-              <label>
-                <span>To</span>
-                <input name="max_price" type="number" min={0} defaultValue={props.maxPrice || ""} inputMode="decimal" />
-              </label>
-              <button type="submit">Apply</button>
-            </form>
+          <div className="powerhouse-shop__sidebar-body">
+            <ActiveFilters filters={applied} clearHref={clearHref} countryCode={countryCode} />
+
+            {categories.length ? (
+              <FilterSection id="product-type" title="Product type">
+                <ul>
+                  {categories.map((item) => {
+                    const value = item.id
+                    const selected = activeCategory === value || activeCategory === item.handle
+                    return (
+                      <li key={value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "category", value, selected ? value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.name || item.handle}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {collections.length ? (
+              <FilterSection id="collection" title="Collection">
+                <ul>
+                  {collections.map((item) => {
+                    const value = item.id
+                    const selected = activeCollection === value || activeCollection === item.handle
+                    return (
+                      <li key={value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "collection", value, selected ? value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.title || item.handle}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {types.length ? (
+              <FilterSection id="type" title="Type">
+                <ul>
+                  {types.map((item) => {
+                    const selected = activeType === item.value
+                    return (
+                      <li key={item.value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "type", item.value, selected ? item.value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                        >
+                          <span className="powerhouse-shop__check" aria-hidden />
+                          {item.label}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            {colors.length ? (
+              <FilterSection id="colors" title="Colors">
+                <ul className="powerhouse-shop__swatches">
+                  {colors.map((item) => {
+                    const selected = activeColor === item.value
+                    const swatch = colorSwatch(item.value, item.label)
+                    return (
+                      <li key={item.value}>
+                        <LocalizedLink
+                          href={toggleFilter(propsWithView, "color", item.value, selected ? item.value : undefined)}
+                          countryCode={countryCode}
+                          className={selected ? "is-active" : undefined}
+                          aria-label={item.label}
+                        >
+                          {swatch ? (
+                            <span className="powerhouse-shop__swatch" style={{ background: swatch }} aria-hidden />
+                          ) : (
+                            <span className="powerhouse-shop__check" aria-hidden />
+                          )}
+                          {swatch ? <span className="sr-only">{item.label}</span> : item.label}
+                        </LocalizedLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </FilterSection>
+            ) : null}
+
+            <FilterSection id="price" title="Price">
+              <form className="powerhouse-shop__price-form" onSubmit={handlePrice}>
+                <label className="powerhouse-shop__price-field">
+                  <span>₹</span>
+                  <input
+                    name="min_price"
+                    type="number"
+                    min={0}
+                    defaultValue={props.minPrice || ""}
+                    inputMode="decimal"
+                    placeholder="From"
+                  />
+                </label>
+                <label className="powerhouse-shop__price-field">
+                  <span>₹</span>
+                  <input
+                    name="max_price"
+                    type="number"
+                    min={0}
+                    defaultValue={props.maxPrice || ""}
+                    inputMode="decimal"
+                    placeholder="To"
+                  />
+                </label>
+                <button type="submit">Apply</button>
+              </form>
+            </FilterSection>
           </div>
         </aside>
 
@@ -446,12 +562,14 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
           )}
 
           <div className="powerhouse-shop__utils">
-            <button type="button" className="powerhouse-shop__filters-btn" onClick={() => setFiltersOpen(true)}>
-              {applied.length ? `Filters (${applied.length})` : "Filters"}
-            </button>
-            <div className="powerhouse-shop__utils-right">
+            <div className="powerhouse-shop__utils-left">
+              <button type="button" className="powerhouse-shop__filters-btn" onClick={() => setFiltersOpen(true)}>
+                <FilterIcon />
+                {applied.length ? `Filters (${applied.length})` : "Filters"}
+              </button>
               <label className="powerhouse-shop__sort">
-                <span className="powerhouse-shop__utils-label">Sort</span>
+                <SortIcon />
+                <span className="powerhouse-shop__utils-label">Sort by</span>
                 <select value={sortBy} onChange={(event) => handleSort(event.target.value)} aria-label="Sort products">
                   {SORT_OPTIONS.map((option) => (
                     <option key={option.value} value={option.value}>
@@ -460,27 +578,27 @@ export default function PowerhouseShop(props: PowerhouseShopProps) {
                   ))}
                 </select>
               </label>
-              <div className="powerhouse-shop__view" role="group" aria-label="View as">
-                <span className="powerhouse-shop__utils-label">View as</span>
-                <button
-                  type="button"
-                  className={view === "grid" ? "is-active" : undefined}
-                  aria-label="Grid view"
-                  aria-pressed={view === "grid"}
-                  onClick={() => handleView("grid")}
-                >
-                  <GridIcon />
-                </button>
-                <button
-                  type="button"
-                  className={view === "list" ? "is-active" : undefined}
-                  aria-label="List view"
-                  aria-pressed={view === "list"}
-                  onClick={() => handleView("list")}
-                >
-                  <ListIcon />
-                </button>
-              </div>
+            </div>
+            <div className="powerhouse-shop__view" role="group" aria-label="View as">
+              <span className="powerhouse-shop__utils-label powerhouse-shop__view-label">View as</span>
+              <button
+                type="button"
+                className={view === "grid" ? "is-active" : undefined}
+                aria-label="Grid view"
+                aria-pressed={view === "grid"}
+                onClick={() => handleView("grid")}
+              >
+                <GridIcon />
+              </button>
+              <button
+                type="button"
+                className={view === "list" ? "is-active" : undefined}
+                aria-label="List view"
+                aria-pressed={view === "list"}
+                onClick={() => handleView("list")}
+              >
+                <ListIcon />
+              </button>
             </div>
           </div>