diff --git a/starters/shopify-algolia/app/ai-search/_components/ai-chat-sidebar.tsx b/starters/shopify-algolia/app/(ai-browse)/_components/ai-chat.tsx
similarity index 52%
rename from starters/shopify-algolia/app/ai-search/_components/ai-chat-sidebar.tsx
rename to starters/shopify-algolia/app/(ai-browse)/_components/ai-chat.tsx
index 718c4b19..de48d5eb 100644
--- a/starters/shopify-algolia/app/ai-search/_components/ai-chat-sidebar.tsx
+++ b/starters/shopify-algolia/app/(ai-browse)/_components/ai-chat.tsx
@@ -1,24 +1,22 @@
 "use client"
 
 import * as React from "react"
-
-import { ShoppingBag, ShoppingCart, ArrowUpIcon } from "lucide-react"
-
+import { ShoppingBag, ShoppingCart } from "lucide-react"
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "components/ui/sidebar"
-import { Button } from "components/ui/button"
 import { ScrollArea } from "components/ui/scroll-area"
 import { Textarea } from "components/ui/textarea"
 import { toast } from "sonner"
 import { cn } from "utils/cn"
-import { StopIcon } from "components/icons/stop-icon"
-import { sanitizeUIMessages } from "lib/ai/chat"
 import { MessageList } from "components/ui/message-list"
+import { useAiCommerce } from "./ai-commerce-context"
+import { Suggestions } from "./chat-suggestions"
 
