[V0_FILE]css:file="app/globals.css" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated theme for luxury outdoor brand - warm earth tones with deep forest green */ --background: oklch(0.98 0.005 85); --foreground: oklch(0.25 0.015 120); --card: oklch(0.99 0.003 85); --card-foreground: oklch(0.25 0.015 120); --popover: oklch(0.99 0.003 85); --popover-foreground: oklch(0.25 0.015 120); --primary: oklch(0.35 0.045 145); --primary-foreground: oklch(0.98 0.005 85); --secondary: oklch(0.45 0.035 65); --secondary-foreground: oklch(0.98 0.005 85); --muted: oklch(0.92 0.008 85); --muted-foreground: oklch(0.5 0.015 120); --accent: oklch(0.45 0.035 65); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.005 85); --border: oklch(0.88 0.008 85); --input: oklch(0.88 0.008 85); --ring: oklch(0.35 0.045 145); --chart-1: oklch(0.35 0.045 145); --chart-2: oklch(0.45 0.035 65); --chart-3: oklch(0.5 0.025 85); --chart-4: oklch(0.4 0.04 120); --chart-5: oklch(0.55 0.03 100); --radius: 0.25rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.18 0.015 120); --foreground: oklch(0.95 0.005 85); --card: oklch(0.2 0.015 120); --card-foreground: oklch(0.95 0.005 85); --popover: oklch(0.2 0.015 120); --popover-foreground: oklch(0.95 0.005 85); --primary: oklch(0.45 0.045 145); --primary-foreground: oklch(0.98 0.005 85); --secondary: oklch(0.55 0.035 65); --secondary-foreground: oklch(0.98 0.005 85); --muted: oklch(0.28 0.015 120); --muted-foreground: oklch(0.65 0.01 85); --accent: oklch(0.55 0.035 65); --accent-foreground: oklch(0.98 0.005 85); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.98 0.005 85); --border: oklch(0.28 0.015 120); --input: oklch(0.28 0.015 120); --ring: oklch(0.45 0.045 145); --sidebar: oklch(0.145 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } @theme inline { --font-sans: "Crimson Pro", "Georgia", serif; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Crimson_Pro } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const crimsonPro = Crimson_Pro({ subsets: ["latin"], weight: ["300", "400", "600", "700"], variable: "--font-sans", }) export const metadata: Metadata = { title: "Frontier 1607 - Luxury Outdoor Apparel", description: "High-end luxury clothing for the modern outdoor enthusiast", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true" "use client" import { ShoppingBag, Search, Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" export function Navigation() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

{/* Logo */}

FRONTIER 1607

{/* Desktop Navigation */}

NEW ARRIVALS COLLECTIONS OUTERWEAR HERITAGE ABOUT

{/* Right Actions */}

{/* Mobile Menu */} {mobileMenuOpen && (

NEW ARRIVALS COLLECTIONS OUTERWEAR HERITAGE ABOUT

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function Hero() { return (

{/* Hero Image */}

{/* Hero Content */}

Fall/Winter 2025

Where Heritage Meets Wilderness

Discover our new collection of meticulously crafted outdoor apparel, designed for those who demand excellence in every adventure.

{/* Scroll Indicator */}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]jpg:file="public/rugged-mountain-landscape-with-pine-forest-at-gold.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/rugged-mountain-landscape-with-pine-forest-at-gold-z1S2qnnLACqsYnQUBPjhw2URA5dh2G.jpg" isMerged="true" [V0_FILE]jpg:file="public/mountain-climber-in-premium-outdoor-jacket-on-snow.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mountain-climber-in-premium-outdoor-jacket-on-snow-xkgFrdVr6qCxh8NF6g88OLTfFkOYht.jpg" isMerged="true" [V0_FILE]jpg:file="public/person-in-luxury-outdoor-clothing-walking-through-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/person-in-luxury-outdoor-clothing-walking-through--Ia9BBN6Kq5I3sWgPTmKgu6PYxD2r8L.jpg" isMerged="true" [V0_FILE]jpg:file="public/outdoor-adventure-gear-laid-out-on-rustic-wooden-s.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/outdoor-adventure-gear-laid-out-on-rustic-wooden-s-PTztTm49FryRvFCd8UuFCnbnyeZkPv.jpg" isMerged="true" [V0_FILE]jpg:file="public/luxury-wool-overcoat-on-model-in-natural-outdoor-s.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-wool-overcoat-on-model-in-natural-outdoor-s-5PB0qOQA6tWMMzv2xmKU5L53xyjoEj.jpg" isMerged="true" [V0_FILE]jpg:file="public/premium-merino-wool-sweater-outdoor-lifestyle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-merino-wool-sweater-outdoor-lifestyle-TSGNELs6q1ZwQyjzhjtYpsPZ1Nur2g.jpg" isMerged="true" [V0_FILE]jpg:file="public/high-end-field-jacket-outdoor-adventure-wear.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/high-end-field-jacket-outdoor-adventure-wear-vuDv658orNHyR6YoFcqNwy58rV8wES.jpg" isMerged="true" [V0_FILE]jpg:file="public/luxury-flannel-shirt-outdoor-heritage-style.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-flannel-shirt-outdoor-heritage-style-b5nFBXR0F4BuNA3R8mASVtlEs1alUQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/artisan-craftsman-working-on-luxury-outdoor-clothi.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/artisan-craftsman-working-on-luxury-outdoor-clothi-Fwml5jLkIRE9vLlgN9ecP3ztVLsTPX.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="lib/shopify/types.ts" isMerged="true" export type Money = { amount: string currencyCode: string } export type SelectedOption = { name: string value: string } export type ProductVariant = { id: string title: string availableForSale: boolean selectedOptions: SelectedOption[] price: Money } export type ProductImage = { url: string altText: string | null thumbhash?: string | null } export type ProductOption = { id: string name: string values: string[] } export type Product = { id: string title: string description: string descriptionHtml: string handle: string availableForSale: boolean productType: string | null category?: { id: string name: string } | null options: ProductOption[] images: { edges: Array<{ node: ProductImage }> } priceRange: { minVariantPrice: Money } compareAtPriceRange?: { minVariantPrice: Money | null } | null variants: ProductVariant[] } export type ShopifyProduct = Product export type ShopifyCollection = { id: string title: string handle: string description: string image: { url: string altText: string | null thumbhash?: string | null } | null } export type ShopifyCartLine = { id: string quantity: number merchandise: ProductVariant & { product: { title: string handle?: string images: { edges: Array<{ node: ProductImage }> } } } } export type ShopifyCart = { id: string lines: { edges: Array<{ node: ShopifyCartLine }> } cost: { totalAmount: Money subtotalAmount?: Money totalTaxAmount?: Money | null } checkoutUrl: string } export type ProductSortKey = "TITLE" | "CREATED_AT" | "PRICE" | "BEST_SELLING" | "RELEVANCE" export type ProductCollectionSortKey = "TITLE" | "PRICE" | "BEST_SELLING" | "MANUAL" | "CREATED" [V0_FILE]typescript:file="lib/shopify/constants.ts" isMerged="true" import type { ProductCollectionSortKey, ProductSortKey } from "./types" export const DEFAULT_PAGE_SIZE = 12 export const DEFAULT_SORT_KEY: ProductSortKey = "RELEVANCE" export const DEFAULT_COLLECTION_SORT_KEY: ProductCollectionSortKey = "BEST_SELLING" [V0_FILE]typescript:file="lib/shopify/utils.ts" isMerged="true" export function getShopifyProductId(globalId: string) { const segments = globalId.split("/") return segments.pop() ?? globalId } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Hero } from "@/components/hero" import { Navigation } from "@/components/navigation" import { FeaturedCollections } from "@/components/featured-collections" import { ProductGrid } from "@/components/product-grid" import { Heritage } from "@/components/heritage" import { Footer } from "@/components/footer" import { getCollections, getProducts } from "@/lib/shopify" export default async function Home() { let collections = [] let products = [] try { collections = await getCollections(6) } catch (error) { console.error("Failed to fetch collections:", error) } try { products = await getProducts({ first: 8, sortKey: "CREATED_AT", reverse: true }) } catch (error) { console.error("Failed to fetch products:", error) } return (

) } [V0_FILE]typescriptreact:file="components/featured-collections.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import type { ShopifyCollection } from "@/lib/shopify/types" import Link from "next/link" interface FeaturedCollectionsProps { collections: ShopifyCollection[] } export function FeaturedCollections({ collections }: FeaturedCollectionsProps) { const fallbackCollections = [ { title: "Mountain Series", description: "Technical outerwear engineered for alpine conditions and extreme weather", image: "/mountain-climber-in-premium-outdoor-jacket-on-snow.jpg", handle: "mountain-series", }, { title: "Forest Collection", description: "Refined layers crafted for woodland exploration and trail adventures", image: "/person-in-luxury-outdoor-clothing-walking-through-.jpg", handle: "forest-collection", }, { title: "Expedition Gear", description: "Premium essentials designed for extended journeys and backcountry travel", image: "/outdoor-adventure-gear-laid-out-on-rustic-wooden-s.jpg", handle: "expedition-gear", }, ] const displayCollections = collections.length > 0 ? collections.slice(0, 3).map((col) => ({ title: col.title, description: col.description || "Explore this collection", image: col.image?.url || "/outdoor-clothing-collection.jpg", handle: col.handle, })) : fallbackCollections return (

Curated Collections

Crafted for Every Terrain

{displayCollections.map((collection, index) => (

{collection.title}

{collection.description}

))}

) } [V0_FILE]typescriptreact:file="components/product-grid.tsx" isEdit="true" isMerged="true" import type { ShopifyProduct } from "@/lib/shopify/types" import Link from "next/link" interface ProductGridProps { products: ShopifyProduct[] } export function ProductGrid({ products }: ProductGridProps) { const fallbackProducts = [ { name: "Heritage Wool Overcoat", price: "$895", image: "/luxury-wool-overcoat-on-model-in-natural-outdoor-s.jpg", tag: "New Arrival", handle: "heritage-wool-overcoat", }, { name: "Alpine Merino Sweater", price: "$325", image: "/premium-merino-wool-sweater-outdoor-lifestyle.jpg", handle: "alpine-merino-sweater", }, { name: "Expedition Field Jacket", price: "$1,250", image: "/high-end-field-jacket-outdoor-adventure-wear.jpg", tag: "Bestseller", handle: "expedition-field-jacket", }, { name: "Mountain Flannel Shirt", price: "$195", image: "/luxury-flannel-shirt-outdoor-heritage-style.jpg", handle: "mountain-flannel-shirt", }, { name: "Technical Down Parka", price: "$1,450", image: "/luxury-down-parka-outdoor-winter-jacket.jpg", tag: "New Arrival", handle: "technical-down-parka", }, { name: "Cashmere Blend Hoodie", price: "$425", image: "/premium-cashmere-hoodie-outdoor-lifestyle.jpg", handle: "cashmere-blend-hoodie", }, { name: "Waxed Canvas Vest", price: "$385", image: "/waxed-canvas-vest-heritage-outdoor-wear.jpg", handle: "waxed-canvas-vest", }, { name: "Merino Base Layer", price: "$145", image: "/merino-wool-base-layer-outdoor-technical-wear.jpg", handle: "merino-base-layer", }, ] const displayProducts = products.length > 0 ? products.slice(0, 8).map((product) => ({ name: product.title, price: `$${Number.parseFloat(product.priceRange.minVariantPrice.amount).toFixed(0)}`, image: product.images.edges[0]?.node.url || "/diverse-outdoor-clothing.png", handle: product.handle, tag: undefined, })) : fallbackProducts return (

New Arrivals

Latest Essentials

VIEW ALL →

{displayProducts.map((product, index) => (

{product.tag && (

{product.tag}

)}

{product.name}

{product.price}

))}

VIEW ALL →

) } [V0_FILE]jpg:file="public/outdoor-clothing-collection.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/outdoor-clothing-collection-k8Tq6ADqMbwI2cEoZK32Bc4uvqZipa.jpg" isMerged="true" [V0_FILE]png:file="public/diverse-outdoor-clothing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-outdoor-clothing-RXpi9zfFaVGJdUGjpJ3wgFOJwaD2DU.png" isMerged="true" [V0_FILE]typescript:file="lib/shopify/parse-shopify-domain.ts" isEdit="true" isMerged="true" export function parseShopifyDomain(domain: string) { const normalized = domain .trim() .replace(/^https?:\/\//, "") .replace(/\/$/, "") // Handle cases like "admin.shopify.com/store/storename" const adminMatch = normalized.match(/admin\.shopify\.com\/store\/([^/]+)/) if (adminMatch) { const storeName = adminMatch[1].replace(".myshopify.com", "") return `${storeName}.myshopify.com` } // If it's already a .myshopify.com domain, return it if (normalized.endsWith(".myshopify.com")) { return normalized } // Remove any .myshopify.com if it exists and re-add it const storeName = normalized.split(".")[0] return `${storeName}.myshopify.com` } [V0_FILE]jpg:file="public/luxury-down-parka-outdoor-winter-jacket.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-down-parka-outdoor-winter-jacket-DhNqvOXvt1cXcpyDxGguHFOc1ma58C.jpg" isMerged="true" [V0_FILE]jpg:file="public/premium-cashmere-hoodie-outdoor-lifestyle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-cashmere-hoodie-outdoor-lifestyle-Sv4TzGo9icK1tvgbO4YOFnMmWCnmCk.jpg" isMerged="true" [V0_FILE]jpg:file="public/waxed-canvas-vest-heritage-outdoor-wear.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/waxed-canvas-vest-heritage-outdoor-wear-xJwD2EqYzk3BoJW6hGxKBpQd56ptgS.jpg" isMerged="true" [V0_FILE]jpg:file="public/merino-wool-base-layer-outdoor-technical-wear.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/merino-wool-base-layer-outdoor-technical-wear-KXfjUKQC2Y4cfuarzmAfBMriq1KGf6.jpg" isMerged="true" [V0_FILE]typescript:file="lib/shopify/index.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { ProductCollectionSortKey, ProductSortKey, ShopifyCart, ShopifyCollection, ShopifyProduct } from "./types" import { parseShopifyDomain } from "./parse-shopify-domain" import { DEFAULT_PAGE_SIZE, DEFAULT_SORT_KEY } from "./constants" const rawStoreDomain = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN const fallbackStoreDomain = "v0-template.myshopify.com" const SHOPIFY_STORE_DOMAIN = rawStoreDomain ? parseShopifyDomain(rawStoreDomain) : fallbackStoreDomain const SHOPIFY_STOREFRONT_ACCESS_TOKEN = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN const SHOPIFY_STOREFRONT_API_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/2025-01/graphql.json` async function shopifyFetch({ query, variables = {}, }: { query: string variables?: Record }): Promise<{ data: T; errors?: any[] }> { try { const headers: Record = { "Content-Type": "application/json", } if (SHOPIFY_STOREFRONT_ACCESS_TOKEN) { headers["X-Shopify-Storefront-Access-Token"] = SHOPIFY_STOREFRONT_ACCESS_TOKEN } const response = await fetch(SHOPIFY_STOREFRONT_API_URL, { method: "POST", headers, body: JSON.stringify({ query, variables, }), cache: "no-store", }) if (!response.ok) { throw new Error(`Shopify API HTTP error! Status: ${response.status}`) } const json = await response.json() if (json.errors) { throw new Error(`Shopify GraphQL errors: ${JSON.stringify(json.errors)}`) } return json } catch (error) { throw error } } // Get all products export async function getProducts({ first = DEFAULT_PAGE_SIZE, sortKey = DEFAULT_SORT_KEY, reverse = false, query: searchQuery, }: { first?: number sortKey?: ProductSortKey reverse?: boolean query?: string }): Promise { const query = /* gql */ ` query getProducts($first: Int!, $sortKey: ProductSortKeys!, $reverse: Boolean) { products(first: $first, sortKey: $sortKey, reverse: $reverse) { edges { node { id title description descriptionHtml handle availableForSale productType options { id name values } images(first: 5) { edges { node { url altText } } } priceRange { minVariantPrice { amount currencyCode } } compareAtPriceRange { minVariantPrice { amount currencyCode } } variants(first: 10) { edges { node { id title price { amount currencyCode } availableForSale selectedOptions { name value } } } } } } } } ` const { data } = await shopifyFetch<{ products: { edges: Array<{ node: ShopifyProduct }> } }>({ query, variables: { first, sortKey, reverse, query: searchQuery }, }) return data.products.edges.map((edge) => edge.node) } // Get single product by handle export async function getProduct(handle: string): Promise { const query = /* gql */ ` query getProduct($handle: String!) { product(handle: $handle) { id title description descriptionHtml handle productType category { id name } options { id name values } images(first: 10) { edges { node { url altText } } } priceRange { minVariantPrice { amount currencyCode } } compareAtPriceRange { minVariantPrice { amount currencyCode } } variants(first: 10) { edges { node { id title price { amount currencyCode } availableForSale selectedOptions { name value } } } } } } ` const { data } = await shopifyFetch<{ product: ShopifyProduct | null }>({ query, variables: { handle }, }) return data.product } // Get collections export async function getCollections(first = 10): Promise { const query = /* gql */ ` query getCollections($first: Int!) { collections(first: $first) { edges { node { id title handle description image { url altText } } } } } ` const { data } = await shopifyFetch<{ collections: { edges: Array<{ node: ShopifyCollection }> } }>({ query, variables: { first }, }) return data.collections.edges.map((edge) => edge.node) } // Get products from a specific collection (simplified - no server-side filtering) export async function getCollectionProducts({ collection, limit = DEFAULT_PAGE_SIZE, sortKey = DEFAULT_SORT_KEY, query: searchQuery, reverse = false, }: { collection: string limit?: number sortKey?: ProductCollectionSortKey query?: string reverse?: boolean }): Promise { const query = /* gql */ ` query getCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys!, $reverse: Boolean) { collection(handle: $handle) { products(first: $first, sortKey: $sortKey, reverse: $reverse) { edges { node { id title description descriptionHtml handle productType category { id name } options { id name values } images(first: 5) { edges { node { url altText } } } priceRange { minVariantPrice { amount currencyCode } } compareAtPriceRange { minVariantPrice { amount currencyCode } } variants(first: 10) { edges { node { id title price { amount currencyCode } availableForSale selectedOptions { name value } } } } } } } } } ` const { data } = await shopifyFetch<{ collection: { products: { edges: Array<{ node: ShopifyProduct }> } } | null }>({ query, variables: { handle: collection, first: limit, sortKey, query: searchQuery, reverse }, }) if (!data.collection) { return [] } return data.collection.products.edges.map((edge) => edge.node) } // Create cart export async function createCart(): Promise { const query = /* gql */ ` mutation cartCreate { cartCreate { cart { id lines(first: 100) { edges { node { id quantity merchandise { ... on ProductVariant { id title price { amount currencyCode } product { title images(first: 1) { edges { node { url altText } } } } } } } } } cost { totalAmount { amount currencyCode } } checkoutUrl } userErrors { field message } } } ` const { data } = await shopifyFetch<{ cartCreate: { cart: ShopifyCart userErrors: Array<{ field: string; message: string }> } }>({ query }) if (data.cartCreate.userErrors.length > 0) { throw new Error(data.cartCreate.userErrors[0].message) } return data.cartCreate.cart } // Add items to cart export async function addCartLines( cartId: string, lines: Array<{ merchandiseId: string; quantity: number }>, ): Promise { const query = /* gql */ ` mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) { cartLinesAdd(cartId: $cartId, lines: $lines) { cart { id lines(first: 100) { edges { node { id quantity merchandise { ... on ProductVariant { id title price { amount currencyCode } product { title images(first: 1) { edges { node { url altText } } } } } } } } } cost { totalAmount { amount currencyCode } } checkoutUrl } userErrors { field message } } } ` const { data } = await shopifyFetch<{ cartLinesAdd: { cart: ShopifyCart userErrors: Array<{ field: string; message: string }> } }>({ query, variables: { cartId, lines, }, }) if (data.cartLinesAdd.userErrors.length > 0) { throw new Error(data.cartLinesAdd.userErrors[0].message) } return data.cartLinesAdd.cart } // Update items in cart export async function updateCartLines( cartId: string, lines: Array<{ id: string; quantity: number }>, ): Promise { const query = /* gql */ ` mutation cartLinesUpdate($cartId: ID!, $lines: [CartLineUpdateInput!]!) { cartLinesUpdate(cartId: $cartId, lines: $lines) { cart { id lines(first: 100) { edges { node { id quantity merchandise { ... on ProductVariant { id title price { amount currencyCode } product { title images(first: 1) { edges { node { url altText } } } } } } } } } cost { totalAmount { amount currencyCode } } checkoutUrl } userErrors { field message } } } ` const { data } = await shopifyFetch<{ cartLinesUpdate: { cart: ShopifyCart userErrors: Array<{ field: string; message: string }> } }>({ query, variables: { cartId, lines, }, }) if (data.cartLinesUpdate.userErrors.length > 0) { throw new Error(data.cartLinesUpdate.userErrors[0].message) } return data.cartLinesUpdate.cart } // Remove items from cart export async function removeCartLines(cartId: string, lineIds: string[]): Promise { const query = /* gql */ ` mutation cartLinesRemove($cartId: ID!, $lineIds: [ID!]!) { cartLinesRemove(cartId: $cartId, lineIds: $lineIds) { cart { id lines(first: 100) { edges { node { id quantity merchandise { ... on ProductVariant { id title price { amount currencyCode } selectedOptions { name value } product { title handle images(first: 10) { edges { node { url altText } } } } } } } } } cost { totalAmount { amount currencyCode } } checkoutUrl } userErrors { field message } } } ` const { data } = await shopifyFetch<{ cartLinesRemove: { cart: ShopifyCart userErrors: Array<{ field: string; message: string }> } }>({ query, variables: { cartId, lineIds, }, }) if (data.cartLinesRemove.userErrors.length > 0) { throw new Error(data.cartLinesRemove.userErrors[0].message) } return data.cartLinesRemove.cart } // Get cart export async function getCart(cartId: string): Promise { const query = /* gql */ ` query getCart($cartId: ID!) { cart(id: $cartId) { id lines(first: 100) { edges { node { id quantity merchandise { ... on ProductVariant { id title price { amount currencyCode } selectedOptions { name value } product { title handle images(first: 10) { edges { node { url altText } } } } } } } } } cost { totalAmount { amount currencyCode } subtotalAmount { amount currencyCode } totalTaxAmount { amount currencyCode } } checkoutUrl } } ` const { data } = await shopifyFetch<{ cart: ShopifyCart | null }>({ query, variables: { cartId }, }) return data.cart } [V0_FILE]typescriptreact:file="components/heritage.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export function Heritage() { return (

Est. 2025 • Made with Passion

Where Timeless Meets Performance

Frontier 1607 was born from one simple belief: that the finest outdoor apparel should marry timeless design with uncompromising performance. Each piece in our collection is meticulously crafted to honor both heritage and innovation, creating garments that feel as refined in the city as they perform in the wilderness.

) } [V0_FILE]jpg:file="public/person-pressing-vinyl-heat-transfer-on-clothing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/person-pressing-vinyl-heat-transfer-on-clothing-pmkXSW8WywFjXSoBBPRAsyHaEO2Loe.jpg"

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This