fix(shop): collection icons + policy pages from Shopify API

Collections: map known handles to distinct lucide icons (Shirt for
apparel, Tag for accessories, Code for library-merch). Unknown handles
fall back to Sparkles.

Policies: Shopify stores policies separately from generic pages (they
live on shop.privacyPolicy, shop.refundPolicy, etc., not page(handle:)).
The sidebar now fetches real policies via getShopPolicies() and only
shows links for policies that actually exist in the Shopify admin. New
/shop/policies/$handle route reads from the policies API instead of the
pages API. The old /shop/pages/$handle route still works for generic
CMS pages.

Author: tannerlinsley

src/components/shop/ShopLayout.tsx

@@ -3,38 +3,48 @@ import { Link, useLocation } from '@tanstack/react-router'
 import {
   ChevronLeft,
   ChevronRight,
+  Code,
   FileText,
   Menu,
-  Package,
   Search,
+  Shirt,
   ShoppingBag,
   ShoppingCart,
+  Sparkles,
+  Tag,
   X,
 } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useLocalStorage } from '~/utils/useLocalStorage'
-import type { CollectionListItem } from '~/utils/shopify-queries'
+import type { CollectionListItem, PolicySummary } from '~/utils/shopify-queries'
 import { CartDrawer } from './CartDrawer'
 import { useCartDrawerStore } from './cartDrawerStore'
 
+type IconComponent = React.ComponentType<{ className?: string }>
+
 type ShopLayoutProps = {
   collections: Array<CollectionListItem>
+  policies: Array<PolicySummary>
   children: React.ReactNode
 }
 
-const POLICY_PAGES = [
-  { handle: 'shipping-policy', label: 'Shipping' },
-  { handle: 'refund-policy', label: 'Returns' },
-  { handle: 'privacy-policy', label: 'Privacy' },
-  { handle: 'terms-of-service', label: 'Terms' },
-] as const
+/** Map known collection handles to meaningful icons. Defaults to Sparkles. */
+const COLLECTION_ICON_MAP: Record<string, IconComponent> = {
+  apparel: Shirt,
+  accessories: Tag,
+  'library-merch': Code,
+}
 
 /**
  * /shop layout: persistent left sidebar on md+, slide-in drawer on mobile.
  * Collapse state persists to localStorage. When collapsed, hovering the
  * rail expands it as an overlay without shifting the main content.
  */
