Skip to main content

​
Garment Browser

Browse available blanks at /garments before designing. Filter by category, color, or search by name.

​
Overview

  • Filter by category: T-shirts, hoodies, tank tops, etc.
  • Filter by color: Black, white, navy, and more
  • Search: Find specific products by name
  • Quick add: Send garment directly to chat

​
Data Sources

​
Shopify Integration

When configured, products pull from your Shopify store: 
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=yourstore.myshopify.com
NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN=shpat_xxx

​
Mock Data Fallback

Without Shopify credentials, the app uses mock garments: 
// lib/mockGarments.ts
export const mockGarments: Garment[] = [
  {
    id: "mock-1",
    title: "Classic Heavyweight Tee",
    handle: "classic-heavyweight-tee",
    category: "T-Shirts",
    color: "Black",
    fabric: "6.1 oz 100% Cotton",
    previewUrl: "/samples/black-tee.png",
    variants: [
      { id: "v1", size: "S", price: 24.00 },
      { id: "v2", size: "M", price: 24.00 },
      // ...
    ]
  },
  // More mock products...
];

​
Browsing & Favorites

  1. Click a garment to open the detail modal
  2. View product info: title, color, fabric, price
  3. Click the heart icon to add to your collection
  4. Browse your favorites at /collection
Liked garments persist across sessions via localStorage.

​
Applying Designs to Garments

To add your design to a garment:
  1. Create a design in the chat first
  2. Remove the background using the mini menu
  3. Click “Add to Garment” from the mini menu
  4. Select a blank from the garment selector
  5. The mockup generates automatically
This workflow ensures print-ready isolated artwork.

​
Likes Collection

Save garments for later:
  • Click the heart icon to like
  • Liked garments appear at /collection
  • Persist across sessions via localStorage
// In providers.tsx
const [collection, setCollection] = useState<Garment[]>([]);

const toggleCollectionItem = (garment: Garment) => {
  setCollection(prev => 
    prev.find(g => g.id === garment.id)
      ? prev.filter(g => g.id !== garment.id)
      : [...prev, garment]
  );
};

​
Product Blocklist

Certain products can be excluded from display: 
// lib/productBlocklist.ts
export const blockedHandles = new Set([
  "sample-product",
  "test-item",
  "do-not-display",
]);

export function isBlocked(handle: string): boolean {
  return blockedHandles.has(handle.toLowerCase());
}

​
Shopify Query

The Storefront API query: 
query Products($first: Int!, $query: String) {
  products(first: $first, query: $query) {
    edges {
      node {
        id
        title
        handle
        productType
        tags
        images(first: 5) {
          edges {
            node {
              url
              altText
            }
          }
        }
        variants(first: 20) {
          edges {
            node {
              id
              title
              price {
                amount
                currencyCode
              }
              availableForSale
            }
          }
        }
        metafields(identifiers: [
          { namespace: "custom", key: "fabric" },
          { namespace: "custom", key: "color" }
        ]) {
          key
          value
        }
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

​
UI Components

​
GarmentGrid

// app/components/GarmentGrid.tsx
<GarmentGrid
  garments={filteredGarments}
  onSelect={(g) => openModal(g)}
  onLike={(g) => toggleCollectionItem(g)}
  isLiked={(g) => isCollected(g.id)}
/>

​
Product Modal

Shows:
  • Large product image with gallery
  • Title, color, fabric
  • Price and stock info
  • Like toggle (heart button)

​
Configuration

​
Using Shopify

  1. Create a Shopify custom app
  2. Enable read_products scope
  3. Set environment variables
  4. Products auto-load on /garments

​
Using Mock Data

Simply don’t set Shopify credentials. The lib/shopify.ts client falls back automatically: 
export async function getProducts() {
  if (!isConfigured()) {
    return getMockGarments();
  }
  return fetchShopifyProducts();
}

​
Customizing Mock Products

Edit lib/mockGarments.ts to add your own samples: 
export const mockGarments: Garment[] = [
  {
    id: "custom-1",
    title: "Your Sample Product",
    handle: "your-sample",
    category: "T-Shirts",
    color: "White",
    fabric: "5.3 oz Cotton Blend",
    previewUrl: "/samples/your-image.png",
    variants: [
      { id: "v1", size: "S", price: 22.00 },
      { id: "v2", size: "M", price: 22.00 },
      { id: "v3", size: "L", price: 22.00 },
    ]
  },
];
Add corresponding images to public/samples/.