@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/store/components/pagination/index.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+export function Pagination({
+  page,
+  totalPages,
+  'data-testid': dataTestid
+}: {
+  page: number
+  totalPages: number
+  'data-testid'?: string
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(searchParams)
+    params.set("page", newPage.toString())
+    router.push(`${pathname}?${params.toString()}`)
+    // Scroll to top smoothly
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
+  // Generate page numbers to display
+  const getPageNumbers = (): (number | "ellipsis")[] => {
+    const pages: (number | "ellipsis")[] = []
+
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else if (page <= 3) {
+      pages.push(1, 2, 3, 4, "ellipsis", totalPages)
+    } else if (page >= totalPages - 2) {
+      pages.push(1, "ellipsis", totalPages - 3, totalPages - 2, totalPages - 1, totalPages)
+    } else {
+      pages.push(1, "ellipsis", page - 1, page, page + 1, "ellipsis", totalPages)
+    }
+
+    return pages
+  }
+
+  const pageNumbers = getPageNumbers()
+
+  return (
+    <div className="flex flex-col items-center gap-5 mt-12 mb-4" data-testid={dataTestid}>
+      {/* Page Info */}
+      <p className="text-sm text-gray-400 font-medium tracking-wide">
+        Page <span className="text-gray-800 font-bold">{page}</span> of <span className="text-gray-800 font-bold">{totalPages}</span>
+      </p>
+
+      {/* Pagination Controls */}
+      <div className="flex items-center gap-1.5 sm:gap-2">
+        {/* Previous Button */}
+        <button
+          onClick={() => handlePageChange(page - 1)}
+          disabled={page <= 1}
+          className="group flex items-center justify-center w-10 h-10 sm:w-11 sm:h-11 rounded-xl border border-gray-200 bg-white text-gray-500 transition-all duration-200 hover:border-[#8B5AB1] hover:text-[#8B5AB1] hover:shadow-md hover:shadow-purple-100/50 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:hover:text-gray-400 disabled:hover:shadow-none"
+          aria-label="Previous page"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:-translate-x-0.5">
+            <path d="M15 18l-6-6 6-6" />
+          </svg>
+        </button>
+
+        {/* Page Numbers */}
+        <div className="flex items-center gap-1 sm:gap-1.5">
+          {pageNumbers.map((p, idx) => {
+            if (p === "ellipsis") {
+              return (
+                <span
+                  key={`ellipsis-${idx}`}
+                  className="w-8 h-10 sm:w-10 sm:h-11 flex items-center justify-center text-gray-300 text-lg font-medium select-none"
+                >
+                  •••
+                </span>
+              )
+            }
+
+            const isCurrent = p === page
+
+            return (
+              <button
+                key={p}
+                onClick={() => handlePageChange(p)}
+                disabled={isCurrent}
+                className={`
+                  relative w-10 h-10 sm:w-11 sm:h-11 rounded-xl text-sm font-bold transition-all duration-200
+                  ${isCurrent
+                    ? "bg-[#8B5AB1] text-white shadow-lg shadow-[#8B5AB1]/30 scale-105 cursor-default"
+                    : "bg-white border border-gray-200 text-gray-600 hover:border-[#8B5AB1] hover:text-[#8B5AB1] hover:bg-purple-50/50 hover:shadow-sm"
+                  }
+                `}
+              >
+                {p}
+                {isCurrent && (
+                  <span className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 w-4 h-1 bg-[#8B5AB1] rounded-full opacity-60" />
+                )}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Next Button */}
+        <button
+          onClick={() => handlePageChange(page + 1)}
+          disabled={page >= totalPages}
+          className="group flex items-center justify-center w-10 h-10 sm:w-11 sm:h-11 rounded-xl border border-gray-200 bg-white text-gray-500 transition-all duration-200 hover:border-[#8B5AB1] hover:text-[#8B5AB1] hover:shadow-md hover:shadow-purple-100/50 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:border-gray-200 disabled:hover:text-gray-400 disabled:hover:shadow-none"
+          aria-label="Next page"
+        >
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-0.5">
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/store/components/product-list-view-tracker/index.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { useEffect } from "react"
+import { trackViewItemList } from "@core/analytics/ga4-ecommerce"
+
+type ProductListViewTrackerProps = {
+  products: Array<{
+    id: string
+    title?: string
+    variants?: Array<{
+      id: string
+      calculated_price?: { calculated_amount?: number; currency_code?: string }
+    }>
+  }>
+  listId?: string
+  listName?: string
+}
+
+export default function ProductListViewTracker({
+  products,
+  listId,
+  listName,
+}: ProductListViewTrackerProps) {
+  useEffect(() => {
+    if (!products?.length) return
+
+    const items = products.map((p, index) => {
+      const variant = p.variants?.[0]
+      const unitPrice = (variant as any)?.calculated_price?.calculated_amount ?? 0
+      return {
+        item_id: variant?.id ?? p.id,
+        item_name: p.title ?? "",
+        price: unitPrice / 100,
+        quantity: 1,
+        index,
+      }
+    })
+
+    trackViewItemList({ list_id: listId, list_name: listName, items })
+  }, [products, listId, listName])
+
+  return null
+}

package/templates/storefront/src/modules/store/components/refinement-list/index.tsx

@@ -0,0 +1,299 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useCallback, useState, useEffect, useTransition } from "react"
+import { HttpTypes } from "@medusajs/types"
+import { SortOptions } from "./sort-products"
+import FilterCheckboxGroup from "@modules/common/components/filter-checkbox-group"
+
+type RefinementListProps = {
+  sortBy: SortOptions
+  search?: boolean
+  'data-testid'?: string
+  collections?: HttpTypes.StoreCollection[]
+  collectionValue?: string | string[]
+  genderValue?: string | string[]
+  typeValue?: string | string[]
+  materialValue?: string | string[]
+  colorValue?: string | string[]
+  categoryValue?: string | string[]
+  minPrice?: string
+  maxPrice?: string
+  genderOptions?: { value: string; label: string }[]
+  typeOptions?: { value: string; label: string }[]
+  materialOptions?: { value: string; label: string }[]
+  colorOptions?: { value: string; label: string }[]
+  categoryOptions?: { value: string; label: string }[]
+  hideTitle?: boolean
+  q?: string
+}
+
+const RefinementList = ({
+  sortBy,
+  'data-testid': dataTestId,
+  collections,
+  collectionValue,
+  categoryValue,
+  genderValue,
+  typeValue,
+  materialValue,
+  colorValue,
+  minPrice,
+  maxPrice,
+  genderOptions,
+  typeOptions,
+  materialOptions,
+  colorOptions,
+  categoryOptions,
+  hideTitle = false,
+  q,
+}: RefinementListProps) => {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [isPending, startTransition] = useTransition()
+
+  const [minPriceLocal, setMinPriceLocal] = useState(parseInt(minPrice || "0"))
+  const [maxPriceLocal, setMaxPriceLocal] = useState(parseInt(maxPrice || "10000"))
+
+  useEffect(() => {
+    setMinPriceLocal(parseInt(minPrice || "0"))
+    setMaxPriceLocal(parseInt(maxPrice || "10000"))
+  }, [minPrice, maxPrice])
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      if (value) {
+        params.set(name, value)
+      } else {
+        params.delete(name)
+      }
+
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  const setQueryParams = (name: string, value: string) => {
+    const query = createQueryString(name, value)
+    startTransition(() => {
+      router.replace(`${pathname}?${query}`, { scroll: false })
+    })
+  }
+
+  const handleFilterChange = (name: string, currentValues: string | string[] | undefined, value: string) => {
+    let values: string[] = []
+    if (typeof currentValues === "string") {
+      values = currentValues.split(",").filter(Boolean)
+    } else if (Array.isArray(currentValues)) {
+      values = currentValues
+    }
+
+    const newValues = values.includes(value)
+      ? values.filter((v) => v !== value)
+      : [...values, value]
+
+    setQueryParams(name, newValues.join(","))
+  }
+
+  const handlePriceApply = () => {
+    const params = new URLSearchParams(searchParams)
+    params.set("min_price", minPriceLocal.toString())
+    params.set("max_price", maxPriceLocal.toString())
+    startTransition(() => {
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+    })
+  }
+
+  const clearAllFilters = () => {
+    const params = new URLSearchParams(searchParams)
+    params.delete("collection")
+    params.delete("category")
+    params.delete("gender")
+    params.delete("type")
+    params.delete("material")
+    params.delete("color")
+    params.delete("min_price")
+    params.delete("max_price")
+    params.delete("q")
+    startTransition(() => {
+      router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+    })
+  }
+
+  const hasFilters = !!(collectionValue || categoryValue || genderValue || typeValue || materialValue || colorValue || minPrice || maxPrice || q)
+
+  return (
+    <div className={`bg-white rounded-lg p-6 shadow-sm border border-gray-200 flex flex-col gap-y-8 transition-opacity duration-75 ${isPending ? 'opacity-90 pointer-events-none' : 'opacity-100'}`}>
+      {!hideTitle && (
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-bold text-gray-900 uppercase tracking-tight">FILTERS</h2>
+          {hasFilters && (
+            <button
+              onClick={clearAllFilters}
+              className="text-xs font-semibold text-[#8B5AB1] hover:opacity-80 uppercase tracking-wider transition-colors"
+              data-ga-event="filter_clear_all_click"
+              data-ga-label="Clear All Filters"
+            >
+              Clear All
+            </button>
+          )}
+        </div>
+      )}
+
+      {hideTitle && hasFilters && (
+        <div className="flex justify-end">
+          <button
+            onClick={clearAllFilters}
+            className="text-xs font-semibold text-[#8B5AB1] hover:opacity-80 uppercase tracking-wider transition-colors"
+            data-ga-event="filter_clear_all_click"
+            data-ga-label="Clear All Filters"
+          >
+            Clear All
+          </button>
+        </div>
+      )}
+
+      {/* SORT BY component has been removed as per requirement */}
+
+      {collections && collections.length > 0 && (
+        <FilterCheckboxGroup
+          title="Age Group"
+          items={collections.map(c => ({ value: c.id, label: c.title || "" }))}
+          values={typeof collectionValue === 'string' ? collectionValue.split(',') : collectionValue || []}
+          handleChange={(v) => handleFilterChange('collection', collectionValue, v)}
+        />
+      )}
+
+      {categoryOptions && categoryOptions.length > 0 && (
+        <FilterCheckboxGroup
+          title="Category"
+          items={categoryOptions}
+          values={typeof categoryValue === 'string' ? categoryValue.split(',') : categoryValue || []}
+          handleChange={(v) => handleFilterChange('category', categoryValue, v)}
+        />
+      )}
+
+      {genderOptions && genderOptions.length > 0 && (
+        <FilterCheckboxGroup
+          title="Gender"
+          items={genderOptions}
+          values={typeof genderValue === 'string' ? genderValue.split(',') : genderValue || []}
+          handleChange={(v) => handleFilterChange('gender', genderValue, v)}
+        />
+      )}
+
+      {typeOptions && typeOptions.length > 0 && (
+        <FilterCheckboxGroup
+          title="Product Type"
+          items={typeOptions}
+          values={typeof typeValue === 'string' ? typeValue.split(',') : typeValue || []}
+          handleChange={(v) => handleFilterChange('type', typeValue, v)}
+        />
+      )}
+
+      {colorOptions && colorOptions.length > 0 && (
+        <FilterCheckboxGroup
+          title="Color"
+          items={colorOptions}
+          values={typeof colorValue === 'string' ? colorValue.split(',') : colorValue || []}
+          handleChange={(v) => handleFilterChange('color', colorValue, v)}
+          isColor={true}
+        />
+      )}
+
+      {materialOptions && materialOptions.length > 0 && (
+        <FilterCheckboxGroup
+          title="Material"
+          items={materialOptions}
+          values={typeof materialValue === 'string' ? materialValue.split(',') : materialValue || []}
+          handleChange={(v) => handleFilterChange('material', materialValue, v)}
+        />
+      )}
+
+      {/* Price Range Filter */}
+      <div className="flex flex-col border-b border-gray-100 pb-4 last:border-0 last:pb-0">
+        <div className="flex items-center justify-between w-full py-1">
+          <h3 className="text-sm font-bold text-gray-900 uppercase tracking-wider">Price</h3>
+        </div>
+        <div className="mt-6 px-2">
+          <div
+            className="relative h-1.5 w-full bg-gray-200 rounded-full cursor-pointer"
+            onClick={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect()
+              const x = e.clientX - rect.left
+              const percentage = Math.max(0, Math.min(1, x / rect.width))
+              const value = Math.round((percentage * 10000) / 100) * 100
+
+              if (Math.abs(value - minPriceLocal) < Math.abs(value - maxPriceLocal)) {
+                setMinPriceLocal(Math.min(value, maxPriceLocal - 500))
+              } else {
+                setMaxPriceLocal(Math.max(value, minPriceLocal + 500))
+              }
+            }}
+          >
+            <div
+              className="absolute h-full bg-[#8B5AB1] rounded-full"
+              style={{
+                left: `${(minPriceLocal / 10000) * 100}%`,
+                right: `${100 - (maxPriceLocal / 10000) * 100}%`
+              }}
+            />
+            <input
+              type="range"
+              min="0"
+              max="10000"
+              step="100"
+              value={minPriceLocal}
+              onChange={(e) => setMinPriceLocal(Math.min(parseInt(e.target.value), maxPriceLocal - 500))}
+              className={`absolute pointer-events-none appearance-none w-full h-1.5 bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-[#8B5AB1] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#8B5AB1] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-lg ${minPriceLocal > 5000 ? 'z-10' : 'z-20'}`}
+              onClick={(e) => e.stopPropagation()}
+            />
+            <input
+              type="range"
+              min="0"
+              max="10000"
+              step="100"
+              value={maxPriceLocal}
+              onChange={(e) => setMaxPriceLocal(Math.max(parseInt(e.target.value), minPriceLocal + 500))}
+              className={`absolute pointer-events-none appearance-none w-full h-1.5 bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-[#8B5AB1] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#8B5AB1] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-lg ${minPriceLocal > 5000 ? 'z-20' : 'z-10'}`}
+              onClick={(e) => e.stopPropagation()}
+            />
+          </div>
+          <div className="mt-6 flex items-center justify-between text-sm font-medium text-gray-700">
+            <span>₹{minPriceLocal.toLocaleString()}</span>
+            <span>₹{maxPriceLocal.toLocaleString()}+</span>
+          </div>
+          <div className="mt-4 flex gap-2">
+            <button
+              onClick={handlePriceApply}
+              className="flex-1 bg-[#8B5AB1] text-white py-1.5 rounded text-xs font-bold hover:bg-opacity-90 transition-all border-none outline-none"
+              data-ga-event="filter_price_apply_click"
+              data-ga-label="Apply Price Filter"
+            >
+              APPLY
+            </button>
+            <button
+              onClick={() => {
+                const params = new URLSearchParams(searchParams)
+                params.delete("min_price")
+                params.delete("max_price")
+                startTransition(() => {
+                  router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+                })
+              }}
+              className="px-3 border border-gray-200 py-1.5 rounded text-xs font-bold text-gray-500 hover:bg-gray-50 transition-all outline-none"
+              data-ga-event="filter_price_reset_click"
+              data-ga-label="Reset Price Filter"
+            >
+              RESET
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RefinementList

package/templates/storefront/src/modules/store/components/refinement-list/sort-products/index.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react"
+import { Fragment, useMemo } from "react"
+import ChevronDown from "@modules/common/icons/chevron-down"
+import { clx } from "@medusajs/ui"
+
+export type SortOptions = "price_asc" | "price_desc" | "created_at_desc" | "created_at_asc" | "bestsellers" | "created_at"
+
+type SortProductsProps = {
+  sortBy: SortOptions
+  setQueryParams: (name: string, value: SortOptions) => void
+  "data-testid"?: string
+}
+
+const sortOptions = [
+  {
+    value: "created_at_desc",
+    label: "Latest Arrivals",
+  },
+  {
+    value: "created_at_asc",
+    label: "Oldest First",
+  },
+  {
+    value: "price_asc",
+    label: "Price: Low to High",
+  },
+  {
+    value: "price_desc",
+    label: "Price: High to Low",
+  },
+  {
+    value: "bestsellers",
+    label: "Bestsellers",
+  },
+]
+
+const SortProducts = ({
+  "data-testid": dataTestId,
+  sortBy,
+  setQueryParams,
+}: SortProductsProps) => {
+  const handleChange = (value: string) => {
+    setQueryParams("sortBy", value as SortOptions)
+  }
+
+  const selectedOption = useMemo(() => {
+    return sortOptions.find((o) => o.value === sortBy) || sortOptions[0]
+  }, [sortBy])
+
+  return (
+    <div className="flex items-center w-full lg:w-auto">
+      <Listbox value={sortBy} onChange={handleChange}>
+        <div className="relative w-full">
+          <ListboxButton
+            className={clx(
+              "relative cursor-pointer rounded-full bg-white py-1.5 px-8 border transition-all duration-300 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.1)] hover:bg-gray-50 hover:border-[#8B5AB1]/40 focus:outline-none focus:ring-2 focus:ring-[#8B5AB1]/20 focus:border-[#8B5AB1]",
+              "border-gray-200 w-full min-[450px]:w-auto flex items-center justify-center"
+            )}
+            data-testid={dataTestId}
+          >
+            <span className="flex items-center gap-1 truncate uppercase">
+              <span className="font-bold text-gray-400 text-[10px] tracking-wider whitespace-nowrap">Sort:</span>
+              <span className="text-sm font-bold text-gray-900 tracking-wider truncate">{selectedOption.label}</span>
+            </span>
+            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+              <ChevronDown
+                className="w-4 h-4 text-gray-400 transition-transform duration-300 ui-open:rotate-180 ui-open:text-[#8B5AB1]"
+                aria-hidden="true"
+              />
+            </span>
+          </ListboxButton>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1 scale-95"
+            enterTo="opacity-100 translate-y-0 scale-100"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0 scale-100"
+            leaveTo="opacity-0 translate-y-1 scale-95"
+          >
+            <ListboxOptions className="absolute right-0 z-[100] mt-2 max-h-60 w-[200px] overflow-auto rounded-2xl bg-white py-2 text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm border border-gray-100">
+              {sortOptions.map((option, idx) => (
+                <ListboxOption
+                  key={idx}
+                  className={({ active, selected }) =>
+                    clx(
+                      "relative cursor-pointer select-none py-2.5 px-4 transition-colors mx-1.5 rounded-xl mb-0.5 last:mb-0",
+                      active ? "bg-purple-50 text-[#8B5AB1]" : "text-gray-900",
+                      selected ? "bg-purple-50/50" : ""
+                    )
+                  }
+                  value={option.value}
+                >
+                  {({ selected }) => (
+                    <div className="flex items-center justify-between">
+                      <span className={clx("block truncate", selected ? "font-bold text-[#8B5AB1]" : "font-medium")}>
+                        {option.label}
+                      </span>
+                      {selected && (
+                        <span className="text-[#8B5AB1]">
+                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="20 6 9 17 4 12"></polyline>
+                          </svg>
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  )
+}
+
+export default SortProducts

package/templates/storefront/src/modules/store/components/store-header/index.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useCallback, useTransition } from "react"
+import { clx } from "@medusajs/ui"
+import SortProducts, { SortOptions } from "../refinement-list/sort-products"
+import MobileFilters from "../mobile-filters"
+
+type StoreHeaderProps = {
+  sortBy: SortOptions
+  productCount?: number
+  q?: string
+  filterProps?: Record<string, unknown>
+}
+
+export default function StoreHeader({
+  sortBy,
+  productCount,
+  filterProps,
+}: StoreHeaderProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [isPending, startTransition] = useTransition()
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams)
+      params.set(name, value)
+      return params.toString()
+    },
+    [searchParams]
+  )
+
+  const setQueryParams = (name: string, value: string) => {
+    const query = createQueryString(name, value)
+    startTransition(() => {
+      router.replace(`${pathname}?${query}`, { scroll: false })
+    })
+  }
+
+  return (
+    <div
+      className={clx(
+        "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 pb-6 border-b border-[var(--color-header-border)] transition-opacity duration-200",
+        isPending ? "opacity-50 pointer-events-none" : "opacity-100"
+      )}
+    >
+      {productCount !== undefined && (
+        <p className="text-sm text-[var(--color-text-muted)]">
+          <span className="font-semibold text-heading">{productCount}</span> products
+        </p>
+      )}
+
+      <div className="flex items-center gap-3 lg:hidden w-full sm:w-auto">
+        {filterProps && <MobileFilters {...filterProps} hideMargin={true} />}
+      </div>
+
+      <div className="flex items-center gap-3 ml-auto">
+        <span className="hidden lg:inline text-xs uppercase tracking-[var(--letter-spacing-nav)] text-[var(--color-text-muted)]">
+          Sort by
+        </span>
+        <SortProducts sortBy={sortBy} setQueryParams={setQueryParams} />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/store/templates/index.tsx

@@ -0,0 +1 @@
+export { default } from "@theme/templates/StorePage"