-export function ShopLayout({ collections, children }: ShopLayoutProps) {
+export function ShopLayout({
+  collections,
+  policies,
+  children,
+}: ShopLayoutProps) {
   const [isCollapsed, setIsCollapsed] = useLocalStorage(
     'shopSidebarCollapsed',
     false,
@@ -105,6 +115,7 @@ export function ShopLayout({ collections, children }: ShopLayoutProps) {
 
         <ShopSidebarNav
           collections={collections}
+          policies={policies}
           showLabels={showExpanded}
           onNavigate={() => setIsMobileOpen(false)}
         />
@@ -164,10 +175,12 @@ function ShopCartDrawer() {
 
 function ShopSidebarNav({
   collections,
+  policies,
   showLabels,
   onNavigate,
 }: {
   collections: Array<CollectionListItem>
+  policies: Array<PolicySummary>
   showLabels: boolean
   onNavigate: () => void
 }) {
@@ -206,27 +219,29 @@ function ShopSidebarNav({
               to="/shop/collections/$handle"
               params={{ handle: c.handle }}
               label={c.title}
-              icon={Package}
+              icon={COLLECTION_ICON_MAP[c.handle] ?? Sparkles}
               showLabels={showLabels}
               onNavigate={onNavigate}
             />
           ))}
         </SidebarSection>
       ) : null}
 
-      <SidebarSection label="Info" showLabels={showLabels}>
-        {POLICY_PAGES.map((page) => (
-          <SidebarLink
-            key={page.handle}
-            to="/shop/pages/$handle"
-            params={{ handle: page.handle }}
-            label={page.label}
-            icon={FileText}
-            showLabels={showLabels}
-            onNavigate={onNavigate}
-          />
-        ))}
-      </SidebarSection>
+      {policies.length > 0 ? (
+        <SidebarSection label="Info" showLabels={showLabels}>
+          {policies.map((policy) => (
+            <SidebarLink
+              key={policy.handle}
+              to="/shop/policies/$handle"
+              params={{ handle: policy.handle }}
+              label={policy.title}
+              icon={FileText}
+              showLabels={showLabels}
+              onNavigate={onNavigate}
+            />
+          ))}
+        </SidebarSection>
+      ) : null}
     </nav>
   )
 }
@@ -255,8 +270,6 @@ function SidebarSection({
   )
 }
 
-type IconComponent = React.ComponentType<{ className?: string }>
-
 function SidebarLink({
   to,
   params,

src/routeTree.gen.ts

@@ -103,6 +103,7 @@ import { Route as LibraryIdVersionIndexRouteImport } from './routes/$libraryId/$
 import { Route as StatsNpmPackagesRouteImport } from './routes/stats/npm/$packages'
 import { Route as ShowcaseEditIdRouteImport } from './routes/showcase/edit.$id'
 import { Route as ShopProductsHandleRouteImport } from './routes/shop.products.$handle'
+import { Route as ShopPoliciesHandleRouteImport } from './routes/shop.policies.$handle'
 import { Route as ShopPagesHandleRouteImport } from './routes/shop.pages.$handle'
 import { Route as ShopCollectionsHandleRouteImport } from './routes/shop.collections.$handle'
 import { Route as IntentRegistryPackageNameRouteImport } from './routes/intent/registry/$packageName'
@@ -620,6 +621,11 @@ const ShopProductsHandleRoute = ShopProductsHandleRouteImport.update({
   path: '/products/$handle',
   getParentRoute: () => ShopRoute,
 } as any)
+const ShopPoliciesHandleRoute = ShopPoliciesHandleRouteImport.update({
+  id: '/policies/$handle',
+  path: '/policies/$handle',
+  getParentRoute: () => ShopRoute,
+} as any)
 const ShopPagesHandleRoute = ShopPagesHandleRouteImport.update({
   id: '/pages/$handle',
   path: '/pages/$handle',
@@ -962,6 +968,7 @@ export interface FileRoutesByFullPath {
   '/intent/registry/$packageName': typeof IntentRegistryPackageNameRouteWithChildren
   '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
   '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
   '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
@@ -1093,6 +1100,7 @@ export interface FileRoutesByTo {
   '/auth/$provider/start': typeof AuthProviderStartRoute
   '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
   '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
   '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
@@ -1235,6 +1243,7 @@ export interface FileRoutesById {
   '/intent/registry/$packageName': typeof IntentRegistryPackageNameRouteWithChildren
   '/shop/collections/$handle': typeof ShopCollectionsHandleRoute
   '/shop/pages/$handle': typeof ShopPagesHandleRoute
+  '/shop/policies/$handle': typeof ShopPoliciesHandleRoute
   '/shop/products/$handle': typeof ShopProductsHandleRoute
   '/showcase/edit/$id': typeof ShowcaseEditIdRoute
   '/stats/npm/$packages': typeof StatsNpmPackagesRoute
@@ -1378,6 +1387,7 @@ export interface FileRouteTypes {
     | '/intent/registry/$packageName'
     | '/shop/collections/$handle'
     | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
     | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
@@ -1509,6 +1519,7 @@ export interface FileRouteTypes {
     | '/auth/$provider/start'
     | '/shop/collections/$handle'
     | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
     | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
@@ -1650,6 +1661,7 @@ export interface FileRouteTypes {
     | '/intent/registry/$packageName'
     | '/shop/collections/$handle'
     | '/shop/pages/$handle'
+    | '/shop/policies/$handle'
     | '/shop/products/$handle'
     | '/showcase/edit/$id'
     | '/stats/npm/$packages'
@@ -2449,6 +2461,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShopProductsHandleRouteImport
       parentRoute: typeof ShopRoute
     }
+    '/shop/policies/$handle': {
+      id: '/shop/policies/$handle'
+      path: '/policies/$handle'
+      fullPath: '/shop/policies/$handle'
+      preLoaderRoute: typeof ShopPoliciesHandleRouteImport
+      parentRoute: typeof ShopRoute
+    }
     '/shop/pages/$handle': {
       id: '/shop/pages/$handle'
       path: '/pages/$handle'
@@ -2948,6 +2967,7 @@ interface ShopRouteChildren {
   ShopIndexRoute: typeof ShopIndexRoute
   ShopCollectionsHandleRoute: typeof ShopCollectionsHandleRoute
   ShopPagesHandleRoute: typeof ShopPagesHandleRoute
+  ShopPoliciesHandleRoute: typeof ShopPoliciesHandleRoute
   ShopProductsHandleRoute: typeof ShopProductsHandleRoute
 }
 
@@ -2957,6 +2977,7 @@ const ShopRouteChildren: ShopRouteChildren = {
   ShopIndexRoute: ShopIndexRoute,
   ShopCollectionsHandleRoute: ShopCollectionsHandleRoute,
   ShopPagesHandleRoute: ShopPagesHandleRoute,
+  ShopPoliciesHandleRoute: ShopPoliciesHandleRoute,
   ShopProductsHandleRoute: ShopProductsHandleRoute,
 }
 

src/routes/shop.policies.$handle.tsx

@@ -0,0 +1,47 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { Breadcrumbs } from '~/components/shop/Breadcrumbs'
+import { getShopPolicy } from '~/utils/shop.functions'
+import { seo } from '~/utils/seo'
+
+export const Route = createFileRoute('/shop/policies/$handle')({
+  loader: async ({ params }) => {
+    const policy = await getShopPolicy({ data: { handle: params.handle } })
+    if (!policy) throw notFound()
+    return { policy }
+  },
+  head: ({ loaderData }) => {
+    const p = loaderData?.policy
+    if (!p) return { meta: [] }
+    return {
+      meta: seo({
+        title: `${p.title} | TanStack Shop`,
+      }),
+    }
+  },
+  component: PolicyPage,
+})
+
+function PolicyPage() {
+  const { policy } = Route.useLoaderData()
+  return (
+    <article className="flex flex-col max-w-3xl mx-auto gap-8 p-4 md:p-8">
+      <Breadcrumbs
+        crumbs={[{ label: 'Shop', href: '/shop' }, { label: policy.title }]}
+      />
+      <header>
+        <h1 className="text-3xl font-black">{policy.title}</h1>
+      </header>
+      {policy.body ? (
+        <div
+          className="prose dark:prose-invert max-w-none"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: policy.body }}
+        />
+      ) : (
+        <p className="text-gray-600 dark:text-gray-400">
+          This policy has no content yet.
+        </p>
+      )}
+    </article>
+  )
+}

src/routes/shop.tsx

@@ -1,22 +1,27 @@
 import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
 import { ShopLayout } from '~/components/shop/ShopLayout'
 import { CART_QUERY_KEY } from '~/hooks/useCart'
-import { getCart, getCollections } from '~/utils/shop.functions'
+import {
+  getCart,
+  getCollections,
+  getShopPolicies,
+} from '~/utils/shop.functions'
 import { seo } from '~/utils/seo'
 
 export const Route = createFileRoute('/shop')({
   loader: async ({ context }) => {
-    // Fetch collections for the sidebar, and pre-seed the cart into the
-    // React Query cache so any /shop child page (including the cart page)
-    // renders with real data on the very first frame — no hydration gap.
-    const [collections] = await Promise.all([
+    // Fetch collections + policies for the sidebar, and pre-seed the cart
+    // into the React Query cache so any /shop child page (including the
+    // cart page) renders with real data on the very first frame.
+    const [collections, policies] = await Promise.all([
       getCollections(),
+      getShopPolicies(),
       context.queryClient.prefetchQuery({
         queryKey: CART_QUERY_KEY,
         queryFn: () => getCart(),
       }),
     ])
-    return { collections }
+    return { collections, policies }
   },
   head: () => ({
     meta: seo({
@@ -40,9 +45,9 @@ export const Route = createFileRoute('/shop')({
 })
 
 function ShopRoute() {
-  const { collections } = Route.useLoaderData()
+  const { collections, policies } = Route.useLoaderData()
   return (
-    <ShopLayout collections={collections}>
+    <ShopLayout collections={collections} policies={policies}>
       <Outlet />
     </ShopLayout>
   )

src/utils/shop.functions.ts

@@ -42,6 +42,11 @@ import {
   type ProductsQueryVariables,
   type SearchQueryResult,
   type ShopQueryResult,
+  SHOP_POLICIES_QUERY,
+  type ShopPoliciesQueryResult,
+  type ShopPolicy,
+  flattenPolicies,
+  type PolicySummary,
 } from '~/utils/shopify-queries'
 
 const CART_COOKIE_NAME = 'tanstack_cart_id'
@@ -213,6 +218,36 @@ export const getPage = createServerFn({ method: 'POST' })
     return result.page
   })
 
+export const getShopPolicies = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<Array<PolicySummary>> => {
+    setBrowseCacheHeaders()
+    const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+      query: SHOP_POLICIES_QUERY,
+    })
+    return flattenPolicies(result.shop)
+  },
+)
+
+export const getShopPolicy = createServerFn({ method: 'POST' })
+  .inputValidator(v.object({ handle: v.string() }))
+  .handler(
+    async ({
+      data,
+    }): Promise<{ title: string; body: string; handle: string } | null> => {
+      setBrowseCacheHeaders()
+      const result = await shopifyServerFetch<ShopPoliciesQueryResult>({
+        query: SHOP_POLICIES_QUERY,
+      })
+      const all = [
+        result.shop.privacyPolicy,
+        result.shop.refundPolicy,
+        result.shop.termsOfService,
+        result.shop.shippingPolicy,
+      ].filter((p): p is NonNullable<ShopPolicy> => p !== null)
+      return all.find((p) => p.handle === data.handle) ?? null
+    },
+  )
+
 export const searchProducts = createServerFn({ method: 'POST' })
   .inputValidator(
     v.object({