-export function AiCommerceSidebar({ handleSubmit, setInput, messages, isLoading, input, setMessages }) {
+export function AiCommerceSidebar() {
+  const { handleSubmit, setInput, messages, isLoading, input } = useAiCommerce()
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
 
-  const handleSubmitForm = () => {
-    handleSubmit()
+  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    handleSubmit(e)
   }
 
   const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -51,69 +49,53 @@ export function AiCommerceSidebar({ handleSubmit, setInput, messages, isLoading,
 
   return (
     <Sidebar variant="inset">
-      <SidebarHeader className="p-4">
-        <h2 className="text-lg font-semibold text-sidebar-foreground">AI Shopping Assistant</h2>
+      <SidebarHeader className="border-b border-border px-4 py-2">
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <div className="flex w-full items-center justify-center">
+              <span className="font-semibold">AI-Commerce</span>
+            </div>
+          </SidebarMenuItem>
+        </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
-        <ScrollArea className="h-[calc(100vh-12rem)] px-4">
+        <ScrollArea className="px-4">
           <div className="flex flex-col space-y-4">
             <MessageList
-              messages={messages.filter((message) => !!message.content)}
+              messages={messages}
               showTimeStamps={false}
               isTyping={isLoading && messages[messages.length - 1].role === "user" && messages.length > 0}
-              messageOptions={{ animation: "scale", showTimeStamp: true, showToolMessages: false }}
+              messageOptions={{ animation: "scale", showTimeStamp: true }}
             />
           </div>
         </ScrollArea>
       </SidebarContent>
       <SidebarFooter className="p-4">
-        <div className="flex items-center space-x-2">
-          <Textarea
-            ref={textareaRef}
-            placeholder="Send a message..."
-            value={input}
-            onChange={handleInput}
-            className={cn("max-h-[calc(75dvh)] min-h-[24px] resize-none overflow-hidden rounded-xl bg-muted text-base")}
-            rows={3}
-            autoFocus
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && !event.shiftKey) {
-                event.preventDefault()
+        <form>
+          <div className="flex items-center space-x-2">
+            <Textarea
+              ref={textareaRef}
+              placeholder="Send a message..."
+              value={input}
+              onChange={handleInput}
+              className={cn("max-h-[calc(50dvh)] min-h-[24px] resize-none overflow-hidden rounded-xl bg-muted text-base")}
+              rows={3}
+              autoFocus
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                  event.preventDefault()
 
-                if (isLoading) {
-                  toast.error("Please wait for the model to finish its response!")
-                } else {
-                  handleSubmitForm()
+                  if (isLoading) {
+                    toast.error("Please wait for the model to finish its response!")
+                  } else {
+                    handleSubmitForm(event as unknown as React.FormEvent<HTMLFormElement>)
+                  }
                 }
-              }
-            }}
-          />
-        </div>
-        <div className="z-50">
-          {isLoading ? (
-            <Button
-              className="absolute bottom-2 right-2 m-0.5 h-fit rounded-full border p-1.5 dark:border-zinc-600"
-              onClick={(event) => {
-                event.preventDefault()
-                stop()
-                setMessages((messages) => sanitizeUIMessages(messages))
-              }}
-            >
-              <StopIcon size={20} />
-            </Button>
-          ) : (
-            <Button
-              className="absolute bottom-2 right-2 m-0.5 h-fit rounded-full border p-1.5 dark:border-zinc-600"
-              onClick={(event) => {
-                event.preventDefault()
-                handleSubmitForm()
               }}
-              disabled={input.length === 0}
-            >
-              <ArrowUpIcon size={14} />
-            </Button>
-          )}
-        </div>
+            />
+          </div>
+          <Suggestions />
+        </form>
         <SidebarMenu className="mt-4">
           <SidebarMenuItem>
             <SidebarMenuButton className="w-full justify-start text-sidebar-foreground transition-all hover:scale-105 hover:bg-sidebar-accent hover:text-secondary-foreground">
diff --git a/starters/shopify-algolia/app/(ai-browse)/_components/ai-commerce-context.tsx b/starters/shopify-algolia/app/(ai-browse)/_components/ai-commerce-context.tsx
new file mode 100644
index 00000000..44bb4b6c
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/_components/ai-commerce-context.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import * as React from "react"
+import type { ChatRequestOptions, CreateMessage, Message } from "ai"
+import { useChat } from "ai/react"
+
+interface AiCommerceContextType {
+  messages: Message[]
+  append: (message: Message | CreateMessage, chatRequestOptions?: ChatRequestOptions) => Promise<string | null | undefined>
+  input: string
+  isLoading: boolean
+  handleSubmit: (e?: { preventDefault: () => void }) => void
+  setInput: (value: string) => void
+}
+
+const AiCommerceContext = React.createContext<AiCommerceContextType | undefined>(undefined)
+
+export function useAiCommerce() {
+  const context = React.useContext(AiCommerceContext)
+  if (!context) {
+    throw new Error("useAiCommerce must be used within an AiCommerceProvider")
+  }
+  return context
+}
+
+interface AiCommerceProviderProps {
+  children: React.ReactNode
+}
+
+export function AiCommerceProvider({ children }: AiCommerceProviderProps) {
+  const { append, messages, input, handleSubmit, setInput, isLoading } = useChat({
+    api: "/api/search",
+    maxSteps: 10,
+  })
+
+  const value = React.useMemo(
+    () => ({
+      messages,
+      input,
+      isLoading,
+      handleSubmit,
+      setInput,
+      append,
+    }),
+    [messages, input, isLoading, handleSubmit, setInput]
+  )
+
+  return <AiCommerceContext.Provider value={value}>{children}</AiCommerceContext.Provider>
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/_components/chat-suggestions.tsx b/starters/shopify-algolia/app/(ai-browse)/_components/chat-suggestions.tsx
new file mode 100644
index 00000000..93599b65
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/_components/chat-suggestions.tsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import { useChat } from "ai/react"
+import { toast } from "sonner"
+import { useAiCommerce } from "./ai-commerce-context"
+import { PromptSuggestion, PromptSuggestions } from "components/ui/prompt-suggestions"
+
+const INIT_SUGGESTIONS = ["Show me electronics under 250$", "Show me best-selling lips", "What are current products on sale?", "I'm looking for sportswear"]
+
+export function Suggestions() {
+  const { isLoading, append, messages } = useAiCommerce()
+  const [currentSuggestions, setCurrentSuggestions] = useState<string[]>(INIT_SUGGESTIONS)
+  const { data: streamingData, append: appendSuggestions } = useChat({
+    api: "/api/suggestions",
+  })
+
+  useEffect(() => {
+    if (!streamingData) return
+
+    const newSuggestions = streamingData.filter((message: any) => message.type === "suggestion" && message.content.content).map((message: any) => message.content.content)
+
+    if (newSuggestions.length > 0) {
+      // Start from an empty array and take up to 5 new suggestions
+      setCurrentSuggestions(newSuggestions.slice(newSuggestions.length - 5))
+    }
+  }, [streamingData])
+
+  const handleClick = (suggestion: string) => {
+    if (isLoading) {
+      toast.error("Please wait for the model to finish its response!")
+      return
+    }
+
+    append({ role: "user", content: suggestion })
+    appendSuggestions({
+      role: "user",
+      content: messages
+        .filter((message) => message.role === "user")
+        .map((message) => message.content)
+        .join(""),
+    })
+    // Clear current suggestions after clicking
+    setCurrentSuggestions([])
+  }
+
+  return (
+    <PromptSuggestions className="my-4">
+      {currentSuggestions.map((suggestion, index) => (
+        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 20 }} transition={{ delay: 0.1 * index }} key={`suggestion-${index}`}>
+          <PromptSuggestion disabled={isLoading} value={suggestion} onClick={() => handleClick(suggestion)}>
+            {suggestion}
+          </PromptSuggestion>
+        </motion.div>
+      ))}
+    </PromptSuggestions>
+  )
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/[page]/page.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/[page]/page.tsx
new file mode 100644
index 00000000..d3522fa2
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/[page]/page.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next"
+import { CategoryView } from "components/category/category-view"
+
+export const revalidate = 86400
+export const dynamic = "force-static"
+
+interface CategoryPageProps {
+  params: Promise<{ slug: string; page: string }>
+}
+
+export async function generateMetadata(props: CategoryPageProps): Promise<Metadata> {
+  const params = await props.params
+  return {
+    title: `${params.slug} | Enterprise Commerce`,
+    description: "In excepteur elit mollit in.",
+  }
+}
+
+export async function generateStaticParams() {
+  return []
+}
+
+export default async function CategoryPage(props: CategoryPageProps) {
+  const params = await props.params
+  return <CategoryView searchParams={{ page: params.page }} params={params} basePath="ai" />
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/page.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/page.tsx
new file mode 100644
index 00000000..45278cc2
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/category/clp/[slug]/page.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next"
+import { isDemoMode } from "utils/demo-utils"
+import { getCategories } from "lib/algolia"
+import { CategoryView } from "components/category/category-view"
+
+export const revalidate = 86400
+export const dynamic = "force-static"
+
+interface CategoryPageProps {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata(props: CategoryPageProps): Promise<Metadata> {
+  const params = await props.params
+  return {
+    title: `${params.slug} | Enterprise Commerce`,
+    description: "In excepteur elit mollit in.",
+  }
+}
+
+export async function generateStaticParams() {
+  if (isDemoMode()) return []
+
+  const { hits } = await getCategories({
+    hitsPerPage: 50,
+    attributesToRetrieve: ["handle"],
+  })
+
+  return hits.map(({ handle }) => ({ slug: handle }))
+}
+
+export default async function CategoryPage(props: CategoryPageProps) {
+  const params = await props.params
+  return <CategoryView params={params} basePath="ai" />
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/category/plp/[slug]/page.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/category/plp/[slug]/page.tsx
new file mode 100644
index 00000000..c2ffbdf9
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/category/plp/[slug]/page.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next"
+import { SearchParamsType } from "types"
+import { CategoryView } from "components/category/category-view"
+
+export const runtime = "nodejs"
+
+export const revalidate = 86400
+
+interface ProductListingPageProps {
+  searchParams: Promise<SearchParamsType>
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata(props: ProductListingPageProps): Promise<Metadata> {
+  const params = await props.params
+  return {
+    title: `${params.slug} | Enterprise Commerce`,
+    description: "In excepteur elit mollit in.",
+  }
+}
+
+export default async function ProductListingPage(props: ProductListingPageProps) {
+  const params = await props.params
+  const searchParams = await props.searchParams
+  return <CategoryView params={params} searchParams={searchParams} basePath="ai" />
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/loading.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/loading.tsx
new file mode 100644
index 00000000..b1957dd6
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/loading.tsx
@@ -0,0 +1,5 @@
+import { PageSkeleton } from "components/product/page-skeleton"
+
+export default function Loading() {
+  return <PageSkeleton />
+}
diff --git a/starters/shopify-algolia/app/product/[slug]/metadata.ts b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/metadata.ts
similarity index 100%
rename from starters/shopify-algolia/app/product/[slug]/metadata.ts
rename to starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/metadata.ts
diff --git a/starters/shopify-algolia/app/product/[slug]/opengraph-image.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/opengraph-image.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/[slug]/opengraph-image.tsx
rename to starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/opengraph-image.tsx
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/page.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/page.tsx
new file mode 100644
index 00000000..e83b2921
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/product/[slug]/page.tsx
@@ -0,0 +1,114 @@
+import { Suspense } from "react"
+import { notFound } from "next/navigation"
+
+import { isDemoMode } from "utils/demo-utils"
+import { slugToName } from "utils/slug-name"
+import { CurrencyType, mapCurrencyToSign } from "utils/map-currency-to-sign"
+import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/product-options-utils"
+
+import { Breadcrumbs } from "components/breadcrumbs"
+
+import { FavoriteMarker } from "components/product/favorite-marker"
+import { SimilarProductsSection } from "components/product/similar-products-section"
+import { SimilarProductsSectionSkeleton } from "components/product/similar-product-section-skeleton"
+import { VariantsSection } from "components/product/variants-section"
+import { ProductTitle } from "components/product/product-title"
+import { ProductImages } from "components/product/product-images"
+import { RightSection } from "components/product/right-section"
+import { FaqSection } from "components/product/faq-section"
+import { AddToCartButton } from "components/product/add-to-cart-button"
+import { ReviewsSection } from "components/product/reviews-section"
+
+import type { CommerceProduct } from "types"
+
+import { generateJsonLd } from "./metadata"
+import { getProduct, getProducts } from "lib/algolia"
+
+export const revalidate = 86400
+export const dynamic = "force-static"
+export const dynamicParams = true
+
+interface ProductProps {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateStaticParams() {
+  if (isDemoMode()) return []
+
+  const { hits } = await getProducts({
+    hitsPerPage: 50,
+    attributesToRetrieve: ["handle"],
+  })
+
+  return hits.map(({ handle }) => ({ slug: handle }))
+}
+
+export default async function Product(props: ProductProps) {
+  const params = await props.params
+
+  const { slug } = params
+
+  const product = await getProduct(removeOptionsFromUrl(slug))
+
+  const { color } = getOptionsFromUrl(slug)
+  const hasInvalidOptions = !hasValidOption(product?.variants, "color", color)
+
+  if (!product || hasInvalidOptions) {
+    return notFound()
+  }
+
+  const combination = getCombination(product, color)
+  const hasOnlyOneVariant = product.variants.length <= 1
+  const combinationPrice = combination?.price?.amount || null
+
+  return (
+    <div className="relative mx-auto max-w-container-md px-4 xl:px-0">
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(generateJsonLd(product, slug)) }}></script>
+      <div className="mb:pb-8 relative flex w-full items-center justify-center gap-10 py-4 md:pt-12">
+        <div className="mx-auto w-full max-w-container-sm">
+          <Breadcrumbs className="mb-8" items={makeBreadcrumbs(product)} />
+        </div>
+      </div>
+      <main className="mx-auto max-w-container-sm">
+        <div className="grid grid-cols-1 gap-4 md:mx-auto md:max-w-screen-xl md:grid-cols-12 md:gap-8">
+          <ProductTitle
+            className="md:hidden"
+            title={product.title}
+            price={combinationPrice}
+            currency={combination?.price ? mapCurrencyToSign(combination.price?.currencyCode as CurrencyType) : "$"}
+          />
+          <ProductImages images={product.images} />
+          <RightSection className="md:col-span-6 md:col-start-8 md:mt-0">
+            <ProductTitle
+              className="hidden md:col-span-4 md:col-start-9 md:block"
+              title={product.title}
+              price={combinationPrice}
+              currency={combination?.price ? mapCurrencyToSign(combination.price?.currencyCode as CurrencyType) : "$"}
+            />
+            {!hasOnlyOneVariant && <VariantsSection variants={product.variants} handle={product.handle} combination={combination} />}
+            <p>{product.description}</p>
+            <AddToCartButton className="mt-4" product={product} combination={combination} />
+            <FavoriteMarker handle={product.handle} />
+            <FaqSection />
+          </RightSection>
+        </div>
+        <Suspense>
+          <ReviewsSection avgRating={product.avgRating} productHandle={product.handle} productId={product.id} slug={slug} summary={product.reviewsSummary} />
+        </Suspense>
+        <Suspense fallback={<SimilarProductsSectionSkeleton />}>
+          <SimilarProductsSection basePath="ai" objectID={product.objectID} slug={slug} />
+        </Suspense>
+      </main>
+    </div>
+  )
+}
+
+function makeBreadcrumbs(product: CommerceProduct) {
+  const lastCollection = product.collections?.findLast(Boolean)
+
+  return {
+    Home: "/",
+    [lastCollection?.handle ? slugToName(lastCollection?.handle) : "Products"]: lastCollection?.handle ? `/ai/category/${lastCollection.handle}` : "/ai/search",
+    [product.title]: "",
+  }
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/ai/search/page.tsx b/starters/shopify-algolia/app/(ai-browse)/ai/search/page.tsx
new file mode 100644
index 00000000..0c1fcb1e
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/ai/search/page.tsx
@@ -0,0 +1,14 @@
+import { Suspense } from "react"
+import { PageSkeleton } from "components/product/page-skeleton"
+import type { SearchParamsType } from "types"
+import { SearchView } from "components/search-view"
+
+export default async function AiSearchPage(props: { searchParams: Promise<SearchParamsType> }) {
+  const searchParams = await props.searchParams
+
+  return (
+    <Suspense fallback={<PageSkeleton />}>
+      <SearchView searchParams={searchParams} basePath="ai" />
+    </Suspense>
+  )
+}
diff --git a/starters/shopify-algolia/app/(ai-browse)/layout.tsx b/starters/shopify-algolia/app/(ai-browse)/layout.tsx
new file mode 100644
index 00000000..80e746ed
--- /dev/null
+++ b/starters/shopify-algolia/app/(ai-browse)/layout.tsx
@@ -0,0 +1,68 @@
+import "../globals.css"
+
+import Script from "next/script"
+import { Suspense } from "react"
+import { Toaster } from "sonner"
+import { FlagValues } from "components/flag-values"
+import { ThirdParties } from "components/third-parties"
+import { GithubBadge } from "components/github-badge"
+import { DemoModeAlert } from "components/demo-mode-alert"
+import { CartView } from "components/cart/cart-view"
+import { NavigationBar } from "components/navigation-bar/navigation-bar"
+import { mobileInlineScript } from "components/navigation-bar/mobile-inline-script"
+import { Footer } from "components/footer"
+import { Modals } from "components/modals/modals"
+import DraftToolbar from "components/draft-toolbar"
+import { SidebarInset, SidebarProvider } from "components/ui/sidebar"
+import { AiCommerceSidebar } from "./_components/ai-chat"
+import { navigationItems } from "utils/nav-items"
+import { AiCommerceProvider } from "./_components/ai-commerce-context"
+
+export default function AiSearchLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Script id="mobileMegaMenuLogic" strategy="lazyOnload">
+          {`${mobileInlineScript}`}
+        </Script>
+
+        <AiCommerceProvider>
+          <SidebarProvider
+            style={
+              {
+                "--sidebar-width": "20rem",
+                "--sidebar-width-mobile": "20rem",
+              } as React.CSSProperties
+            }
+          >
+            <Suspense>
+              <AiCommerceSidebar />
+            </Suspense>
+            <SidebarInset>
+              <NavigationBar items={navigationItems} />
+              {children}
+
+              <Footer />
+              <Modals />
+
+              <CartView />
+
+              <Toaster position="bottom-left" />
+
+              <DraftToolbar />
+
+              <Suspense>
+                <FlagValues />
+              </Suspense>
+
+              <ThirdParties />
+
+              <GithubBadge />
+              <DemoModeAlert />
+            </SidebarInset>
+          </SidebarProvider>
+        </AiCommerceProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/starters/shopify-algolia/app/category/clp/[slug]/[page]/page.tsx b/starters/shopify-algolia/app/(browse)/category/clp/[slug]/[page]/page.tsx
similarity index 80%
rename from starters/shopify-algolia/app/category/clp/[slug]/[page]/page.tsx
rename to starters/shopify-algolia/app/(browse)/category/clp/[slug]/[page]/page.tsx
index 37186872..b2be2eb9 100644
--- a/starters/shopify-algolia/app/category/clp/[slug]/[page]/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/category/clp/[slug]/[page]/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next"
-import { CategoryView } from "app/category/_components/category-view"
+import { CategoryView } from "components/category/category-view"
 
 export const revalidate = 86400
 export const dynamic = "force-static"
@@ -9,7 +9,7 @@ interface CategoryPageProps {
 }
 
 export async function generateMetadata(props: CategoryPageProps): Promise<Metadata> {
-  const params = await props.params;
+  const params = await props.params
   return {
     title: `${params.slug} | Enterprise Commerce`,
     description: "In excepteur elit mollit in.",
@@ -21,6 +21,6 @@ export async function generateStaticParams() {
 }
 
 export default async function CategoryPage(props: CategoryPageProps) {
-  const params = await props.params;
+  const params = await props.params
   return <CategoryView searchParams={{ page: params.page }} params={params} />
 }
diff --git a/starters/shopify-algolia/app/category/clp/[slug]/page.tsx b/starters/shopify-algolia/app/(browse)/category/clp/[slug]/page.tsx
similarity index 85%
rename from starters/shopify-algolia/app/category/clp/[slug]/page.tsx
rename to starters/shopify-algolia/app/(browse)/category/clp/[slug]/page.tsx
index 1129c310..2d273ee7 100644
--- a/starters/shopify-algolia/app/category/clp/[slug]/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/category/clp/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
 import { isDemoMode } from "utils/demo-utils"
 import { getCategories } from "lib/algolia"
-import { CategoryView } from "app/category/_components/category-view"
+import { CategoryView } from "components/category/category-view"
 
 export const revalidate = 86400
 export const dynamic = "force-static"
@@ -11,7 +11,7 @@ interface CategoryPageProps {
 }
 
 export async function generateMetadata(props: CategoryPageProps): Promise<Metadata> {
-  const params = await props.params;
+  const params = await props.params
   return {
     title: `${params.slug} | Enterprise Commerce`,
     description: "In excepteur elit mollit in.",
@@ -30,6 +30,6 @@ export async function generateStaticParams() {
 }
 
 export default async function CategoryPage(props: CategoryPageProps) {
-  const params = await props.params;
+  const params = await props.params
   return <CategoryView params={params} />
 }
diff --git a/starters/shopify-algolia/app/category/plp/[slug]/page.tsx b/starters/shopify-algolia/app/(browse)/category/plp/[slug]/page.tsx
similarity index 76%
rename from starters/shopify-algolia/app/category/plp/[slug]/page.tsx
rename to starters/shopify-algolia/app/(browse)/category/plp/[slug]/page.tsx
index ccd7edce..2aad804c 100644
--- a/starters/shopify-algolia/app/category/plp/[slug]/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/category/plp/[slug]/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next"
 import { SearchParamsType } from "types"
-import { CategoryView } from "app/category/_components/category-view"
+import { CategoryView } from "components/category/category-view"
 
 export const runtime = "nodejs"
 
@@ -12,7 +12,7 @@ interface ProductListingPageProps {
 }
 
 export async function generateMetadata(props: ProductListingPageProps): Promise<Metadata> {
-  const params = await props.params;
+  const params = await props.params
   return {
     title: `${params.slug} | Enterprise Commerce`,
     description: "In excepteur elit mollit in.",
@@ -20,7 +20,7 @@ export async function generateMetadata(props: ProductListingPageProps): Promise<
 }
 
 export default async function ProductListingPage(props: ProductListingPageProps) {
-  const params = await props.params;
-  const searchParams = await props.searchParams;
+  const params = await props.params
+  const searchParams = await props.searchParams
   return <CategoryView params={params} searchParams={searchParams} />
 }
diff --git a/starters/shopify-algolia/app/error.tsx b/starters/shopify-algolia/app/(browse)/error.tsx
similarity index 100%
rename from starters/shopify-algolia/app/error.tsx
rename to starters/shopify-algolia/app/(browse)/error.tsx
diff --git a/starters/shopify-algolia/app/favorites/page.tsx b/starters/shopify-algolia/app/(browse)/favorites/page.tsx
similarity index 100%
rename from starters/shopify-algolia/app/favorites/page.tsx
rename to starters/shopify-algolia/app/(browse)/favorites/page.tsx
diff --git a/starters/shopify-algolia/app/global-error.tsx b/starters/shopify-algolia/app/(browse)/global-error.tsx
similarity index 100%
rename from starters/shopify-algolia/app/global-error.tsx
rename to starters/shopify-algolia/app/(browse)/global-error.tsx
diff --git a/starters/shopify-algolia/app/home/[bucket]/page.tsx b/starters/shopify-algolia/app/(browse)/home/[bucket]/page.tsx
similarity index 68%
rename from starters/shopify-algolia/app/home/[bucket]/page.tsx
rename to starters/shopify-algolia/app/(browse)/home/[bucket]/page.tsx
index 36f21fb4..7034985a 100644
--- a/starters/shopify-algolia/app/home/[bucket]/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/home/[bucket]/page.tsx
@@ -1,8 +1,8 @@
 import { BUCKETS } from "constants/index"
-import { AnnouncementBar } from "app/home/_components/announcement-bar"
-import { HeroSection } from "app/home/_components/hero-section"
-import { CategoriesSection } from "app/home/_components/categories-section"
-import { FeaturedProductsSection } from "app/home/_components/featured-products-section"
+import { AnnouncementBar } from "app/(browse)/home/_components/announcement-bar"
+import { HeroSection } from "app/(browse)/home/_components/hero-section"
+import { CategoriesSection } from "app/(browse)/home/_components/categories-section"
+import { FeaturedProductsSection } from "app/(browse)/home/_components/featured-products-section"
 import { getFeaturedProducts } from "lib/algolia"
 
 export const revalidate = 86400
@@ -12,11 +12,9 @@ export const dynamic = "force-static"
 export const dynamicParams = true
 
 export default async function Homepage(props: { params: Promise<{ bucket: string }> }) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    bucket
-  } = params;
+  const { bucket } = params
 
   const heroTitles = {
     a: "Discover Your Next Favorite Thing",
diff --git a/starters/shopify-algolia/app/home/_components/announcement-bar.tsx b/starters/shopify-algolia/app/(browse)/home/_components/announcement-bar.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/announcement-bar.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/announcement-bar.tsx
diff --git a/starters/shopify-algolia/app/home/_components/carousel-section.tsx b/starters/shopify-algolia/app/(browse)/home/_components/carousel-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/carousel-section.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/carousel-section.tsx
diff --git a/starters/shopify-algolia/app/home/_components/categories-section.tsx b/starters/shopify-algolia/app/(browse)/home/_components/categories-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/categories-section.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/categories-section.tsx
diff --git a/starters/shopify-algolia/app/home/_components/featured-products-section.tsx b/starters/shopify-algolia/app/(browse)/home/_components/featured-products-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/featured-products-section.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/featured-products-section.tsx
diff --git a/starters/shopify-algolia/app/home/_components/hero-section.tsx b/starters/shopify-algolia/app/(browse)/home/_components/hero-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/hero-section.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/hero-section.tsx
diff --git a/starters/shopify-algolia/app/home/_components/products-week-section.tsx b/starters/shopify-algolia/app/(browse)/home/_components/products-week-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/home/_components/products-week-section.tsx
rename to starters/shopify-algolia/app/(browse)/home/_components/products-week-section.tsx
diff --git a/starters/shopify-algolia/app/(browse)/layout.tsx b/starters/shopify-algolia/app/(browse)/layout.tsx
new file mode 100644
index 00000000..e70ce1ac
--- /dev/null
+++ b/starters/shopify-algolia/app/(browse)/layout.tsx
@@ -0,0 +1,76 @@
+import "../globals.css"
+
+import Script from "next/script"
+import { Suspense } from "react"
+import { Toaster } from "sonner"
+import { FlagValues } from "components/flag-values"
+import { ThirdParties } from "components/third-parties"
+import { env } from "env.mjs"
+import { Metadata } from "next"
+import { GithubBadge } from "components/github-badge"
+import { DemoModeAlert } from "components/demo-mode-alert"
+import { CartView } from "components/cart/cart-view"
+import { NavigationBar } from "components/navigation-bar/navigation-bar"
+import { mobileInlineScript } from "components/navigation-bar/mobile-inline-script"
+import { Footer } from "components/footer"
+import { Modals } from "components/modals/modals"
+import DraftToolbar from "components/draft-toolbar"
+import { navigationItems } from "utils/nav-items"
+
+export const revalidate = 86400
+
+export const metadata: Metadata = {
+  title: "Next.js Enterprise Commerce | Blazity",
+  description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+  metadataBase: new URL(env.LIVE_URL!),
+  openGraph: {
+    title: "Next.js Enterprise Commerce | Blazity",
+    description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+    images: ["/opengraph-image.jpg"],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Next.js Enterprise Commerce | Blazity",
+    description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
+    creator: "@blazity",
+    images: ["/opengraph-image.jpg"],
+  },
+  verification: {
+    google: "google",
+    yandex: "yandex",
+    yahoo: "yahoo",
+  },
+  generator: "Next.js",
+  applicationName: "Next.js",
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Script id="mobileMegaMenuLogic" strategy="lazyOnload">{`${mobileInlineScript}`}</Script>
+
+        <NavigationBar items={navigationItems} />
+        {children}
+
+        <Footer />
+        <Modals />
+
+        <CartView />
+
+        <Toaster position="bottom-left" />
+
+        <DraftToolbar />
+
+        <Suspense>
+          <FlagValues />
+        </Suspense>
+
+        <ThirdParties />
+
+        <GithubBadge />
+        <DemoModeAlert />
+      </body>
+    </html>
+  )
+}
diff --git a/starters/shopify-algolia/app/not-found.tsx b/starters/shopify-algolia/app/(browse)/not-found.tsx
similarity index 100%
rename from starters/shopify-algolia/app/not-found.tsx
rename to starters/shopify-algolia/app/(browse)/not-found.tsx
diff --git a/starters/shopify-algolia/app/pages/[slug]/metadata.ts b/starters/shopify-algolia/app/(browse)/pages/[slug]/metadata.ts
similarity index 100%
rename from starters/shopify-algolia/app/pages/[slug]/metadata.ts
rename to starters/shopify-algolia/app/(browse)/pages/[slug]/metadata.ts
diff --git a/starters/shopify-algolia/app/pages/[slug]/page.tsx b/starters/shopify-algolia/app/(browse)/pages/[slug]/page.tsx
similarity index 100%
rename from starters/shopify-algolia/app/pages/[slug]/page.tsx
rename to starters/shopify-algolia/app/(browse)/pages/[slug]/page.tsx
diff --git a/starters/shopify-algolia/app/product/[slug]/draft/page.tsx b/starters/shopify-algolia/app/(browse)/product/[slug]/draft/page.tsx
similarity index 81%
rename from starters/shopify-algolia/app/product/[slug]/draft/page.tsx
rename to starters/shopify-algolia/app/(browse)/product/[slug]/draft/page.tsx
index befb35b9..a2120775 100644
--- a/starters/shopify-algolia/app/product/[slug]/draft/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/product/[slug]/draft/page.tsx
@@ -8,15 +8,14 @@ import { getAdminProduct, getProductByHandle } from "lib/shopify"
 import type { PlatformProduct } from "lib/shopify/types"
 
 import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/product-options-utils"
-import { BackButton } from "components/back-button"
-import { VariantsSection } from "app/product/_components/variants-section"
-import { ProductTitle } from "app/product/_components/product-title"
+import { VariantsSection } from "components/product/variants-section"
+import { ProductTitle } from "components/product/product-title"
 import { CurrencyType, mapCurrencyToSign } from "utils/map-currency-to-sign"
-import { ProductImages } from "app/product/_components/product-images"
-import { RightSection } from "app/product/_components/right-section"
-import { AddToCartButton } from "app/product/_components/add-to-cart-button"
-import { FavoriteMarker } from "app/product/_components/favorite-marker"
-import { FaqSection } from "app/product/_components/faq-section"
+import { ProductImages } from "components/product/product-images"
+import { RightSection } from "components/product/right-section"
+import { AddToCartButton } from "components/product/add-to-cart-button"
+import { FavoriteMarker } from "components/product/favorite-marker"
+import { FaqSection } from "components/product/faq-section"
 
 import { slugToName } from "utils/slug-name"
 
@@ -31,11 +30,9 @@ interface ProductProps {
 }
 
 export default async function Product(props: ProductProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug
-  } = params;
+  const { slug } = params
 
   return <ProductView slug={slug} />
 }
@@ -59,9 +56,6 @@ async function ProductView({ slug }: { slug: string }) {
 
   return (
     <div className="relative mx-auto max-w-container-md px-4 xl:px-0">
-      <div className="mb:pb-8 relative w-fit py-4 md:pt-12">
-        <BackButton className="mb-8 hidden md:block" />
-      </div>
       <main className="mx-auto max-w-container-sm">
         <Breadcrumbs className="mb-8" items={makeBreadcrumbs(product)} />
         <div className="grid grid-cols-1 gap-4 md:mx-auto md:max-w-screen-xl md:grid-cols-12 md:gap-8">
diff --git a/starters/shopify-algolia/app/(browse)/product/[slug]/loading.tsx b/starters/shopify-algolia/app/(browse)/product/[slug]/loading.tsx
new file mode 100644
index 00000000..b1957dd6
--- /dev/null
+++ b/starters/shopify-algolia/app/(browse)/product/[slug]/loading.tsx
@@ -0,0 +1,5 @@
+import { PageSkeleton } from "components/product/page-skeleton"
+
+export default function Loading() {
+  return <PageSkeleton />
+}
diff --git a/starters/shopify-algolia/app/(browse)/product/[slug]/metadata.ts b/starters/shopify-algolia/app/(browse)/product/[slug]/metadata.ts
new file mode 100644
index 00000000..de8c1336
--- /dev/null
+++ b/starters/shopify-algolia/app/(browse)/product/[slug]/metadata.ts
@@ -0,0 +1,69 @@
+import { getProduct } from "lib/algolia"
+import { env } from "env.mjs"
+import { Metadata } from "next"
+import { Product, WithContext } from "schema-dts"
+import type { CommerceProduct } from "types"
+import { makeKeywords } from "utils/make-keywords"
+import { removeOptionsFromUrl } from "utils/product-options-utils"
+import { slugToName } from "utils/slug-name"
+
+interface ProductProps {
+  params: { slug: string }
+}
+
+export async function generateMetadata({ params: { slug } }: ProductProps): Promise<Metadata> {
+  const product = await getProduct(removeOptionsFromUrl(slug))
+
+  const originalDescription = product?.seo?.description
+  const originalTitle = product?.seo?.title
+  const keywords = makeKeywords(product?.title)
+  const lastCollection = product?.collections?.findLast(Boolean)
+
+  return {
+    metadataBase: new URL(env.LIVE_URL!),
+    title: `${originalTitle || product?.title} | Blazity`,
+    description: originalDescription || product?.description,
+    generator: "Next.js",
+    applicationName: "Next.js",
+    referrer: "origin-when-cross-origin",
+    keywords: keywords,
+    category: lastCollection ? slugToName(lastCollection.handle) : "Search",
+    creator: "Blazity",
+    alternates: {
+      canonical: `/product/${slug}`,
+    },
+    publisher: "Blazity",
+  }
+}
+
+export function generateJsonLd(product: CommerceProduct, slug: string) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    name: product.title,
+    description: product.description,
+    image: product.images.map((image) => image.url),
+    ...(product.vendor && {
+      brand: {
+        "@type": "Brand",
+        name: product.vendor,
+      },
+    }),
+    hasMerchantReturnPolicy: {
+      "@type": "MerchantReturnPolicy",
+      applicableCountry: "US",
+      returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",
+      merchantReturnDays: 30,
+      returnMethod: "https://schema.org/ReturnByMail",
+      returnFees: "https://schema.org/FreeReturn",
+    },
+    offers: {
+      "@type": "Offer",
+      url: `${env.LIVE_URL}/product/${slug}`,
+      itemCondition: "https://schema.org/NewCondition",
+      availability: "https://schema.org/InStock",
+      price: product.priceRange.minVariantPrice.amount,
+      priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+    },
+  } satisfies WithContext<Product>
+}
diff --git a/starters/shopify-algolia/app/(browse)/product/[slug]/opengraph-image.tsx b/starters/shopify-algolia/app/(browse)/product/[slug]/opengraph-image.tsx
new file mode 100644
index 00000000..af295ae3
--- /dev/null
+++ b/starters/shopify-algolia/app/(browse)/product/[slug]/opengraph-image.tsx
@@ -0,0 +1,131 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+
+import { ImageResponse } from "next/og"
+import { removeOptionsFromUrl } from "utils/product-options-utils"
+import { env } from "env.mjs"
+import { getProduct } from "lib/algolia"
+
+export const revalidate = 86400
+
+export const dynamic = "force-static"
+
+export const size = {
+  width: 1200,
+  height: 630,
+}
+
+export const contentType = "image/png"
+
+export default async function Image({ params: { slug } }: { params: { slug: string } }) {
+  const interRegular = fetch(new URL(`${env.LIVE_URL}/fonts/Inter-Regular.ttf`)).then((res) => res.arrayBuffer())
+  const interBold = fetch(new URL(`${env.LIVE_URL}/fonts/Inter-Bold.ttf`)).then((res) => res.arrayBuffer())
+
+  const product = await getProduct(removeOptionsFromUrl(slug))
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          border: "10px solid black",
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          fontWeight: 400,
+          background: "white",
+        }}
+      >
+        <div
+          style={{
+            left: 120,
+            top: 40,
+            position: "absolute",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "380px",
+            height: "430px",
+            backgroundColor: "#eaeaea",
+          }}
+        >
+          <img src={product?.featuredImage?.url} width={280} height={280} style={{ objectFit: "contain" }} />
+        </div>
+        <div
+          style={{
+            left: 120,
+            top: 490,
+            position: "absolute",
+            display: "flex",
+            width: "380px",
+            height: "80px",
+          }}
+        >
+          {product?.images
+            ?.slice(0, 4)
+            ?.map((image, idx) => (
+              <img
+                key={idx}
+                style={{ marginLeft: idx !== 0 ? "10px" : "0px", backgroundColor: "#eaeaea", border: "1px solid black", padding: "5px" }}
+                src={image.url}
+                width={85}
+                height={80}
+              />
+            ))}
+        </div>
+
+        <div
+          style={{
+            height: "145px",
+            overflow: "hidden",
+            maxWidth: "450px",
+            fontWeight: 400,
+            fontSize: "48px",
+            lineHeight: 1,
+            position: "absolute",
+            left: 600,
+            top: 40,
+            letterSpacing: "-0.05em",
+          }}
+        >
+          {product?.title}
+        </div>
+
+        <div
+          style={{
+            height: "180px",
+            overflow: "hidden",
+            maxWidth: "500px",
+            fontWeight: 400,
+            fontSize: "21px",
+            position: "absolute",
+            left: 600,
+            color: "#565656",
+            top: 230,
+          }}
+        >
+          {product?.description}
+        </div>
+        <div style={{ fontSize: "70px", fontWeight: 900, lineHeight: 1, position: "absolute", left: 600, bottom: 60, textAlign: "left", letterSpacing: "-0.05em" }}>
+          {product?.priceRange.minVariantPrice.amount + " " + product?.priceRange.minVariantPrice.currencyCode}
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+      fonts: [
+        {
+          name: "Inter",
+          data: await interRegular,
+          style: "normal",
+          weight: 400,
+        },
+        {
+          name: "Inter",
+          data: await interBold,
+          style: "normal",
+          weight: 900,
+        },
+      ],
+    }
+  )
+}
diff --git a/starters/shopify-algolia/app/product/[slug]/page.tsx b/starters/shopify-algolia/app/(browse)/product/[slug]/page.tsx
similarity index 79%
rename from starters/shopify-algolia/app/product/[slug]/page.tsx
rename to starters/shopify-algolia/app/(browse)/product/[slug]/page.tsx
index 4a1acdc9..c879773f 100644
--- a/starters/shopify-algolia/app/product/[slug]/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/product/[slug]/page.tsx
@@ -8,17 +8,16 @@ import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl
 
 import { Breadcrumbs } from "components/breadcrumbs"
 
-import { BackButton } from "components/back-button"
-import { FavoriteMarker } from "app/product/_components/favorite-marker"
-import { SimilarProductsSection } from "app/product/_components/similar-products-section"
-import { SimilarProductsSectionSkeleton } from "app/product/_components/similar-product-section-skeleton"
-import { VariantsSection } from "app/product/_components/variants-section"
-import { ProductTitle } from "app/product/_components/product-title"
-import { ProductImages } from "app/product/_components/product-images"
-import { RightSection } from "app/product/_components/right-section"
-import { FaqSection } from "app/product/_components/faq-section"
-import { AddToCartButton } from "app/product/_components/add-to-cart-button"
-import { ReviewsSection } from "app/product/_components/reviews-section"
+import { FavoriteMarker } from "components/product/favorite-marker"
+import { SimilarProductsSection } from "components/product/similar-products-section"
+import { SimilarProductsSectionSkeleton } from "components/product/similar-product-section-skeleton"
+import { VariantsSection } from "components/product/variants-section"
+import { ProductTitle } from "components/product/product-title"
+import { ProductImages } from "components/product/product-images"
+import { RightSection } from "components/product/right-section"
+import { FaqSection } from "components/product/faq-section"
+import { AddToCartButton } from "components/product/add-to-cart-button"
+import { ReviewsSection } from "components/product/reviews-section"
 
 import type { CommerceProduct } from "types"
 
@@ -45,11 +44,9 @@ export async function generateStaticParams() {
 }
 
 export default async function Product(props: ProductProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug
-  } = params;
+  const { slug } = params
 
   const product = await getProduct(removeOptionsFromUrl(slug))
 
@@ -61,7 +58,6 @@ export default async function Product(props: ProductProps) {
   }
 
   const combination = getCombination(product, color)
-  const lastCollection = product?.collections?.findLast(Boolean)
   const hasOnlyOneVariant = product.variants.length <= 1
   const combinationPrice = combination?.price?.amount || null
 
@@ -69,7 +65,6 @@ export default async function Product(props: ProductProps) {
     <div className="relative mx-auto max-w-container-md px-4 xl:px-0">
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(generateJsonLd(product, slug)) }}></script>
       <div className="mb:pb-8 relative flex w-full items-center justify-center gap-10 py-4 md:pt-12">
-        <BackButton className="left-2 mb-8 hidden md:block xl:absolute" />
         <div className="mx-auto w-full max-w-container-sm">
           <Breadcrumbs className="mb-8" items={makeBreadcrumbs(product)} />
         </div>
diff --git a/starters/shopify-algolia/app/reviews/[slug]/metadata.ts b/starters/shopify-algolia/app/(browse)/reviews/[slug]/metadata.ts
similarity index 100%
rename from starters/shopify-algolia/app/reviews/[slug]/metadata.ts
rename to starters/shopify-algolia/app/(browse)/reviews/[slug]/metadata.ts
diff --git a/starters/shopify-algolia/app/reviews/[slug]/page.tsx b/starters/shopify-algolia/app/(browse)/reviews/[slug]/page.tsx
similarity index 100%
rename from starters/shopify-algolia/app/reviews/[slug]/page.tsx
rename to starters/shopify-algolia/app/(browse)/reviews/[slug]/page.tsx
diff --git a/starters/shopify-algolia/app/search/opengraph-image.tsx b/starters/shopify-algolia/app/(browse)/search/opengraph-image.tsx
similarity index 100%
rename from starters/shopify-algolia/app/search/opengraph-image.tsx
rename to starters/shopify-algolia/app/(browse)/search/opengraph-image.tsx
diff --git a/starters/shopify-algolia/app/search/page.tsx b/starters/shopify-algolia/app/(browse)/search/page.tsx
similarity index 64%
rename from starters/shopify-algolia/app/search/page.tsx
rename to starters/shopify-algolia/app/(browse)/search/page.tsx
index 9c50698c..bf7e3e38 100644
--- a/starters/shopify-algolia/app/search/page.tsx
+++ b/starters/shopify-algolia/app/(browse)/search/page.tsx
@@ -1,14 +1,12 @@
 import type { Metadata } from "next"
 import { Suspense } from "react"
 import type { SearchParamsType } from "types"
-import { PageSkeleton } from "app/category/_components/page-skeleton"
+import { PageSkeleton } from "components/category/page-skeleton"
 import { SearchView } from "components/search-view"
-import { getFacetValues } from "lib/algolia"
-import { env } from "env.mjs"
 
 export const metadata: Metadata = {
   title: "Search | Enterprise Commerce",
-  description: "In excepteur elit mollit in.",
+  description: "Search for products in our store.",
 }
 
 export const revalidate = 86400
@@ -22,12 +20,6 @@ interface SearchPageProps {
 export default async function SearchPage(props: SearchPageProps) {
   const searchParams = await props.searchParams
 
-  const facetValues = await getFacetValues({
-    indexName: env.ALGOLIA_PRODUCTS_INDEX,
-    facetName: "flatOptions.Color",
-  })
-
-  console.log({ facetValues })
   return (
     <Suspense fallback={<PageSkeleton />}>
       <SearchView searchParams={searchParams} />
diff --git a/starters/shopify-algolia/app/ai-search/_components/chat-suggestions.tsx b/starters/shopify-algolia/app/ai-search/_components/chat-suggestions.tsx
deleted file mode 100644
index 83f7b540..00000000
--- a/starters/shopify-algolia/app/ai-search/_components/chat-suggestions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client"
-
-import { toast } from "sonner"
-
-import { PromptSuggestions } from "components/ui/prompt-suggestions"
-
-export function Suggestions() {
-  return (
-    <PromptSuggestions
-      append={(message) => {
-        toast(`Clicked on "${message.content}"`)
-      }}
-      suggestions={["Show me current best-sellers", "Show me latest deals", "I need a red shoes", "Show me hot deals", "Show me the latest fashion trends"]}
-    />
-  )
-}
diff --git a/starters/shopify-algolia/app/ai-search/_components/results.tsx b/starters/shopify-algolia/app/ai-search/_components/results.tsx
deleted file mode 100644
index dfbb1648..00000000
--- a/starters/shopify-algolia/app/ai-search/_components/results.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { CategoryCard } from "components/category-card"
-import { ProductCard } from "components/product-card"
-import { Carousel, CarouselContent, CarouselNext, CarouselPrevious } from "components/ui/carousel"
-import type { CommerceProduct } from "types"
-import type { PlatformCollection } from "lib/shopify/types"
-
-export const ProductResultsList = ({ products }: { products: CommerceProduct[] }) => {
-  return (
-    <div>
-      <h2 className="mb-4 text-xl font-bold">Products</h2>
-      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
-        {products.map((product) => (
-          <ProductCard key={product.id} {...product} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export const CategoriesResultsList = ({ categories }: { categories: PlatformCollection[] }) => {
-  return (
-    <div className="relative px-2">
-      <h2 className="mb-4 text-xl font-bold">Categories</h2>
-      <Carousel opts={{ skipSnaps: true }}>
-        <CarouselPrevious className="absolute -left-4 top-[40%] z-50 hidden xl:flex" />
-        <CarouselContent className="ml-0 justify-start gap-8">
-          {categories.map((category, index) => (
-            <div key={category.id} className="min-w-[400px]">
-              <CategoryCard index={index + 3} {...category} />
-            </div>
-          ))}
-        </CarouselContent>
-        <CarouselNext className="absolute -right-4 top-[40%] z-50 hidden xl:flex" />
-      </Carousel>
-    </div>
-  )
-}
diff --git a/starters/shopify-algolia/app/ai-search/_components/tool-messages.tsx b/starters/shopify-algolia/app/ai-search/_components/tool-messages.tsx
deleted file mode 100644
index 06dfeb76..00000000
--- a/starters/shopify-algolia/app/ai-search/_components/tool-messages.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Message } from "ai"
-import { AllowedTools } from "lib/ai/tools"
-import { ProductResultsList, CategoriesResultsList } from "./results"
-
-export const ToolsUI = ({ message }: { message: Message }) => {
-  if (!message?.toolInvocations || message?.toolInvocations?.length < 0) {
-    return null
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      {message.toolInvocations.map((toolInvocation) => {
-        const { toolName, toolCallId, state } = toolInvocation
-
-        if (state === "result") {
-          const { result } = toolInvocation
-
-          return (
-            <div key={toolCallId}>
-              <ToolUI toolName={toolName as AllowedTools} result={result} />
-            </div>
-          )
-        }
-        return (
-          <div key={toolCallId}>
-            <ToolUISkeleton toolName={toolName as AllowedTools} />
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-const ToolUI = ({ toolName, result = null }: { toolName: AllowedTools; result?: any }) => {
-  switch (toolName) {
-    case "searchProducts":
-      return <ProductResultsList products={result} />
-
-    case "searchCategories":
-      return <CategoriesResultsList categories={result} />
-    default:
-      return (
-        <div>
-          Unknown tool - {toolName}:{JSON.stringify(result, null, 2)}
-        </div>
-      )
-  }
-}
-
-const ToolUISkeleton = ({ toolName }: { toolName: AllowedTools }) => {
-  switch (toolName) {
-    case "searchProducts":
-      return <div>i am product search tool skeleton</div>
-    case "searchCategories":
-      return <div>i am category search tool skeleton</div>
-  }
-}
diff --git a/starters/shopify-algolia/app/ai-search/page.tsx b/starters/shopify-algolia/app/ai-search/page.tsx
deleted file mode 100644
index a05750ea..00000000
--- a/starters/shopify-algolia/app/ai-search/page.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-"use client"
-
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "components/ui/sidebar"
-import { AiCommerceSidebar } from "./_components/ai-chat-sidebar"
-import { useChat } from "ai/react"
-import { ToolsUI } from "./_components/tool-messages"
-
-export default function AiSearchPage() {
-  const { messages, setMessages, handleSubmit, input, setInput, isLoading } = useChat({
-    api: "/api/search",
-    maxSteps: 5,
-  })
-
-  return (
-    <div className="flex min-h-screen">
-      <SidebarProvider
-        style={
-          {
-            "--sidebar-width": "20rem",
-            "--sidebar-width-mobile": "20rem",
-          } as React.CSSProperties
-        }
-      >
-        <AiCommerceSidebar handleSubmit={handleSubmit} setInput={setInput} messages={messages} isLoading={isLoading} input={input} setMessages={setMessages} />
-
-        <SidebarInset>
-          <div className="p-4">
-            <SidebarTrigger className="mb-4" />
-            <h1 className="mb-4 text-2xl font-bold text-foreground">AI-Assisted Shopping</h1>
-            <p className="mb-4 text-foreground/80">
-              Use the chat interface on the left to interact with our AI shopping assistant. You can ask for product recommendations, compare items, or get help with your purchase.
-            </p>
-            <div className="grid grid-cols-1 gap-20">
-              {messages.map((message) => message.toolInvocations && message.toolInvocations.length > 0 && <ToolsUI key={message.id} message={message} />)}
-            </div>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-    </div>
-  )
-}
diff --git a/starters/shopify-algolia/app/api/search/route.ts b/starters/shopify-algolia/app/api/search/route.ts
index 15107b35..8498847a 100644
--- a/starters/shopify-algolia/app/api/search/route.ts
+++ b/starters/shopify-algolia/app/api/search/route.ts
@@ -1,26 +1,25 @@
 import { openai } from "@ai-sdk/openai"
 import { type Message, convertToCoreMessages, streamText } from "ai"
 import { systemPrompt } from "lib/ai/prompts"
-import { type AllowedTools, tools } from "lib/ai/tools"
-
-const blocksTools: AllowedTools[] = ["searchProducts", "searchCategories"]
-
-const allTools: AllowedTools[] = blocksTools
+import { tools } from "lib/ai/tools"
 
 export async function POST(request: Request) {
   const { messages } = (await request.json()) as { id: string; messages: Array<Message>; modelId: string }
 
   const coreMessages = convertToCoreMessages(messages)
 
-  const result = streamText({
-    model: openai("gpt-4o"),
-    system: systemPrompt,
-    messages: coreMessages,
-    maxSteps: 5,
-    experimental_activeTools: allTools,
-    abortSignal: request.signal,
-    tools: tools,
-  })
+  try {
+    const result = streamText({
+      model: openai("gpt-4o"),
+      system: systemPrompt,
+      messages: coreMessages,
+      maxSteps: 10,
+      abortSignal: request.signal,
+      tools,
+    })
 
-  return result.toDataStreamResponse()
+    return result.toDataStreamResponse()
+  } catch (error) {
+    console.error(error)
+  }
 }
diff --git a/starters/shopify-algolia/app/api/suggestions/route.ts b/starters/shopify-algolia/app/api/suggestions/route.ts
new file mode 100644
index 00000000..ab4b6bd1
--- /dev/null
+++ b/starters/shopify-algolia/app/api/suggestions/route.ts
@@ -0,0 +1,44 @@
+import { openai } from "@ai-sdk/openai"
+import { type Message, convertToCoreMessages, streamText, StreamData } from "ai"
+import { z } from "zod"
+
+export const maxDuration = 30
+
+export async function POST(request: Request) {
+  const { messages } = (await request.json()) as { id: string; messages: Array<Message>; modelId: string }
+
+  const coreMessages = convertToCoreMessages(messages)
+
+  const streamingData = new StreamData()
+
+  const result = streamText({
+    model: openai("gpt-4-turbo"),
+    system: prompt,
+    messages: coreMessages,
+    maxSteps: 5,
+    tools: {
+      createSuggestions: {
+        description: "Create a list of suggestions for the user to explore products.",
+        parameters: z.object({}),
+      },
+    },
+    onFinish: () => {
+      streamingData.close()
+    },
+  })
+
+  return result.toDataStreamResponse({
+    data: streamingData,
+  })
+}
+
+const prompt = `
+You are a shopping assistant for an e-commerce store, designed to enhance the browsing experience by providing helpful query suggestions. Based on the current conversation context, your primary goal is to suggest relevant next steps or queries in the form of clickable boxes. These suggestions should encourage the user to explore products effortlessly and lead them toward making a purchase.
+
+Focus on the following objectives:
+	1.	Ensure suggestions are contextually relevant to the conversation.
+	2.	Present concise, actionable query suggestions.
+	3.	Encourage product discovery while guiding the user toward a purchase decision.
+
+Your suggestions will appear as clickable boxes that append text to the user’s chat for further exploration. Prioritize relevance and ease of browsing, aiming to create a seamless shopping experience.
+`
diff --git a/starters/shopify-algolia/app/product/[slug]/loading.tsx b/starters/shopify-algolia/app/product/[slug]/loading.tsx
deleted file mode 100644
index e99a823a..00000000
--- a/starters/shopify-algolia/app/product/[slug]/loading.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PageSkeleton } from "app/product/_components/page-skeleton"
-
-export default function Loading() {
-  return <PageSkeleton />
-}
diff --git a/starters/shopify-algolia/app/sitemap.ts b/starters/shopify-algolia/app/sitemap.ts
index 197e9145..354fa561 100644
--- a/starters/shopify-algolia/app/sitemap.ts
+++ b/starters/shopify-algolia/app/sitemap.ts
@@ -52,10 +52,10 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     return item
   })
 
-  const productRoutes = allHits.map(({ handle, updatedAt }) => {
+  const productRoutes = allHits.map((hit) => {
     const item: MetadataRoute.Sitemap[0] = {
-      url: `${env.LIVE_URL}/product/${handle}`,
-      lastModified: updatedAt,
+      url: `${env.LIVE_URL}/product/${hit.handle}`,
+      lastModified: hit.updatedAt ?? new Date(),
       priority: 0.5,
       changeFrequency: "monthly",
     }
diff --git a/starters/shopify-algolia/components/category-card.tsx b/starters/shopify-algolia/components/category-card.tsx
index 2546e0db..b5f2112f 100644
--- a/starters/shopify-algolia/components/category-card.tsx
+++ b/starters/shopify-algolia/components/category-card.tsx
@@ -6,12 +6,13 @@ import { cn } from "utils/cn"
 interface CategoryCardProps extends Pick<PlatformCollection, "title" | "image" | "handle"> {
   index: number
   className?: string
+  href?: string
 }
 
-export const CategoryCard = ({ handle, image, title, index, className }: CategoryCardProps) => {
-  const href = `/category/${handle}`
+export const CategoryCard = ({ handle, image, title, index, className, href }: CategoryCardProps) => {
+  const path = href || `/category/${handle}`
   return (
-    <Link href={href} className={cn("group relative overflow-hidden rounded-lg transition-all hover:shadow-md", className)} prefetch={false}>
+    <Link href={path} className={cn("group relative overflow-hidden rounded-lg transition-all hover:shadow-md", className)} prefetch={false}>
       <div className="relative aspect-video">
         <Image
           src={image?.url || `/category-placeholder-${index}.png`}
diff --git a/starters/shopify-algolia/app/category/_components/category-view.tsx b/starters/shopify-algolia/components/category/category-view.tsx
similarity index 73%
rename from starters/shopify-algolia/app/category/_components/category-view.tsx
rename to starters/shopify-algolia/components/category/category-view.tsx
index 1323cb51..0c2aa43d 100644
--- a/starters/shopify-algolia/app/category/_components/category-view.tsx
+++ b/starters/shopify-algolia/components/category/category-view.tsx
@@ -6,12 +6,13 @@ import { SearchView } from "components/search-view"
 interface CategoryViewProps {
   params: { slug: string; page?: string }
   searchParams?: SearchParamsType
+  basePath?: string
 }
 
-export async function CategoryView({ params, searchParams = {} }: CategoryViewProps) {
+export async function CategoryView({ params, searchParams = {}, basePath }: CategoryViewProps) {
   const collection = await getCollection(params.slug)
 
   if (!collection) return notFound()
 
-  return <SearchView searchParams={searchParams} params={params} collection={collection} />
+  return <SearchView searchParams={searchParams} params={params} collection={collection} basePath={basePath} />
 }
diff --git a/starters/shopify-algolia/app/category/_components/page-skeleton.tsx b/starters/shopify-algolia/components/category/page-skeleton.tsx
similarity index 100%
rename from starters/shopify-algolia/app/category/_components/page-skeleton.tsx
rename to starters/shopify-algolia/components/category/page-skeleton.tsx
diff --git a/starters/shopify-algolia/components/filters/category-facet.tsx b/starters/shopify-algolia/components/filters/category-facet.tsx
index 31ff8b55..8d4c480f 100644
--- a/starters/shopify-algolia/components/filters/category-facet.tsx
+++ b/starters/shopify-algolia/components/filters/category-facet.tsx
@@ -17,7 +17,7 @@ interface CategoryFacetProps {
 
 export function CategoryFacet({ id, title, distribution, isChecked, onCheckedChange }: CategoryFacetProps) {
   const pathname = usePathname()
-  const isSRP = pathname === "/search"
+  const isSRP = pathname === "/search" || pathname === "/ai/search"
 
   const { items } = useHierarchicalMenu({
     attributes: HIERARCHICAL_ATRIBUTES,
diff --git a/starters/shopify-algolia/components/filters/facets-content.tsx b/starters/shopify-algolia/components/filters/facets-content.tsx
index bac53fde..3584fa82 100644
--- a/starters/shopify-algolia/components/filters/facets-content.tsx
+++ b/starters/shopify-algolia/components/filters/facets-content.tsx
@@ -26,6 +26,7 @@ interface FacetsContentProps {
 export function FacetsContent({ independentFacetDistribution, facetDistribution, className, disabledFacets }: FacetsContentProps) {
   const router = useRouter()
   const pathname = usePathname()
+  const isAiPath = pathname.startsWith("/ai/category")
   const { set: setFilterVisibilityStatus, status } = useFilterStore((s) => s)
 
   const collections: Record<string, Record<string, number>> = HIERARCHICAL_ATRIBUTES.reduce((acc, key) => {
@@ -33,7 +34,7 @@ export function FacetsContent({ independentFacetDistribution, facetDistribution,
     return acc
   }, {})
 
-  const vendors = facetDistribution?.["vendor"]
+  const vendors = independentFacetDistribution?.["vendor"]
   const colors = facetDistribution?.["flatOptions.Color"]
 
   const { set: setLastSelected, selected: lastSelected } = useFilterTransitionStore((s) => s)
@@ -126,7 +127,7 @@ export function FacetsContent({ independentFacetDistribution, facetDistribution,
             onCheckedChange={(category) => {
               const checked = selectedCategories.includes(category)
 
-              if (pathname === "/search") {
+              if (pathname === "/search" || pathname === "/ai/search") {
                 setSelectedCategories((prev) => {
                   if (checked) {
                     return prev.filter((cat) => cat !== category)
@@ -140,7 +141,7 @@ export function FacetsContent({ independentFacetDistribution, facetDistribution,
               }
 
               setLastSelected("categories")
-              router.push(`/category/${category.split(HIERARCHICAL_SEPARATOR).pop()}`)
+              router.push(`${isAiPath ? "/ai/category" : "/category"}/${category.split(HIERARCHICAL_SEPARATOR).pop()}`)
             }}
           />
         )}
diff --git a/starters/shopify-algolia/components/filters/hits-section.tsx b/starters/shopify-algolia/components/filters/hits-section.tsx
index 486a0370..52c059b2 100644
--- a/starters/shopify-algolia/components/filters/hits-section.tsx
+++ b/starters/shopify-algolia/components/filters/hits-section.tsx
@@ -3,16 +3,17 @@ import type { CommerceProduct } from "types"
 
 interface HitsSectionProps {
   hits: CommerceProduct[]
+  basePath?: string
 }
 
-export async function HitsSection({ hits }: HitsSectionProps) {
+export async function HitsSection({ hits, basePath }: HitsSectionProps) {
   if (!hits.length) {
     return <p>No results for this query</p>
   }
   return (
     <div className="-px-4 grid w-full grid-cols-2 items-start gap-1 gap-y-8 sm:grid-cols-3 sm:gap-6 lg:grid-cols-2 xl:grid-cols-3">
       {hits.map((singleResult, idx) => (
-        <ProductCard key={singleResult.id} priority={[0, 1].includes(idx)} {...singleResult} />
+        <ProductCard key={singleResult.id} priority={[0, 1].includes(idx)} {...singleResult} href={basePath ? `/${basePath}/product/${singleResult.handle}` : undefined} />
       ))}
     </div>
   )
diff --git a/starters/shopify-algolia/components/navigation-bar/autocomplete.tsx b/starters/shopify-algolia/components/navigation-bar/autocomplete.tsx
index 7a9d9cd8..ab6dbc3f 100644
--- a/starters/shopify-algolia/components/navigation-bar/autocomplete.tsx
+++ b/starters/shopify-algolia/components/navigation-bar/autocomplete.tsx
@@ -4,7 +4,7 @@
 import { type KeyboardEvent, useState } from "react"
 
 import Link from "next/link"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 
 import { useClickAway } from "@uidotdev/usehooks"
 
@@ -21,6 +21,10 @@ interface AutocompleteProps {
 
 export function Autocomplete({ className }: AutocompleteProps) {
   const router = useRouter()
+  const pathanme = usePathname()
+
+  const isAi = pathanme.startsWith("/ai")
+
   const [isOpen, setIsOpen] = useState(false)
   const { query, results, isPending, onChange, status } = useAutocomplete({
     callback: () => !isOpen && setIsOpen(true),
@@ -35,7 +39,7 @@ export function Autocomplete({ className }: AutocompleteProps) {
 
   function handleOnKeyDown(e: KeyboardEvent<HTMLInputElement>) {
     if (e.key === "Enter") {
-      router.push(`/search?q=${query}`)
+      router.push(`${isAi ? "/ai/search" : "/search"}?q=${query}`)
       setIsOpen(false)
     }
   }
@@ -63,7 +67,7 @@ export function Autocomplete({ className }: AutocompleteProps) {
         {hasResults &&
           results.map((singleProduct) => (
             <Link
-              href={`/product/${singleProduct.handle}`}
+              href={`${isAi ? "/ai/product" : "/product"}/${singleProduct.handle}`}
               className="flex h-[70px] cursor-pointer items-center gap-4 border-b border-neutral-200 p-4 last:rounded-b-md last:border-0 hover:bg-neutral-50"
               key={singleProduct.id}
               onClick={() => setIsOpen(false)}
diff --git a/starters/shopify-algolia/components/navigation-bar/navigation-bar.tsx b/starters/shopify-algolia/components/navigation-bar/navigation-bar.tsx
index 1dbadf5a..3e09f85a 100644
--- a/starters/shopify-algolia/components/navigation-bar/navigation-bar.tsx
+++ b/starters/shopify-algolia/components/navigation-bar/navigation-bar.tsx
@@ -16,7 +16,7 @@ import { SearchButton } from "./search-button"
 import { NavigationItem } from "./navigation-item"
 import Link from "next/link"
 
-const ProductAddedAlert = dynamic(() => import("app/product/_components/product-added-alert").then((mod) => mod.ProductAddedAlert))
+const ProductAddedAlert = dynamic(() => import("components/product/product-added-alert").then((mod) => mod.ProductAddedAlert))
 
 interface NavigationBarProps {
   items: NavItem[]
@@ -44,17 +44,12 @@ export function NavigationBar({ items }: NavigationBarProps) {
 
       <div className="submenu megamenu__text w-full border-b border-black shadow-sm">
         <VariantGrid items={singleMenuItem.submenu?.items} variant={singleMenuItem.submenu?.variant} />
-        <div className="submenu__inner flex w-full flex-col gap-4 md:hidden">
-          <a href={singleMenuItem.href || "#"}>
-            <h4 className="mb-20 text-center text-xl underline">See all {singleMenuItem.text}</h4>
-          </a>
-        </div>
       </div>
     </li>
   ))
 
   return (
-    <header className="mega-navbar sticky top-0 z-50 mx-auto my-0 flex w-full flex-wrap content-center items-center justify-between border-b border-black bg-white py-6">
+    <header className="mega-navbar sticky top-0 z-50 mx-auto my-0 flex w-full flex-wrap content-center items-center justify-between border-b border-black bg-white p-4 py-6">
       <div className="flex justify-start px-4 md:mx-auto md:w-full md:max-w-container-md md:px-0">
         <Link prefetch={false} href="/" className="brand mr-20 hidden items-center text-xl font-bold md:flex">
           Acme
diff --git a/starters/shopify-algolia/components/navigation-bar/navigation-item.tsx b/starters/shopify-algolia/components/navigation-bar/navigation-item.tsx
index 3c24086c..3349ca2c 100644
--- a/starters/shopify-algolia/components/navigation-bar/navigation-item.tsx
+++ b/starters/shopify-algolia/components/navigation-bar/navigation-item.tsx
@@ -3,8 +3,13 @@
 import type { MouseEvent } from "react"
 import { ChevronIcon } from "components/icons/chevron-icon"
 import { NavItem } from "./types"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
 
 export function NavigationItem({ singleMenuItem }: { singleMenuItem: NavItem }) {
+  const pathname = usePathname()
+  const isAi = pathname.startsWith("/ai")
+
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
     if (singleMenuItem.submenu && window.innerWidth < 768) {
       e.preventDefault()
@@ -12,13 +17,13 @@ export function NavigationItem({ singleMenuItem }: { singleMenuItem: NavItem })
   }
 
   return (
-    <a onClick={handleClick} href={singleMenuItem.href || "#"} className="menu__link text-[22px] hover:underline md:text-sm/[18px]">
+    <Link prefetch={false} onClick={handleClick} href={`${isAi ? "/ai" : ""}${singleMenuItem.href}`} className="menu__link text-[22px] hover:underline md:text-sm/[18px]">
       {singleMenuItem.text}
       {!!singleMenuItem.submenu && (
         <i>
           <ChevronIcon />
         </i>
       )}
-    </a>
+    </Link>
   )
 }
diff --git a/starters/shopify-algolia/components/navigation-bar/variants/text-grid.tsx b/starters/shopify-algolia/components/navigation-bar/variants/text-grid.tsx
index 2c06eb58..ef23a781 100644
--- a/starters/shopify-algolia/components/navigation-bar/variants/text-grid.tsx
+++ b/starters/shopify-algolia/components/navigation-bar/variants/text-grid.tsx
@@ -1,5 +1,8 @@
+"use client"
+
 import Link from "next/link"
 import { TextGridItem } from "../types"
+import { usePathname } from "next/navigation"
 
 interface TextGridVariantProps {
   items: TextGridItem[]
@@ -7,13 +10,15 @@ interface TextGridVariantProps {
 
 export function TextGridVariant({ items }: TextGridVariantProps) {
   if (!items?.length) return null
+  const pathname = usePathname()
+  const isAi = pathname.startsWith("/ai")
 
   return (
     <div className="mx-auto mb-10 mt-20 grid w-full max-w-container-md grid-cols-[repeat(_auto-fit,minmax(250px,1fr)_)] gap-8 px-4 md:my-0 md:py-14 xl:px-0">
       {items.map((singleCategory) => (
         <div className="submenu__inner flex w-full flex-col gap-4" key={singleCategory.text}>
           {singleCategory.href ? (
-            <Link href={singleCategory.href} prefetch={false}>
+            <Link href={`${isAi ? "/ai" : ""}${singleCategory.href}`} prefetch={false}>
               <h4 className="submenu__title text-[22px] underline">{singleCategory.text}</h4>
             </Link>
           ) : (
@@ -22,7 +27,7 @@ export function TextGridVariant({ items }: TextGridVariantProps) {
           <ul className="submenu__list flex flex-col items-start justify-start gap-2 text-left">
             {singleCategory?.items?.map((item) => (
               <li key={item.text} className="hover:underline">
-                <Link href={item.href} prefetch={false}>
+                <Link href={`${isAi ? "/ai" : ""}${item.href}`} prefetch={false}>
                   {item.text}
                 </Link>
               </li>
diff --git a/starters/shopify-algolia/components/product-card.tsx b/starters/shopify-algolia/components/product-card.tsx
index 2beaa90a..d63e6ac3 100644
--- a/starters/shopify-algolia/components/product-card.tsx
+++ b/starters/shopify-algolia/components/product-card.tsx
@@ -9,16 +9,30 @@ interface ProductCardProps extends Pick<CommerceProduct, "variants" | "handle" |
   priority?: boolean
   prefetch?: boolean
   className?: string
+  href?: string
 }
 
-export const ProductCard = ({ variants, handle, title, featuredImage, minPrice, avgRating, totalReviews, className, priority, vendor, prefetch = false }: ProductCardProps) => {
+export const ProductCard = ({
+  variants,
+  handle,
+  title,
+  featuredImage,
+  minPrice,
+  avgRating,
+  totalReviews,
+  className,
+  priority,
+  vendor,
+  prefetch = false,
+  href = "",
+}: ProductCardProps) => {
   const noOfVariants = variants?.length
-  const href = `/product/${handle}`
+  const path = href || `/product/${handle}`
   const linkAria = `Visit product: ${title}`
   const variantPrice = variants?.find(Boolean)?.price
 
   return (
-    <Link className={cn("group flex h-full w-full flex-col overflow-hidden", className)} aria-label={linkAria} href={href} prefetch={prefetch}>
+    <Link className={cn("group flex h-full w-full flex-col overflow-hidden", className)} aria-label={linkAria} href={path} prefetch={prefetch}>
       <div className="relative aspect-square overflow-hidden">
         <Image
           priority={priority}
diff --git a/starters/shopify-algolia/app/product/_components/add-to-cart-button.tsx b/starters/shopify-algolia/components/product/add-to-cart-button.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/add-to-cart-button.tsx
rename to starters/shopify-algolia/components/product/add-to-cart-button.tsx
diff --git a/starters/shopify-algolia/app/product/_components/center-image-section.tsx b/starters/shopify-algolia/components/product/center-image-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/center-image-section.tsx
rename to starters/shopify-algolia/components/product/center-image-section.tsx
diff --git a/starters/shopify-algolia/app/product/_components/faq-section.tsx b/starters/shopify-algolia/components/product/faq-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/faq-section.tsx
rename to starters/shopify-algolia/components/product/faq-section.tsx
diff --git a/starters/shopify-algolia/app/product/_components/favorite-marker.tsx b/starters/shopify-algolia/components/product/favorite-marker.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/favorite-marker.tsx
rename to starters/shopify-algolia/components/product/favorite-marker.tsx
diff --git a/starters/shopify-algolia/app/product/_components/page-skeleton.tsx b/starters/shopify-algolia/components/product/page-skeleton.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/page-skeleton.tsx
rename to starters/shopify-algolia/components/product/page-skeleton.tsx
diff --git a/starters/shopify-algolia/app/product/_components/product-added-alert.tsx b/starters/shopify-algolia/components/product/product-added-alert.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/product-added-alert.tsx
rename to starters/shopify-algolia/components/product/product-added-alert.tsx
diff --git a/starters/shopify-algolia/app/product/_components/product-images.tsx b/starters/shopify-algolia/components/product/product-images.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/product-images.tsx
rename to starters/shopify-algolia/components/product/product-images.tsx
diff --git a/starters/shopify-algolia/app/product/_components/product-title.tsx b/starters/shopify-algolia/components/product/product-title.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/product-title.tsx
rename to starters/shopify-algolia/components/product/product-title.tsx
diff --git a/starters/shopify-algolia/app/product/_components/review-button.tsx b/starters/shopify-algolia/components/product/review-button.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/review-button.tsx
rename to starters/shopify-algolia/components/product/review-button.tsx
diff --git a/starters/shopify-algolia/app/product/_components/review-card.tsx b/starters/shopify-algolia/components/product/review-card.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/review-card.tsx
rename to starters/shopify-algolia/components/product/review-card.tsx
diff --git a/starters/shopify-algolia/app/product/_components/reviews-section.tsx b/starters/shopify-algolia/components/product/reviews-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/reviews-section.tsx
rename to starters/shopify-algolia/components/product/reviews-section.tsx
diff --git a/starters/shopify-algolia/app/product/_components/right-section.tsx b/starters/shopify-algolia/components/product/right-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/right-section.tsx
rename to starters/shopify-algolia/components/product/right-section.tsx
diff --git a/starters/shopify-algolia/app/product/_components/side-images.tsx b/starters/shopify-algolia/components/product/side-images.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/side-images.tsx
rename to starters/shopify-algolia/components/product/side-images.tsx
diff --git a/starters/shopify-algolia/app/product/_components/similar-product-section-skeleton.tsx b/starters/shopify-algolia/components/product/similar-product-section-skeleton.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/similar-product-section-skeleton.tsx
rename to starters/shopify-algolia/components/product/similar-product-section-skeleton.tsx
diff --git a/starters/shopify-algolia/app/product/_components/similar-products-section.tsx b/starters/shopify-algolia/components/product/similar-products-section.tsx
similarity index 79%
rename from starters/shopify-algolia/app/product/_components/similar-products-section.tsx
rename to starters/shopify-algolia/components/product/similar-products-section.tsx
index 7b182b52..1c232f3d 100644
--- a/starters/shopify-algolia/app/product/_components/similar-products-section.tsx
+++ b/starters/shopify-algolia/components/product/similar-products-section.tsx
@@ -5,9 +5,10 @@ import { getSimilarProducts } from "lib/algolia"
 interface SimilarProductsSectionProps {
   slug: string
   objectID: string
+  basePath?: string
 }
 
-export async function SimilarProductsSection({ slug, objectID }: SimilarProductsSectionProps) {
+export async function SimilarProductsSection({ slug, objectID, basePath }: SimilarProductsSectionProps) {
   const items = await getSimilarProducts(slug, objectID)
 
   return (
@@ -19,7 +20,7 @@ export async function SimilarProductsSection({ slug, objectID }: SimilarProducts
         <CarouselContent>
           {items.map((product, idx) => (
             <CarouselItem className="basis-1/2 md:basis-1/4" key={"featured_" + product.id + idx}>
-              <ProductCard prefetch {...product} />
+              <ProductCard href={basePath ? `/${basePath}/product/${product.handle}` : undefined} prefetch {...product} />
             </CarouselItem>
           ))}
         </CarouselContent>
diff --git a/starters/shopify-algolia/app/product/_components/variant.tsx b/starters/shopify-algolia/components/product/variant.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/variant.tsx
rename to starters/shopify-algolia/components/product/variant.tsx
diff --git a/starters/shopify-algolia/app/product/_components/variants-section.tsx b/starters/shopify-algolia/components/product/variants-section.tsx
similarity index 100%
rename from starters/shopify-algolia/app/product/_components/variants-section.tsx
rename to starters/shopify-algolia/components/product/variants-section.tsx
diff --git a/starters/shopify-algolia/components/search-view.tsx b/starters/shopify-algolia/components/search-view.tsx
index 23b0c488..30f4d884 100644
--- a/starters/shopify-algolia/components/search-view.tsx
+++ b/starters/shopify-algolia/components/search-view.tsx
@@ -2,10 +2,9 @@ import { Suspense } from "react"
 import { createSearchParamsCache, parseAsArrayOf, parseAsInteger, parseAsString } from "nuqs/server"
 
 import type { PlatformCollection } from "lib/shopify/types"
-import { FilterBuilder } from "lib/algolia/filter-builder"
 import { getFilteredProducts } from "lib/algolia"
 
-import { composeFilters } from "utils/compose-filters"
+import { buildSearchFilter } from "utils/build-search-filter"
 
 import { FacetsDesktop } from "components/filters/facets-desktop"
 import { HitsSection } from "components/filters/hits-section"
@@ -22,6 +21,7 @@ interface SearchViewProps {
   params?: { slug: string; page?: string }
   collection?: PlatformCollection
   disabledFacets?: string[]
+  basePath?: string
 }
 
 export const searchParamsCache = createSearchParamsCache({
@@ -48,21 +48,16 @@ function makePageTitle(collection: PlatformCollection | undefined, query: string
   return "Search"
 }
 
-export async function SearchView({ searchParams, disabledFacets, collection }: SearchViewProps) {
+export async function SearchView({ searchParams, disabledFacets, collection, basePath }: SearchViewProps) {
   const { q, sortBy, page, ...rest } = searchParamsCache.parse(searchParams)
 
-  const filterBuilder = new FilterBuilder()
+  const filter = buildSearchFilter({
+    collection,
+    params: rest,
+    separator: HIERARCHICAL_SEPARATOR,
+  })
 
-  if (collection) {
-    filterBuilder.where("collections.handle", collection.handle)
-  }
-
-  const { facetDistribution, hits, totalPages, totalHits, independentFacetDistribution } = await getFilteredProducts(
-    q,
-    sortBy,
-    page,
-    composeFilters(filterBuilder, rest, HIERARCHICAL_SEPARATOR).build()
-  )
+  const { facetDistribution, hits, totalPages, totalHits, independentFacetDistribution } = await getFilteredProducts(q, sortBy, page, filter)
 
   return (
     <div className="mx-auto w-full max-w-[1920px] p-4 md:px-12 md:pb-24 md:pt-4">
@@ -94,7 +89,7 @@ export async function SearchView({ searchParams, disabledFacets, collection }: S
         </Suspense>
         <div className="w-full">
           <div className="px-4"></div>
-          <HitsSection hits={hits} />
+          <HitsSection hits={hits} basePath={basePath} />
           <PaginationSection queryParams={searchParams} totalPages={totalPages} />
         </div>
       </div>
diff --git a/starters/shopify-algolia/components/ui/chat-message.tsx b/starters/shopify-algolia/components/ui/chat-message.tsx
index 91d9f48b..6207b26e 100644
--- a/starters/shopify-algolia/components/ui/chat-message.tsx
+++ b/starters/shopify-algolia/components/ui/chat-message.tsx
@@ -1,15 +1,21 @@
 "use client"
 
-import React from "react"
+import React, { useEffect } from "react"
+import type { Message as SDKMessage } from "ai"
 import { cva, type VariantProps } from "class-variance-authority"
 import { MarkdownRenderer } from "./markdown-renderer"
 import { cn } from "utils/cn"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
 
 const chatBubbleVariants = cva("group/message relative break-words rounded-lg p-3 text-sm sm:max-w-[70%]", {
   variants: {
-    isUser: {
-      true: "bg-primary",
-      false: "bg-muted",
+    role: {
+      user: "bg-primary",
+      assistant: "bg-muted",
+      data: "",
+      system: "",
+      toolInvocation: "font-bold text-sm bg-orange-700 text-orange-100", // abstract, normally tool invocations are marked as assistant role
     },
     animation: {
       none: "",
@@ -20,22 +26,22 @@ const chatBubbleVariants = cva("group/message relative break-words rounded-lg p-
   },
   compoundVariants: [
     {
-      isUser: true,
+      role: "user",
       animation: "slide",
       class: "slide-in-from-right",
     },
     {
-      isUser: false,
+      role: "assistant",
       animation: "slide",
       class: "slide-in-from-left",
     },
     {
-      isUser: true,
+      role: "user",
       animation: "scale",
       class: "origin-bottom-right",
     },
     {
-      isUser: false,
+      role: "assistant",
       animation: "scale",
       class: "origin-bottom-left",
     },
@@ -44,22 +50,18 @@ const chatBubbleVariants = cva("group/message relative break-words rounded-lg p-
 
 type Animation = VariantProps<typeof chatBubbleVariants>["animation"]
 
-export interface Message {
+export interface Message extends SDKMessage {
   id: string
-  role: "user" | "assistant" | (string & {})
   content: string
   createdAt?: Date
-  attachments?: File[]
 }
 
 export interface ChatMessageProps extends Message {
   showTimeStamp?: boolean
   animation?: Animation
-  actions?: React.ReactNode
-  showToolMessages?: boolean
 }
 
-export const ChatMessage: React.FC<ChatMessageProps> = ({ role, content, createdAt, showTimeStamp = false, animation = "scale", actions, showToolMessages }) => {
+export const ChatMessage: React.FC<ChatMessageProps> = ({ role, content, createdAt, showTimeStamp = false, animation = "scale", toolInvocations }) => {
   const isUser = role === "user"
 
   const formattedTime = createdAt?.toLocaleTimeString("en-US", {
@@ -67,23 +69,46 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ role, content, created
     minute: "2-digit",
   })
 
+  if (!!toolInvocations?.length) {
+    return toolInvocations.map((toolInvocation) => {
+      const { toolName, toolCallId, state } = toolInvocation
+
+      if (state === "result") {
+        if (toolName === "buildNavigationQuery") {
+          const { result } = toolInvocation
+          return <NavigationToolResult key={toolCallId} result={result} animation={animation} />
+        }
+      }
+    })
+  }
+
   return (
     <div className={cn("flex flex-col", isUser ? "items-end" : "items-start")}>
-      <div className={chatBubbleVariants({ isUser, animation })}>
+      <div className={chatBubbleVariants({ role, animation })}>
         <div className={isUser ? "text-primary-foreground" : "text-foreground"}>
           <MarkdownRenderer>{content}</MarkdownRenderer>
         </div>
-
-        {!!(role === "assistant" && actions && showToolMessages) && (
-          <div className="absolute -bottom-4 right-2 flex space-x-1 rounded-lg border bg-background p-1 opacity-0 transition-opacity group-hover/message:opacity-100">
-            {actions}
-          </div>
-        )}
       </div>
-
       {showTimeStamp && createdAt ? (
         <span className={cn("mt-1 block px-1 text-xs opacity-50", animation !== "none" && "duration-500 animate-in fade-in-0")}>{formattedTime}</span>
       ) : null}
     </div>
   )
 }
+
+const NavigationToolResult = ({ animation, result }) => {
+  const router = useRouter()
+  useEffect(() => {
+    router.push(result)
+  }, [])
+
+  return (
+    <div className={cn("flex flex-col", "items-start")}>
+      <div className={chatBubbleVariants({ role: "toolInvocation", animation })}>
+        <Link prefetch={false} href={result}>
+          Navigation result
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/starters/shopify-algolia/components/ui/message-list.tsx b/starters/shopify-algolia/components/ui/message-list.tsx
index dcc073ee..3d4abb12 100644
--- a/starters/shopify-algolia/components/ui/message-list.tsx
+++ b/starters/shopify-algolia/components/ui/message-list.tsx
@@ -12,7 +12,7 @@ interface MessageListProps {
 
 export function MessageList({ messages, showTimeStamps = true, isTyping = false, messageOptions }: MessageListProps) {
   return (
-    <div className="space-y-4 overflow-visible">
+    <div className="my-4 space-y-4 overflow-visible">
       {messages.map((message, index) => {
         const additionalOptions = typeof messageOptions === "function" ? messageOptions(message) : messageOptions
 
diff --git a/starters/shopify-algolia/components/ui/prompt-suggestions.tsx b/starters/shopify-algolia/components/ui/prompt-suggestions.tsx
index 8d92fd94..ed62528f 100644
--- a/starters/shopify-algolia/components/ui/prompt-suggestions.tsx
+++ b/starters/shopify-algolia/components/ui/prompt-suggestions.tsx
@@ -1,24 +1,28 @@
-interface PromptSuggestionsProps {
-  label?: string | null
-  append: (message: { role: "user"; content: string }) => void
-  suggestions: string[]
-}
+import type { ButtonHTMLAttributes } from "react"
+import { cn } from "utils/cn"
+import { Button } from "./button"
+
+type PromptSuggestionsProps = {
+  children: React.ReactNode
+} & React.HTMLAttributes<HTMLDivElement>
 
-export function PromptSuggestions({ label = null, append, suggestions }: PromptSuggestionsProps) {
+export function PromptSuggestions({ children, className, ...rest }: PromptSuggestionsProps) {
   return (
-    <div>
-      {!!label && <h2 className="text-center text-2xl font-bold">{label}</h2>}
-      <div className="flex flex-wrap gap-1 text-sm">
-        {suggestions.map((suggestion) => (
-          <button
-            key={suggestion}
-            onClick={() => append({ role: "user", content: suggestion })}
-            className="flex-1 grow basis-1/3 rounded-xl border bg-background p-4 hover:bg-muted"
-          >
-            <p>{suggestion}</p>
-          </button>
-        ))}
-      </div>
+    <div className={cn("flex flex-wrap gap-1 text-sm", className)} {...rest}>
+      {children}
     </div>
   )
 }
+
+type PromptSuggestionProps = {
+  children: string
+  value: string
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export function PromptSuggestion({ children, value, className, ...rest }: PromptSuggestionProps) {
+  return (
+    <Button className={cn("flex-1 grow basis-1/3 rounded-xl p-4", className)} {...rest}>
+      {children}
+    </Button>
+  )
+}
diff --git a/starters/shopify-algolia/components/ui/sidebar.tsx b/starters/shopify-algolia/components/ui/sidebar.tsx
index ec27d1f4..d0fdb7ef 100644
--- a/starters/shopify-algolia/components/ui/sidebar.tsx
+++ b/starters/shopify-algolia/components/ui/sidebar.tsx
@@ -5,21 +5,21 @@ import { Slot } from "@radix-ui/react-slot"
 import { VariantProps, cva } from "class-variance-authority"
 import { PanelLeft } from "lucide-react"
 
+import { useIsMobile } from "utils/use-mobile"
+import { cn } from "utils/cn"
 import { Button } from "components/ui/button"
 import { Input } from "components/ui/input"
 import { Separator } from "components/ui/separator"
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "components/ui/sheet"
+import { Sheet, SheetContent } from "components/ui/sheet"
 import { Skeleton } from "components/ui/skeleton"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "components/ui/tooltip"
-import { useIsMobile } from "hooks/use-mobile"
-import { cn } from "utils/cn"
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "k"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
 type SidebarContext = {
   state: "expanded" | "collapsed"
@@ -162,7 +162,6 @@ const Sidebar = React.forwardRef<
           }
           side={side}
         >
-          <SheetTitle className="sr-only">Sidebar</SheetTitle>
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
@@ -172,28 +171,44 @@ const Sidebar = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn("group sticky top-0 flex h-screen text-sidebar-foreground md:block", variant === "floating" && "p-2", className)}
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
       data-side={side}
     >
+      {/* This is what handles the sidebar gap on desktop */}
       <div
-        data-sidebar="sidebar"
         className={cn(
-          "flex h-full flex-col overflow-auto bg-sidebar transition-[width] duration-200",
-          {
-            "w-[--sidebar-width]": state === "expanded",
-            "w-0 overflow-hidden": collapsible === "offcanvas" && state === "collapsed",
-            "w-[--sidebar-width-icon]": collapsible === "icon" && state === "collapsed",
-          },
-          variant === "floating" && "rounded-lg border border-sidebar-border shadow",
-          side === "left" ? "border-r" : "border-l"
+          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
         )}
+        {...props}
       >
-        {children}
+        <div
+          data-sidebar="sidebar"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+        >
+          {children}
+        </div>
       </div>
-      {(collapsible === "offcanvas" || collapsible === "icon") && <SidebarRail className="hidden md:flex" />}
     </div>
   )
 })
@@ -234,9 +249,12 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"bu
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-1 transition-all ease-linear hover:bg-sidebar-border group-data-[side=left]:right-0 group-data-[side=right]:left-0 sm:block",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
         "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
       )}
       {...props}
@@ -250,8 +268,8 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-full flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100%-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className
       )}
       {...props}
diff --git a/starters/shopify-algolia/components/ui/toggle-group.tsx b/starters/shopify-algolia/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1d6d1180
--- /dev/null
+++ b/starters/shopify-algolia/components/ui/toggle-group.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { VariantProps, cva } from "class-variance-authority"
+import { cn } from "utils/cn"
+
+const toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>>(
+  ({ className, ...props }, ref) => <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props} />
+)
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>
+>(({ className, variant, size, ...props }, ref) => <ToggleGroupPrimitive.Item ref={ref} className={cn(toggleGroupItemVariants({ variant, size, className }))} {...props} />)
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/starters/shopify-algolia/lib/ai/chat/index.ts b/starters/shopify-algolia/lib/ai/chat/index.ts
index bd3a1366..86af6d9e 100644
--- a/starters/shopify-algolia/lib/ai/chat/index.ts
+++ b/starters/shopify-algolia/lib/ai/chat/index.ts
@@ -1,6 +1,6 @@
-// Original: https://github.com/vercel/ai-chatbot/blob/main/lib/utils.ts
+// Origin: https://github.com/vercel/ai-chatbot/blob/main/lib/utils.ts
 
-import type { CoreAssistantMessage, CoreToolMessage, Message } from "ai"
+import type { CoreAssistantMessage, CoreMessage, CoreToolMessage, Message } from "ai"
 
 export function sanitizeUIMessages(messages: Array<Message>): Array<Message> {
   const messagesBySanitizedToolInvocations = messages.map((message) => {
@@ -57,3 +57,8 @@ export function sanitizeResponseMessages(messages: Array<CoreToolMessage | CoreA
 
   return messagesBySanitizedContent.filter((message) => message.content.length > 0)
 }
+
+export function getMostRecentUserMessage(messages: Array<CoreMessage>) {
+  const userMessages = messages.filter((message) => message.role === "user")
+  return userMessages.at(-1)
+}
diff --git a/starters/shopify-algolia/lib/ai/prompts.ts b/starters/shopify-algolia/lib/ai/prompts.ts
index 2695622f..7d1a8fa5 100644
--- a/starters/shopify-algolia/lib/ai/prompts.ts
+++ b/starters/shopify-algolia/lib/ai/prompts.ts
@@ -1,54 +1,46 @@
-const blocksPrompt = `
-  Blocks is a special user interface mode that helps users with browse experience. When tool is invoked, it is on the right side of the screen, while the conversation is on the left side.
-
-  This is a guide for using blocks tools: \`searchProducts\` and \`searchCategories\`, which render content on blocks beside the conversation.
-
-  **When to use \`searchProducts\`:**
-  - For product discovery, helping users find specific items
-  - To browse products within a category
-  - For detailed feature-based searches (e.g., by price, color, or specifications)
-  - To provide personalized product recommendations based on user preferences
-  - To highlight deals, discounts, or special offers
-  - To find compatible replacement parts or accessories
-  - For suggesting alternatives to out-of-stock items
-  - To check availability of a specific product in stock or by location
-
-  **When NOT to use \`searchProducts\`:**
-  - For irrelevant queries, for example: "What is your return policy?"
-  - For broad intent, for example: "What do you sell?"
-  - When specific or contextual assistance is required
-  - During greeting or onboarding conversations
-  - For unclear or incomplete input, e.g., "Find me something great"
-  - When features requested are unavailable in the tool
-  - For non-search-based interactions, e.g., support or transactional queries
-  - When the summary or answer should remain inline in the chat
-
-  **When to use \`searchCategories\`:**
- - For general browsing
- - For category exploration
- - To find related products
- - For discovery-based navigation
- - To filter options by interests
- - To guide users to specific subcategories
- - For user segmentation by interest
- - To clarify product scope
-
- **When NOT to use \`searchCategories\`:**
- - For detailed product searches, e.g., "Find me a blue sofa under $500."
- - For policy or service questions, e.g., "How can I return a product?"
- - For vague or unclear intent, e.g., "I’m not sure what I want."
- - For off-topic queries, e.g., "Tell me the history of smartphones."
- - When niche requests are better suited to \`searchProducts\`
- - For post-purchase support, e.g., "I need help with my recent order."
- - When the context already specifies the category, e.g., "Show me men’s shoes."
- - When the query is too specific for categories, e.g., "What categories do you have for red dresses?"
-
- **Additional Instructions for Responses:**
- - Do not include a summary of the tool's results in markdown format in the chat.
- - If the tool invocation is successful, confirm the action but do not elaborate on the results inline.
- - Only provide a summary or explanation if explicitly requested by the user.
+export const systemPrompt = `
+You are a shopping assistant for an e-commerce website. Your primary goal is to help users navigate the site by generating accurate URLs based on their needs.
+
+**Tools Available:**
+
+1. \`searchProducts\` – Use this to find a specific product when the user explicitly specifies one (e.g., “Show me Apple headphones”).
+2. \`searchCategories\` – Use this to find relevant categories for browsing or when the user’s request is broad or unclear (e.g., “I want red T-shirts” or “running shoes under 50$”).
+3. \`buildNavigationQuery\` – **Always use this tool after completing any search or filtration.** It will return the exact URL to navigate the user to the desired page.
+
+When using \`buildNavigationQuery\`, you can include optional filters to refine the results. The \`filters\` object supports the following properties:
+- Use \`resultType: 'category'\` when the user specifies a clear product category like "hoodies" or "shoes."
+- Use \`resultType: 'search'\` if the user does not specify a category but provides other filters like vendor, price range, or sort order. Attach the relevant filters to the \`filters\` object in this case.
+- \`minPrice\`: Specify a minimum price (number).
+- \`maxPrice\`: Specify a maximum price (number).
+- \`vendors\`: Filter by an array of vendor names (strings).
+- \`color\`: Filter by an array of colors (strings).
+- \`sortBy\`: Specify the sorting order (string). Available sorting options:
+  - \`price-high-to-low\`
+  - \`price-low-to-high\`
+  - \`customer-reviews\`
+  - \`newest\`
+  - \`oldest\`
+  - \`relevancy\`
+
+The \`filters\` object is optional, and the \`sortBy\` parameter should only be included when explicitly requested by the user.
+
+**Behavioral Guidelines:**
+
+1. **Short and concise responses** – Provide minimal chat text. User will be navigated to the result page, so avoid repeating product or category details or providing any links in the chat.
+2. **Ask for clarification if needed** – If the user’s request is ambiguous, request more details before proceeding.
+3. **Accurate tool usage only** – Don’t guess or create navigation paths. Always rely on the tools’ outputs. If no results match the user’s query, inform them politely and suggest alternatives.
+4. **Friendly and professional tone** – Be polite, approachable, and straightforward. Avoid jargon; keep explanations clear and easy to understand.
+5. **Iterative broadening for unavailable queries** – If no results are found for a detailed query:
+    - Broaden the query **up to 2 times maximum**:
+        - First, remove one specific filter (e.g., drop brand but keep price).
+        - If still no results, broaden further by removing another filter (e.g., drop price but retain product type).
+    - If no results are found after 2 iterations, **stop broadening and provide the best available results or related categories.**
+    - **Always use \`buildNavigationQuery\` to finalize navigation for the current results** and clearly explain to the user how the query was adjusted.
+6. **Alternative results for unmatched queries** – Suggest closely related categories or products and explain briefly why the original request wasn’t possible.
+7. **No repetition of tool results** – Assume the user navigates using the final URL. Avoid echoing details unless it provides useful hints.
+8. **Conversion-focused responses** – Guide the user towards next steps or related searches.
+9. **Persist filters across the conversation** – Retain filters provided by the user until they explicitly ask to remove them or the context of the conversation changes completely.
+
+
+This ensures that when users refine their queries, the assistant dynamically uses the previous context to guide them accurately while adhering to all tool usage rules.
 `
-
-const regularPrompt = "You are a friendly assistant! Keep your responses concise and helpful."
-
-export const systemPrompt = `${regularPrompt}\n\n${blocksPrompt}`
diff --git a/starters/shopify-algolia/lib/ai/tools.ts b/starters/shopify-algolia/lib/ai/tools.ts
index 756b1472..34be1bee 100644
--- a/starters/shopify-algolia/lib/ai/tools.ts
+++ b/starters/shopify-algolia/lib/ai/tools.ts
@@ -2,42 +2,112 @@ import { tool as createTool, type CoreTool } from "ai"
 import { getCategories, getProducts } from "lib/algolia"
 import { z } from "zod"
 
-export type AllowedTools = "searchProducts" | "searchCategories"
+export type AllowedTools = "searchProducts" | "searchCategories" | "buildNavigationQuery"
 
 const searchProducts = createTool({
-  description: "Search for products in the shop",
+  description: "Search for available products to route to",
   parameters: z.object({
-    query: z.string({ description: "Query to search for" }).optional(),
-    maxPrice: z.number({ description: "Maximum price of the product, needs to be greater than minPrice" }).min(0).max(200).optional(),
-    sortBy: z.string({ description: "Sort by price, rating, etc" }).default("price:desc").optional(),
-    categories: z.array(z.string()).optional(),
-    vendors: z.array(z.string()).optional(),
-    colors: z.array(z.string({ description: "Color of the product" })).optional(),
-    rating: z.number({ description: "Rating of the product, needs to be between 1 and 5" }).min(1).max(5).optional(),
+    query: z.string({ description: " Keyword for a product" }),
   }),
   execute: async function ({ query }) {
-    const { hits } = await getProducts({
-      query,
-      hitsPerPage: 8,
-    })
+    const results = await getProducts({ query, hitsPerPage: 5 })
 
-    return hits
+    return { results: results.hits, availableFilters: results.facetDistribution }
   },
 })
 
 const searchCategories = createTool({
-  description: "Search through categories in the shop",
+  description: "Search for available categories to route to",
   parameters: z.object({
-    query: z.string({ description: "Query to search for" }),
+    query: z.string({ description: "Keyword for a category" }),
   }),
   execute: async function ({ query }) {
-    const { hits } = await getCategories({ query, hitsPerPage: 6 })
+    const results = await getCategories({ query, hitsPerPage: 5 })
 
-    return hits
+    return { results: results.hits, availableFilters: results.facetDistribution }
   },
 })
 
+const buildNavigationQuery = createTool({
+  description: "Build URL to navigate the user to",
+  parameters: z.object({
+    result: z.object({
+      handle: z.string(),
+    }),
+    resultType: z.union([z.literal("product"), z.literal("category"), z.literal("search")]),
+    filters: z
+      .object({
+        minPrice: z.number().optional(),
+        maxPrice: z.number().optional(),
+        vendors: z.array(z.string()).optional(),
+        colors: z.array(z.string()).optional(),
+        sortBy: z.string().optional(),
+      })
+      .optional(),
+  }),
+  execute: async function ({ result, resultType, ...rest }) {
+    switch (resultType) {
+      case "product":
+        return `/ai/product/${result.handle}`
+
+      case "category": {
+        if ("filters" in rest) {
+          const params = processFiltersToSearchParams(rest.filters!)
+          return `/ai/category/${result.handle}?${decodeURIComponent(params.toString())}`
+        }
+        return `/ai/category/${result.handle}`
+      }
+
+      case "search": {
+        if ("filters" in rest) {
+          const params = processFiltersToSearchParams(rest.filters!)
+          return `/ai/search?${decodeURIComponent(params.toString())}`
+        }
+        return `/ai/search/`
+      }
+    }
+  },
+})
+
+function processFiltersToSearchParams(filters: Record<string, string | string[] | number | number[]>) {
+  const params = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(filters)) {
+    if (key === "sortBy") {
+      switch (value) {
+        case "price-high-to-low":
+          params.set("sortBy", "minPrice:desc")
+          break
+        case "price-low-to-high":
+          params.set("sortBy", "minPrice:asc")
+          break
+        case "customer-reviews":
+          params.set("sortBy", "avgRating:desc")
+          break
+        case "newest":
+          params.set("sortBy", "updatedAtTimestamp:asc")
+          break
+        case "oldest":
+          params.set("sortBy", "updatedAtTimestamp:desc")
+          break
+        case "relevancy":
+          params.delete("sortBy")
+          break
+        default:
+          break
+      }
+    } else if (Array.isArray(value)) {
+      params.set(key, value.join(","))
+    } else {
+      params.set(key, value.toString())
+    }
+  }
+
+  return params
+}
+
 export const tools: Record<AllowedTools, CoreTool> = {
   searchProducts,
   searchCategories,
+  buildNavigationQuery,
 }
diff --git a/starters/shopify-algolia/lib/algolia/filter-builder.test.ts b/starters/shopify-algolia/lib/algolia/filter-builder.test.ts
index 6f6bfe6d..edc64c07 100644
--- a/starters/shopify-algolia/lib/algolia/filter-builder.test.ts
+++ b/starters/shopify-algolia/lib/algolia/filter-builder.test.ts
@@ -1,4 +1,4 @@
-import { FilterBuilder, ComparisonOperators } from "./filter-builder"
+import { FilterBuilder, ComparisonOperators, LogicalOperators } from "./filter-builder"
 
 describe("FilterBuilder", () => {
   let builder: FilterBuilder
@@ -7,112 +7,115 @@ describe("FilterBuilder", () => {
     builder = new FilterBuilder()
   })
 
+  describe("hasFilters", () => {
+    it("should return false when no filters are added", () => {
+      expect(builder.hasFilters()).toBe(false)
+    })
+
+    it("should return true when filters are added", () => {
+      builder.where("category", "books")
+      expect(builder.hasFilters()).toBe(true)
+    })
+  })
+
   describe("where", () => {
-    it("should create a basic equality filter", () => {
-      expect(new FilterBuilder().where("minPrice", 100).build()).toBe("minPrice:100")
-      expect(new FilterBuilder().where("handle", "test").build()).toBe('handle:"test"')
+    it("should create a basic filter", () => {
+      expect(builder.where("category", "books").build()).toBe('category:"books"')
     })
 
-    it("should handle comparison operators", () => {
-      expect(new FilterBuilder().where("minPrice", 100, ComparisonOperators.GreaterThan).build()).toBe("minPrice>100")
-      expect(new FilterBuilder().where("minPrice", 100, ComparisonOperators.LessThanOrEqual).build()).toBe("minPrice<=100")
-      expect(new FilterBuilder().where("minPrice", 100, ComparisonOperators.NotEqual).build()).toBe("minPrice!=100")
+    it("should handle number values", () => {
+      expect(builder.where("price", 100).build()).toBe("price:100")
     })
 
-    it("should handle array values as IN operation", () => {
-      expect(new FilterBuilder().where("hierarchicalCategories.lvl0", ["books", "games"]).build()).toBe(
-        '(hierarchicalCategories.lvl0:"books" OR hierarchicalCategories.lvl0:"games")'
-      )
+    it("should handle boolean values", () => {
+      expect(builder.where("inStock", true).build()).toBe("inStock:true")
     })
-  })
 
-  describe("to", () => {
-    it("should create a range filter", () => {
-      expect(builder.to("minPrice", 10, 100).build()).toBe("minPrice:10 TO 100")
+    it("should ignore null values", () => {
+      expect(builder.where("category", null).build()).toBe("")
     })
   })
 
-  describe("in", () => {
+  describe("multi", () => {
     it("should create an OR condition for multiple values", () => {
-      expect(builder.in("hierarchicalCategories.lvl0", ["books", "games"]).build()).toBe('(hierarchicalCategories.lvl0:"books" OR hierarchicalCategories.lvl0:"games")')
+      expect(builder.multi("category", ["books", "games"]).build()).toBe('(category:"books" OR category:"games")')
+    })
+
+    it("should create an AND condition when specified", () => {
+      expect(builder.multi("category", ["books", "games"], LogicalOperators.And).build()).toBe('(category:"books" AND category:"games")')
     })
 
     it("should handle empty array", () => {
-      expect(builder.in("hierarchicalCategories.lvl0", []).build()).toBe("")
+      expect(builder.multi("category", []).build()).toBe("")
     })
 
-    it("should handle different value types", () => {
-      expect(builder.in("mixed", ["test", 123, true]).build()).toBe('(mixed:"test" OR mixed:123 OR mixed:true)')
+    it("should handle null input", () => {
+      expect(builder.multi("category", null).build()).toBe("")
     })
   })
 
-  describe("tag", () => {
-    it("should create a tag filter", () => {
-      expect(builder.tag("featured").build()).toBe('_tags:"featured"')
+  describe("numeric", () => {
+    it("should create numeric comparison", () => {
+      expect(builder.numeric("price", 100).build()).toBe("price = 100")
+    })
+
+    it("should handle different operators", () => {
+      expect(builder.numeric("price", 100, ComparisonOperators.GreaterThan).build()).toBe("price > 100")
+    })
+
+    it("should ignore null values", () => {
+      expect(builder.numeric("price", null).build()).toBe("")
+    })
+  })
+
+  describe("to", () => {
+    it("should create range filter", () => {
+      expect(builder.to("price", 10, 100).build()).toBe("price:10 TO 100")
+    })
+
+    it("should ignore if either value is null", () => {
+      expect(builder.to("price", null, 100).build()).toBe("")
+      expect(builder.to("price", 10, null).build()).toBe("")
     })
   })
 
   describe("logical operators", () => {
-    it("should combine conditions with AND", () => {
-      const builder = new FilterBuilder()
-      expect(builder.where("minPrice", 100).and().where("hierarchicalCategories.lvl0", "books").build()).toBe('minPrice:100 AND hierarchicalCategories.lvl0:"books"')
+    it("should chain conditions with AND", () => {
+      expect(builder.where("category", "books").and().where("price", 100).build()).toBe('category:"books" AND price:100')
     })
 
-    it("should combine conditions with OR", () => {
-      const builder = new FilterBuilder()
-      expect(builder.where("minPrice", 100).or().where("minPrice", 200).build()).toBe("minPrice:100 OR minPrice:200")
+    it("should chain conditions with OR", () => {
+      expect(builder.where("category", "books").or().where("category", "games").build()).toBe('category:"books" OR category:"games"')
     })
 
     it("should handle NOT operator", () => {
-      const builder = new FilterBuilder()
-      expect(builder.not().where("hierarchicalCategories.lvl0", "books").build()).toBe('NOT hierarchicalCategories.lvl0:"books"')
+      expect(builder.where("category", "books").and().not().where("price", 100).build()).toBe('category:"books" AND NOT price:100')
     })
   })
 
-  describe("group", () => {
-    it("should create grouped conditions", () => {
-      expect(
-        new FilterBuilder()
-          .group((sub) => {
-            sub.where("minPrice", 100).or().where("minPrice", 200)
-          })
-          .and()
-          .where("hierarchicalCategories.lvl0", "books")
-          .build()
-      ).toBe('(minPrice:100 OR minPrice:200) AND hierarchicalCategories.lvl0:"books"')
-    })
-
-    it("should handle nested groups", () => {
-      expect(
-        new FilterBuilder()
-          .group((sub) => {
-            sub
-              .where("minPrice", 100)
-              .and()
-              .group((inner) => {
-                inner.where("hierarchicalCategories.lvl0", "books").or().where("hierarchicalCategories.lvl0", "games")
-              })
-          })
-          .build()
-      ).toBe('(minPrice:100 AND (hierarchicalCategories.lvl0:"books" OR hierarchicalCategories.lvl0:"games"))')
+  describe("raw", () => {
+    it("should add raw expression", () => {
+      expect(builder.raw('category:"books"').build()).toBe('category:"books"')
+    })
+
+    it("should combine with other filters", () => {
+      expect(builder.where("category", "books").and().raw("price:100").build()).toBe('category:"books" AND price:100')
     })
   })
 
-  describe("complex queries", () => {
-    it("should handle complex combinations of filters", () => {
-      expect(
-        new FilterBuilder()
-          .where("minPrice", 100, ComparisonOperators.GreaterThanOrEqual)
-          .and()
-          .where("minPrice", 200, ComparisonOperators.LessThanOrEqual)
-          .and()
-          .group((sub) => {
-            sub.where("hierarchicalCategories.lvl0", "books").or().where("hierarchicalCategories.lvl0", "games")
-          })
-          .and()
-          .tag("featured")
-          .build()
-      ).toBe('minPrice>=100 AND minPrice<=200 AND (hierarchicalCategories.lvl0:"books" OR hierarchicalCategories.lvl0:"games") AND _tags:"featured"')
+  describe("build", () => {
+    it("should join multiple conditions with default operator", () => {
+      builder.where("category", "books").where("price", 100)
+      expect(builder.build()).toBe('category:"books" price:100')
+    })
+
+    it("should join multiple conditions with specified operator", () => {
+      builder.where("category", "books").where("price", 100)
+      expect(builder.build(LogicalOperators.And)).toBe('category:"books" AND price:100')
+    })
+
+    it("should return empty string when no filters", () => {
+      expect(builder.build()).toBe("")
     })
   })
 })
diff --git a/starters/shopify-algolia/lib/algolia/filter-builder.ts b/starters/shopify-algolia/lib/algolia/filter-builder.ts
index 3470f56b..111d2f6c 100644
--- a/starters/shopify-algolia/lib/algolia/filter-builder.ts
+++ b/starters/shopify-algolia/lib/algolia/filter-builder.ts
@@ -1,5 +1,3 @@
-import { AvailableFilters } from "./filters"
-
 // For numeric attributes only
 export enum ComparisonOperators {
   Equal = "=",
@@ -8,7 +6,6 @@ export enum ComparisonOperators {
   GreaterThanOrEqual = ">=",
   LessThan = "<",
   LessThanOrEqual = "<=",
-  To = "TO",
 }
 
 export enum LogicalOperators {
@@ -17,41 +14,26 @@ export enum LogicalOperators {
   Not = "NOT",
 }
 
-type Value = string | number | boolean | (string | number | boolean)[]
-
 export class FilterBuilder {
   private expression: string[] = []
 
-  where(attribute: keyof AvailableFilters, value: Value, operator?: ComparisonOperators): FilterBuilder {
-    if (Array.isArray(value)) {
-      if (value.length === 0) {
-        return this
-      }
-      const conditions = value.map((v) => `${attribute}:${this.formatValue(v)}`)
-      this.expression.push(conditions.length === 1 ? conditions[0] : `(${conditions.join(" OR ")})`)
-    } else {
-      this.expression.push(`${attribute}${operator || ":"}${this.formatValue(value)}`)
-    }
-    return this
-  }
-
-  to(attribute: keyof AvailableFilters, min: number, max: number): FilterBuilder {
-    this.expression.push(`${attribute}:${min} TO ${max}`)
-    return this
+  hasFilters(): boolean {
+    return this.expression.length > 0
   }
 
-  in(attribute: keyof AvailableFilters, values: (string | number | boolean)[]): FilterBuilder {
-    if (values.length === 0) {
-      return this
-    }
+  // simplification to prevent raw() overuse
+  where(attribute: string, value: (string | number | boolean) | null): FilterBuilder {
+    if (!value) return this
 
-    const conditions = values.map((value) => `${attribute}:${this.formatValue(value)}`)
-    this.expression.push(conditions.length === 1 ? conditions[0] : `(${conditions.join(" OR ")})`)
+    this.expression.push(`${attribute}:${this.formatValue(value)}`)
     return this
   }
+  // For multiple values so we don't have to chain .and().raw() etc.
+  multi(attribute: string, values: (string | number | boolean)[] | null, operator: LogicalOperators = LogicalOperators.Or): FilterBuilder {
+    if (!values || values.length === 0) return this
 
-  tag(value: string): FilterBuilder {
-    this.expression.push(`_tags:${this.formatValue(value)}`)
+    const conditions = values.map((value) => `${attribute}:${this.formatValue(value)}`)
+    this.expression.push(`(${conditions.join(` ${operator} `)})`)
     return this
   }
 
@@ -70,16 +52,26 @@ export class FilterBuilder {
     return this
   }
 
-  group(fn: (builder: FilterBuilder) => void): FilterBuilder {
-    const subBuilder = new FilterBuilder()
-    fn(subBuilder)
-    const subExpression = subBuilder.build()
-    this.expression.push(`(${subExpression})`)
+  raw(expression: string): FilterBuilder {
+    this.expression.push(expression)
+    return this
+  }
+  to(attribute: string, min: number | null, max: number | null): FilterBuilder {
+    if (!min || !max) return this
+
+    this.expression.push(`${attribute}:${min} TO ${max}`)
+    return this
+  }
+  numeric(attribute: string, value: number | null, operator: ComparisonOperators = ComparisonOperators.Equal): FilterBuilder {
+    if (!value) return this
+
+    this.expression.push(`${attribute} ${operator} ${value}`)
     return this
   }
 
-  build(): string {
-    return this.expression.join(" ")
+  build(operator?: LogicalOperators): string {
+    if (this.expression.length === 0) return ""
+    return this.expression.join(operator ? ` ${operator} ` : " ").trim()
   }
 
   private formatValue(value: string | number | boolean): string {
@@ -88,8 +80,4 @@ export class FilterBuilder {
     }
     return value.toString()
   }
-
-  private formatArray(values: (string | number | boolean)[]): string {
-    return `(${values.map((v) => this.formatValue(v)).join(",")})`
-  }
 }
diff --git a/starters/shopify-algolia/lib/algolia/filters.ts b/starters/shopify-algolia/lib/algolia/filters.ts
deleted file mode 100644
index 195794ce..00000000
--- a/starters/shopify-algolia/lib/algolia/filters.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-//@TODO: Make this an available filters per index instead
-export interface AvailableFilters {
-  minPrice: number
-  avgRating: number
-  vendor: string[]
-  "flatOptions.Color": string[]
-  "hierarchicalCategories.lvl0": string[]
-  "hierarchicalCategories.lvl1": string[]
-  "hierarchicalCategories.lvl2": string[]
-  handle: string
-  product_handle: string
-  published: boolean
-  hidden: boolean
-  "collections.handle": string[]
-}
-
-export interface AvailableFilterParams {
-  minPrice: number | null
-  maxPrice: number | null
-  categories: string[]
-  vendors: string[]
-  colors: string[]
-  rating?: number | null
-}
diff --git a/starters/shopify-algolia/lib/algolia/index.ts b/starters/shopify-algolia/lib/algolia/index.ts
index ae64fba3..5c0bf4a0 100644
--- a/starters/shopify-algolia/lib/algolia/index.ts
+++ b/starters/shopify-algolia/lib/algolia/index.ts
@@ -15,7 +15,6 @@ import { searchClient as algolia, SortType } from "./client"
 
 import type { CommerceProduct } from "types"
 import type { BrowseProps, SearchSingleIndexProps } from "algoliasearch"
-import { AvailableFilters } from "./filters"
 
 export const getProduct = unstable_cache(
   async (handle: string) => {
@@ -84,6 +83,7 @@ export const getAllProducts = async (options?: Omit<BrowseProps["browseParams"],
 export const getSimilarProducts = unstable_cache(
   async (collection: string | undefined, objectID: string) => {
     const limit = 8
+    if (!collection) return []
 
     if (isDemoMode()) return getDemoProducts().hits.slice(0, limit)
 
@@ -105,7 +105,7 @@ export const getSimilarProducts = unstable_cache(
         indexName: env.ALGOLIA_PRODUCTS_INDEX,
         searchParams: {
           hitsPerPage: limit - results[0].hits.length,
-          filters: algolia.filterBuilder().where("collections.handle", collection!).build(),
+          filters: algolia.filterBuilder().where("collections.handle", collection).build(),
         },
       })
     }
@@ -266,29 +266,26 @@ export const getFilteredProducts = unstable_cache(
     const indexName = algolia.mapIndexToSort(env.ALGOLIA_PRODUCTS_INDEX, sortBy as SortType)
 
     try {
-      // use a single http request to search for products and facets, utilize separate query for facet values that should be independent from the search query
-      const res = await algolia?.multiSearch<CommerceProduct>({
-        requests: [
-          {
-            indexName,
+      const [results, independentFacets] = await Promise.all([
+        algolia.search<CommerceProduct>({
+          indexName,
+          searchParams: {
             query,
-            facets: ["hierarchicalCategories.lvl0", "hierarchicalCategories.lvl1", "hierarchicalCategories.lvl2"],
+            filters,
+            page: page - 1,
             hitsPerPage: HITS_PER_PAGE,
+            attributesToRetrieve: ["id", "handle", "title", "priceRange", "featuredImage", "minPrice", "variants", "images", "avgRating", "totalReviews"],
+            facets: ["flatOptions.Color", "avgRating"],
           },
-          {
-            indexName,
+        }),
+        algolia.search<CommerceProduct>({
+          indexName,
+          searchParams: {
+            facets: ["vendor"].concat(!!env.SHOPIFY_HIERARCHICAL_NAV_HANDLE ? [`hierarchicalCategories.lvl0`, `hierarchicalCategories.lvl1`, `hierarchicalCategories.lvl2`] : []),
             hitsPerPage: HITS_PER_PAGE,
-            facets: ["vendor", "variants.availableForSale", "flatOptions.Color", "minPrice", "avgRating"].concat(
-              !!env.SHOPIFY_HIERARCHICAL_NAV_HANDLE ? [`hierarchicalCategories.lvl0`, `hierarchicalCategories.lvl1`, `hierarchicalCategories.lvl2`] : []
-            ),
-            filters,
-            page: page - 1,
-            attributesToRetrieve: ["id", "handle", "title", "priceRange", "featuredImage", "minPrice", "variants", "images", "avgRating", "totalReviews", "vendor"],
           },
-        ],
-      })
-
-      const [independentFacets, results] = res?.results || []
+        }),
+      ])
 
       const hits = results?.hits || []
       const totalPages = results?.nbPages || 0
@@ -307,7 +304,8 @@ export const getFilteredProducts = unstable_cache(
 )
 
 export const getFacetValues = unstable_cache(
-  async ({ indexName, facetName }: { indexName: string; facetName: keyof AvailableFilters }) => {
+  async ({ indexName, facetName }: { indexName: string; facetName: string }) => {
+    console.log("calling get facet values", facetName)
     if (isDemoMode()) return []
 
     const res = await algolia.getFacetValues({
diff --git a/starters/shopify-algolia/middleware.ts b/starters/shopify-algolia/middleware.ts
index c7104591..72c78bde 100644
--- a/starters/shopify-algolia/middleware.ts
+++ b/starters/shopify-algolia/middleware.ts
@@ -94,23 +94,25 @@ function handleAbTestingMiddleware(request: NextRequest, route: Route) {
 function handleCLPMiddleware(request: NextRequest) {
   const url = request.nextUrl.clone()
   const page = request.nextUrl.searchParams.get("page")
+  const isAi = request.nextUrl.pathname.startsWith("/ai/category")
 
   if (page) {
-    url.pathname = `category/clp/${request.nextUrl.pathname.split("/")[2]}/${page}`
+    url.pathname = `${isAi ? "ai/category" : "category"}/clp/${request.nextUrl.pathname.split("/")[isAi ? 3 : 2]}/${page}`
     url.searchParams.delete("page")
 
     return NextResponse.rewrite(url)
   }
 
-  url.pathname = `category/clp/${request.nextUrl.pathname.split("/")[2]}`
+  url.pathname = `${isAi ? "ai/category" : "category"}/clp/${request.nextUrl.pathname.split("/")[isAi ? 3 : 2]}`
 
   return NextResponse.rewrite(url)
 }
 
 function handlePLPMiddleware(request: NextRequest) {
   const url = request.nextUrl.clone()
+  const isAi = request.nextUrl.pathname.startsWith("/ai/category")
 
-  url.pathname = `category/plp/${request.nextUrl.pathname.split("/")[2]}`
+  url.pathname = `${isAi ? "ai/category" : "category"}/plp/${request.nextUrl.pathname.split("/")[isAi ? 3 : 2]}`
 
   return NextResponse.rewrite(url)
 }
@@ -124,15 +126,23 @@ export const config = {
 function isCLP(request: NextRequest): boolean {
   const isCategory = request.nextUrl.pathname.startsWith("/category/")
   const isInternalRoute = request.nextUrl.pathname.startsWith("/category/clp/")
+
+  const isAiCategory = request.nextUrl.pathname.startsWith("/ai/category/")
+  const isAiInternalRoute = request.nextUrl.pathname.startsWith("/ai/category/clp/")
+
   const isFaceted = facetParams.some((param) => request.nextUrl.searchParams.has(param))
 
-  return isCategory && !isFaceted && !isInternalRoute
+  return (isCategory && !isFaceted && !isInternalRoute) || (isAiCategory && !isFaceted && !isAiInternalRoute)
 }
 
 function isPLP(request: NextRequest): boolean {
   const isCategory = request.nextUrl.pathname.startsWith("/category/")
   const isInternalRoute = request.nextUrl.pathname.startsWith("/category/plp/")
+
+  const isAiCategory = request.nextUrl.pathname.startsWith("/ai/category/")
+  const isAiInternalRoute = request.nextUrl.pathname.startsWith("/ai/category/plp/")
+
   const isFaceted = facetParams.some((param) => request.nextUrl.searchParams.has(param))
 
-  return isCategory && isFaceted && !isInternalRoute
+  return (isCategory && isFaceted && !isInternalRoute) || (isAiCategory && isFaceted && !isAiInternalRoute)
 }
diff --git a/starters/shopify-algolia/utils/__tests__/build-search-filter.test.ts b/starters/shopify-algolia/utils/__tests__/build-search-filter.test.ts
new file mode 100644
index 00000000..381a9e67
--- /dev/null
+++ b/starters/shopify-algolia/utils/__tests__/build-search-filter.test.ts
@@ -0,0 +1,159 @@
+import { buildSearchFilter } from "../build-search-filter"
+import { PlatformCollection } from "lib/shopify/types"
+
+describe("buildSearchFilter", () => {
+  const defaultParams = {
+    categories: [],
+    vendors: [],
+    colors: [],
+    minPrice: null,
+    maxPrice: null,
+    rating: null,
+  }
+
+  const separator = " > "
+
+  it("should return empty string when no filters are applied", () => {
+    const result = buildSearchFilter({
+      params: defaultParams,
+      separator,
+    })
+
+    expect(result).toBe("")
+  })
+
+  it("should filter by collection when provided", () => {
+    const collection: PlatformCollection = {
+      handle: "test-collection",
+      id: "123",
+      title: "Test Collection",
+      descriptionHtml: "",
+      image: null,
+    }
+
+    const result = buildSearchFilter({
+      collection,
+      params: defaultParams,
+      separator,
+    })
+
+    expect(result).toBe('collections.handle:"test-collection"')
+  })
+
+  it("should filter by categories", () => {
+    const params = {
+      ...defaultParams,
+      categories: ["Category1", "Category1 > Subcategory", "Category2 > Sub > SubSub"],
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe(
+      '(hierarchicalCategories.lvl0:"Category1" AND hierarchicalCategories.lvl1:"Category1 > Subcategory" AND hierarchicalCategories.lvl2:"Category2 > Sub > SubSub")'
+    )
+  })
+
+  it("should filter by vendors", () => {
+    const params = {
+      ...defaultParams,
+      vendors: ["Vendor1", "Vendor2"],
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe('(vendor:"Vendor1" OR vendor:"Vendor2")')
+  })
+
+  it("should filter by colors", () => {
+    const params = {
+      ...defaultParams,
+      colors: ["Red", "Blue"],
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe('(flatOptions.Color:"Red" OR flatOptions.Color:"Blue")')
+  })
+
+  it("should filter by price range", () => {
+    const params = {
+      ...defaultParams,
+      minPrice: 10,
+      maxPrice: 100,
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe("minPrice >= 10 AND minPrice <= 100")
+  })
+
+  it("should filter by minimum price only", () => {
+    const params = {
+      ...defaultParams,
+      minPrice: 10,
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe("minPrice >= 10")
+  })
+
+  it("should filter by maximum price only", () => {
+    const params = {
+      ...defaultParams,
+      maxPrice: 100,
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe("minPrice <= 100")
+  })
+
+  it("should filter by rating", () => {
+    const params = {
+      ...defaultParams,
+      rating: 4,
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe("avgRating >= 4")
+  })
+
+  it("should ignore rating when it's 0 or negative", () => {
+    const params = {
+      ...defaultParams,
+      rating: 0,
+    }
+
+    const result = buildSearchFilter({ params, separator })
+
+    expect(result).toBe("")
+  })
+
+  it("should combine multiple filters with AND operator", () => {
+    const collection: PlatformCollection = {
+      handle: "test-collection",
+      id: "123",
+      title: "Test Collection",
+      descriptionHtml: "",
+      image: null,
+    }
+
+    const params = {
+      ...defaultParams,
+      vendors: ["Vendor1"],
+      rating: 4,
+      minPrice: 10,
+      maxPrice: 100,
+    }
+
+    const result = buildSearchFilter({
+      collection,
+      params,
+      separator,
+    })
+
+    expect(result).toBe('collections.handle:"test-collection" AND (vendor:"Vendor1") AND minPrice >= 10 AND minPrice <= 100 AND avgRating >= 4')
+  })
+})
diff --git a/starters/shopify-algolia/utils/__tests__/compose-filters.test.ts b/starters/shopify-algolia/utils/__tests__/compose-filters.test.ts
deleted file mode 100644
index 6f174ea7..00000000
--- a/starters/shopify-algolia/utils/__tests__/compose-filters.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { HIERARCHICAL_SEPARATOR } from "../../constants"
-import { FilterBuilder } from "../../lib/algolia/filter-builder"
-import { composeFilters } from "../compose-filters"
-
-describe("composeFilters", () => {
-  test("should add a category filter when categories are present", () => {
-    const parsedSearchParams = { categories: ["electronics"], vendors: [], colors: [], sizes: [], minPrice: null, maxPrice: null }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-
-    expect(filter.build()).toStrictEqual(`OR (hierarchicalCategories.lvl0:"electronics")`)
-  })
-
-  test("should add a vendor filter when vendors are present", () => {
-    const parsedSearchParams = { categories: [], vendors: ["Apple"], colors: [], sizes: [], minPrice: null, maxPrice: null }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-
-    expect(filter.build()).toStrictEqual(`AND (vendor:"Apple")`)
-  })
-
-  test("should add a color filter when colors are present", () => {
-    const parsedSearchParams = { categories: [], vendors: [], colors: ["Black"], sizes: [], minPrice: null, maxPrice: null }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-
-    expect(filter.build()).toStrictEqual(`AND (flatOptions.Color:"Black")`)
-  })
-
-  test("should add a minPrice filter when minPrice is specified", () => {
-    const parsedSearchParams = { categories: [], vendors: [], colors: [], sizes: [], minPrice: 100, maxPrice: null }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-
-    expect(filter.build()).toStrictEqual(`AND minPrice>=100`)
-  })
-
-  test("should add a maxPrice filter when maxPrice is specified", () => {
-    const parsedSearchParams = { categories: [], vendors: [], colors: [], sizes: [], minPrice: null, maxPrice: 500 }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-
-    expect(filter.build()).toStrictEqual(`AND minPrice<=500`)
-  })
-
-  test("should add all filters when all conditions are met", () => {
-    const parsedSearchParams = {
-      categories: ["electronics"],
-      vendors: ["Apple"],
-      colors: ["Black"],
-      sizes: ["M"],
-      minPrice: 100,
-      maxPrice: 500,
-    }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-    const builtFilter = filter.build()
-
-    expect(builtFilter).toStrictEqual('OR (hierarchicalCategories.lvl0:"electronics") AND (vendor:"Apple") AND (flatOptions.Color:"Black") AND minPrice>=100 AND minPrice<=500')
-  })
-
-  test("should support hierarchical categories", () => {
-    const parsedSearchParams = {
-      categories: ["electronics > cameras", "beauty", "fashion > men > shoes"],
-      vendors: [],
-      colors: [],
-      sizes: [],
-      minPrice: null,
-      maxPrice: null,
-    }
-    const filter = composeFilters(new FilterBuilder(), parsedSearchParams, HIERARCHICAL_SEPARATOR)
-    const builtFilter = filter.build()
-
-    expect(builtFilter).toStrictEqual(
-      'OR (hierarchicalCategories.lvl1:"electronics > cameras") OR (hierarchicalCategories.lvl0:"beauty") OR (hierarchicalCategories.lvl2:"fashion > men > shoes")'
-    )
-  })
-})
diff --git a/starters/shopify-algolia/utils/build-search-filter.ts b/starters/shopify-algolia/utils/build-search-filter.ts
new file mode 100644
index 00000000..a35e77cf
--- /dev/null
+++ b/starters/shopify-algolia/utils/build-search-filter.ts
@@ -0,0 +1,60 @@
+import { searchParamsCache } from "components/search-view"
+import { ComparisonOperators, FilterBuilder, LogicalOperators } from "lib/algolia/filter-builder"
+import type { PlatformCollection } from "lib/shopify/types"
+
+type SearchParams = Omit<Awaited<ReturnType<typeof searchParamsCache.parse>>, "page" | "sortBy" | "q">
+
+export function buildSearchFilter({ collection, params, separator }: { collection?: PlatformCollection | undefined; params: SearchParams; separator: string }): string {
+  const filter = new FilterBuilder()
+
+  if (collection) {
+    filter.where("collections.handle", collection.handle)
+  }
+
+  addCategoryFilters(filter, params.categories, separator)
+  addArrayFilters(filter, {
+    vendor: params.vendors,
+    "flatOptions.Color": params.colors,
+  })
+  addPriceFilters(filter, params.minPrice, params.maxPrice)
+  addRatingFilter(filter, params.rating)
+
+  return filter.build(LogicalOperators.And)
+}
+
+function addCategoryFilters(filter: FilterBuilder, categories: string[], separator: string): void {
+  if (categories.length === 0) return
+
+  const categoryFilters = categories.map((category) => {
+    const level = Math.min(category.split(separator).length - 1, 2)
+    return `hierarchicalCategories.lvl${level}:"${category}"`
+  })
+
+  filter.raw(`(${categoryFilters.join(" OR ")})`)
+}
+
+function addArrayFilters(filter: FilterBuilder, fields: Record<string, string[]>): void {
+  Object.entries(fields).forEach(([field, values]) => {
+    if (values.length > 0) {
+      filter.multi(field, values)
+    }
+  })
+}
+
+function addPriceFilters(filter: FilterBuilder, minPrice: number | null, maxPrice: number | null): void {
+  if (!minPrice && !maxPrice) return
+
+  if (minPrice) {
+    filter.numeric("minPrice", minPrice, ComparisonOperators.GreaterThanOrEqual)
+  }
+
+  if (maxPrice) {
+    filter.numeric("minPrice", maxPrice, ComparisonOperators.LessThanOrEqual)
+  }
+}
+
+function addRatingFilter(filter: FilterBuilder, rating: number | null): void {
+  if (rating && rating > 0) {
+    filter.numeric("avgRating", rating, ComparisonOperators.GreaterThanOrEqual)
+  }
+}
diff --git a/starters/shopify-algolia/utils/compose-filters.ts b/starters/shopify-algolia/utils/compose-filters.ts
deleted file mode 100644
index 79a70474..00000000
--- a/starters/shopify-algolia/utils/compose-filters.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { ComparisonOperators, FilterBuilder } from "lib/algolia/filter-builder"
-import type { AvailableFilterParams } from "lib/algolia/filters"
-
-export function composeFilters(filter: FilterBuilder, parsedSearchParams: AvailableFilterParams, separator: string) {
-  const filterConditions = [
-    {
-      predicate: parsedSearchParams.categories.length > 0,
-      action: () => {
-        parsedSearchParams.categories.forEach((category) => {
-          const level = category.split(separator).length - 1 > 2 ? 2 : category.split(separator).length - 1
-          filter.or().group((sub) => sub.in(`hierarchicalCategories.lvl${level as 0 | 1 | 2}`, [category]))
-        })
-      },
-    },
-    {
-      predicate: parsedSearchParams.vendors.length > 0,
-      action: () => filter.and().group((sub) => sub.in("vendor", parsedSearchParams.vendors)),
-    },
-    {
-      predicate: parsedSearchParams.colors.length > 0,
-      action: () => filter.and().group((sub) => sub.in("flatOptions.Color", parsedSearchParams.colors)),
-    },
-    {
-      predicate: !!parsedSearchParams.minPrice,
-      action: () => filter.and().where("minPrice", parsedSearchParams.minPrice!, ComparisonOperators.GreaterThanOrEqual),
-    },
-    {
-      predicate: !!parsedSearchParams.maxPrice,
-      action: () => filter.and().where("minPrice", parsedSearchParams.maxPrice!, ComparisonOperators.LessThanOrEqual),
-    },
-    {
-      predicate: !!parsedSearchParams.rating,
-      action: () => filter.and().where("avgRating", parsedSearchParams.rating!, ComparisonOperators.GreaterThanOrEqual),
-    },
-  ]
-
-  filterConditions.forEach(({ predicate, action }) => predicate && action())
-  return filter
-}
diff --git a/starters/shopify-algolia/utils/generate-uuid.ts b/starters/shopify-algolia/utils/generate-uuid.ts
new file mode 100644
index 00000000..6cf32c69
--- /dev/null
+++ b/starters/shopify-algolia/utils/generate-uuid.ts
@@ -0,0 +1,7 @@
+export function generateUUID(): string {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
diff --git a/starters/shopify-algolia/app/layout.tsx b/starters/shopify-algolia/utils/nav-items.ts
similarity index 71%
rename from starters/shopify-algolia/app/layout.tsx
rename to starters/shopify-algolia/utils/nav-items.ts
index 11b4c137..ee88c5dd 100644
--- a/starters/shopify-algolia/app/layout.tsx
+++ b/starters/shopify-algolia/utils/nav-items.ts
@@ -1,25 +1,6 @@
-import "./globals.css"
-
-import Script from "next/script"
-import { Suspense } from "react"
-import { Toaster } from "sonner"
-import { FlagValues } from "components/flag-values"
-import { ThirdParties } from "components/third-parties"
-import { env } from "env.mjs"
-import { Metadata } from "next"
-import { GithubBadge } from "components/github-badge"
-import { DemoModeAlert } from "components/demo-mode-alert"
-import { CartView } from "components/cart/cart-view"
 import type { NavItem } from "components/navigation-bar/types"
-import { NavigationBar } from "components/navigation-bar/navigation-bar"
-import { mobileInlineScript } from "components/navigation-bar/mobile-inline-script"
-import { Footer } from "components/footer"
-import { Modals } from "components/modals/modals"
-import DraftToolbar from "components/draft-toolbar"
-
-export const revalidate = 86400
 
-const navigationItems: NavItem[] = [
+export const navigationItems: NavItem[] = [
   {
     text: "Fashion",
     href: "/category/fashion",
@@ -206,60 +187,3 @@ const navigationItems: NavItem[] = [
     },
   },
 ]
-
-export const metadata: Metadata = {
-  title: "Next.js Enterprise Commerce | Blazity",
-  description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
-  metadataBase: new URL(env.LIVE_URL!),
-  openGraph: {
-    title: "Next.js Enterprise Commerce | Blazity",
-    description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
-    images: ["/opengraph-image.jpg"],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Next.js Enterprise Commerce | Blazity",
-    description: "AI-FIRST NEXT.JS STOREFRONT FOR COMPOSABLE COMMERCE",
-    creator: "@blazity",
-    images: ["/opengraph-image.jpg"],
-  },
-  verification: {
-    google: "google",
-    yandex: "yandex",
-    yahoo: "yahoo",
-  },
-  generator: "Next.js",
-  applicationName: "Next.js",
-}
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <body>
-        <Script id="mobileMegaMenuLogic" strategy="lazyOnload">{`${mobileInlineScript}`}</Script>
-
-        <NavigationBar items={navigationItems} />
-
-        {children}
-
-        <Footer />
-        <Modals />
-
-        <CartView />
-
-        <Toaster position="bottom-left" />
-
-        <DraftToolbar />
-
-        <Suspense>
-          <FlagValues />
-        </Suspense>
-
-        <ThirdParties />
-
-        <GithubBadge />
-        <DemoModeAlert />
-      </body>
-    </html>
-  )
-}
diff --git a/starters/shopify-algolia/hooks/use-mobile.tsx b/starters/shopify-algolia/utils/use-mobile.ts
similarity index 100%
rename from starters/shopify-algolia/hooks/use-mobile.tsx
rename to starters/shopify-algolia/utils/use-mobile.ts