Search Documentation

Search for a documentation page...

Customization

Customize the look, feel, and behavior of your YNS storefront.

Styling

The storefront uses Tailwind CSS v4 for styling. Global styles are in app/globals.css. To customize the design:

Colors

Override CSS custom properties in globals.css:

:root {
  --color-primary: #635bff;
  --color-secondary: #1a1a2e;
}

Typography

The storefront uses Geist Sans for body text and Geist Mono for code. These are loaded via next/font/google in the root layout.

Components

UI components are in the components/ directory and built with Radix UI primitives and shadcn/ui patterns. Modify them directly — they're part of your codebase, not a dependency.

Layout

Homepage

The homepage (app/page.tsx) renders these sections:

  • Hero — main banner with CTA
  • ProductGrid — featured products grid
  • About — store description
  • Newsletter — email signup

Add, remove, or reorder sections by editing page.tsx.

The navbar is in app/navbar.tsx. Add links, change the logo, or modify the layout here.

The footer is in app/footer.tsx. Update links, social media icons, and copyright info.

Product Pages

Product detail pages are at app/product/[slug]/page.tsx. Key components:

  • ImageGallery — product image carousel
  • ProductFeatures — feature list from product metadata
  • AddToCartButton — variant selector and add-to-cart

Adding Pages

To add a new static page:

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main className="max-w-3xl mx-auto px-4 py-16">
      <h1>About Us</h1>
      <p>Your store description...</p>
    </main>
  );
}

AI Customization

The storefront is designed to be AI-friendly. Use Claude Code or Cursor to make changes by describing what you want:

  • "Change the homepage hero to show a video background"
  • "Add a testimonials section below the product grid"
  • "Change the color scheme to dark mode"
PreviousConfigurationStorefrontNextDeploymentStorefront