Default Theme

Overview

The Default Theme (siyahfy-theme-2502) is the pre-built storefront template that every new Siyahfy store receives. It is a fully-featured e-commerce theme with pre-built sections for homepage, product pages, collection pages, cart, checkout, customer accounts, and more. The theme is designed to be fully customizable through the Theme Editor without any code changes.

Users: Storefront customers (shoppers), configured by Vendors via the Theme Editor

Tech Stack

Technology	Version	Purpose
Next.js	16.x	React framework with App Router
React	19.x	UI library
TypeScript	5.x	Type safety
Tailwind CSS	4.x	Utility-first styling
rc-slider	11.x	Price range slider (collection filters)
react-phone-number-input	3.x	Phone number input with country codes

The default theme is intentionally minimal in dependencies. It relies on the Siyahfy backend API for all data and the Theme Editor configuration for all visual customizations.

Folder Structure


siyahfy-theme-2502/
├── app/
│   ├── layout.tsx                    # Root layout (loads theme shell)
│   ├── page.tsx                      # Homepage (section renderer)
│   ├── account/                      # Customer account page
│   │   └── page.tsx
│   ├── cart/                         # Cart page
│   │   └── page.tsx
│   ├── checkout/                     # Checkout flow
│   │   ├── page.tsx                  # Checkout form
│   │   └── thank-you/               # Order confirmation
│   │       └── page.tsx
│   ├── collections/                  # Collection pages
│   │   └── [slug]/                   # Dynamic collection
│   │       └── page.tsx
│   ├── products/                     # Product pages
│   │   └── [slug]/                   # Dynamic product detail
│   │       └── page.tsx
│   ├── pages/                        # Custom vendor pages
│   │   └── [slug]/                   # Dynamic page rendering
│   │       └── page.tsx
│   └── policies/                     # Policy pages
│       └── [slug]/                   # Dynamic policy page
│           └── page.tsx
├── components/
│   ├── sections/                     # Theme sections
│   │   ├── SectionRenderer.tsx       # Routes section type to component
│   │   ├── Header.tsx                # Site header & navigation
│   │   ├── Footer.tsx                # Site footer
│   │   ├── HeroBanner.tsx            # Hero banner / slideshow
│   │   ├── FeaturedCollection.tsx    # Featured product collection
│   │   ├── RichText.tsx              # Rich text content block
│   │   ├── Newsletter.tsx            # Newsletter signup form
│   │   ├── AnnouncementBar.tsx       # Top announcement strip
│   │   ├── CartDrawer.tsx            # Slide-out cart drawer
│   │   ├── CustomSection.tsx         # Custom widget-based section
│   │   ├── SearchModal.tsx           # Search overlay
│   │   └── ProductPlaceholderImage.tsx # Placeholder for missing images
│   ├── widgets/                      # Widget renderers (28 widgets)
│   │   ├── WidgetRenderer.tsx        # Routes widget type to component
│   │   ├── HeadingWidget.tsx         # Heading text
│   │   ├── TextWidget.tsx            # Rich text block
│   │   ├── ImageWidget.tsx           # Single image
│   │   ├── ImageBoxWidget.tsx        # Image with overlay text
│   │   ├── ImageGalleryWidget.tsx    # Image gallery grid
│   │   ├── ButtonWidget.tsx          # CTA button
│   │   ├── VideoWidget.tsx           # Video embed
│   │   ├── AccordionWidget.tsx       # FAQ/accordion
│   │   ├── TabsWidget.tsx            # Tabbed content
│   │   ├── CounterWidget.tsx         # Animated counter
│   │   ├── TestimonialWidget.tsx     # Testimonial card
│   │   ├── ProductsWidget.tsx        # Product grid
│   │   ├── CategoriesWidget.tsx      # Category display
│   │   ├── SocialIconsWidget.tsx     # Social media links
│   │   ├── GoogleMapsWidget.tsx      # Embedded map
│   │   ├── IconWidget.tsx            # Single icon
│   │   ├── IconListWidget.tsx        # Icon list
│   │   ├── DividerWidget.tsx         # Horizontal line
│   │   ├── SpacerWidget.tsx          # Vertical space
│   │   ├── StarRatingWidget.tsx      # Star rating display
│   │   ├── ProgressBarWidget.tsx     # Progress bar
│   │   ├── MenuWidget.tsx            # Navigation menu
│   │   ├── HtmlWidget.tsx            # Raw HTML block
│   │   ├── AlertWidget.tsx           # Alert/notice box
│   │   ├── ToggleWidget.tsx          # Toggle content
│   │   ├── SoundCloudWidget.tsx      # SoundCloud embed
│   │   └── InnerSectionWidget.tsx    # Nested column layout
│   ├── collection/                   # Collection page components
│   │   ├── CollectionPageClient.tsx  # Client-side collection page
│   │   ├── CollectionProductCard.tsx # Product card in grid
│   │   ├── FilterSidebar.tsx         # Filter sidebar (desktop)
│   │   ├── FilterDrawer.tsx          # Filter drawer (mobile)
│   │   ├── ActiveFilters.tsx         # Active filter pills
│   │   ├── PriceRangeSlider.tsx      # Price range filter
│   │   ├── SortDropdown.tsx          # Sort options dropdown
│   │   └── SortDrawer.tsx            # Sort drawer (mobile)
│   ├── checkout/                     # Checkout components
│   │   ├── CheckoutPage.tsx          # Main checkout layout
│   │   ├── CheckoutForm.tsx          # Shipping/billing form
│   │   ├── CheckoutBanner.tsx        # Checkout header banner
│   │   ├── OrderSummary.tsx          # Order total summary
│   │   └── ThankYouPage.tsx          # Post-purchase confirmation
│   ├── ThemeShellLayout.tsx          # Outer shell (header + footer)
│   ├── ThemeColors.tsx               # CSS custom properties injection
│   ├── ThemeTypography.tsx           # Typography CSS injection
│   ├── ClientProviders.tsx           # Client-side context providers
│   ├── ProductDetail.tsx             # Product detail page component
│   ├── CartPageContent.tsx           # Full cart page component
│   ├── AccountPageContent.tsx        # Customer account component
│   └── VendorBar.tsx                 # "Powered by Siyahfy" bar
├── lib/
│   ├── get-theme-config.ts           # Fetch theme configuration from API
│   ├── get-theme-shell.ts            # Fetch header/footer shell config
│   ├── get-store-slug.ts             # Resolve store slug from domain
│   ├── get-preview-config.ts         # Preview mode configuration
│   ├── cart-context.tsx              # Shopping cart context (React Context)
│   ├── checkout-api.ts               # Checkout API calls
│   ├── checkout-utils.ts             # Checkout helper functions
│   ├── customer-api.ts               # Customer auth & profile API
│   ├── color-schemes.ts              # Color scheme definitions
│   ├── hover-animations.ts           # CSS hover animation presets
│   ├── localization-data.ts          # Currency & locale data
│   ├── icon-library.tsx              # Icon set for widgets
│   └── types.ts                      # Shared TypeScript types
└── public/                           # Static assets

Key Routes / Pages

Route	Description
`/`	Homepage — renders sections from theme config
`/products/[slug]`	Product detail page
`/collections/[slug]`	Collection page with filters & sorting
`/cart`	Full shopping cart page
`/checkout`	Checkout form (shipping, payment)
`/checkout/thank-you`	Order confirmation page
`/account`	Customer account (orders, profile)
`/pages/[slug]`	Custom vendor pages (About, Contact, etc.)
`/policies/[slug]`	Policy pages (Privacy, Refund, Terms, etc.)

How the Theme Renders

1. Store Resolution

When a request arrives, lib/get-store-slug.ts resolves which vendor store to render based on the domain or subdomain. This is critical for the multi-tenant architecture.

2. Theme Configuration Loading

The lib/get-theme-config.ts module fetches the theme configuration from the backend API. This JSON includes:

List of sections and their settings (as configured by the vendor in the Theme Editor)
Global theme settings (colors, fonts, spacing, etc.)
Color scheme definitions
Navigation menus

3. Theme Shell

lib/get-theme-shell.ts loads the header and footer configuration separately. The ThemeShellLayout.tsx component wraps every page with the header and footer.

4. CSS Custom Properties

ThemeColors.tsx and ThemeTypography.tsx inject CSS custom properties based on the vendor’s theme settings:


:root {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --border-radius: 8px;
  /* ... more custom properties from theme config */
}

5. Section Rendering

The homepage (and any page with sections) uses SectionRenderer.tsx to iterate over the configured sections and render each one:


// Simplified section rendering flow
{sections.map(section => (
  <SectionRenderer
    key={section.id}
    type={section.type}        // 'hero-banner', 'featured-collection', etc.
    settings={section.settings}
    blocks={section.blocks}
  />
))}

Each section type maps to a specific component (HeroBanner, FeaturedCollection, RichText, etc.) that renders using the provided settings.

Data Fetching

The theme fetches all data from the Siyahfy backend API using the store’s API key:


// Typical API call pattern
const response = await fetch(
  `${API_URL}/api/v2/storefront/products?store=${storeSlug}`,
  {
    headers: {
      'Authorization': `Bearer ${apiKey}`
    },
    next: { revalidate: 60 } // ISR: revalidate every 60 seconds
  }
);

Key Data Endpoints

Endpoint	Purpose
`GET /api/v2/storefront/products`	Product listings
`GET /api/v2/storefront/product/:slug`	Single product detail
`GET /api/v2/storefront/collections`	Collection listings
`GET /api/v2/storefront/collection/:slug`	Collection products
`GET /api/v2/menus`	Navigation menus
`GET /api/v2/categories`	Category tree
`POST /api/v2/cart/*`	Cart operations
`POST /api/v2/checkout/*`	Checkout flow
`POST /api/v2/customer/*`	Customer auth & profile

Shopping Cart

The cart is managed client-side through a React Context (lib/cart-context.tsx). Cart state includes:

Line items with quantity, variant, and pricing
Cart totals (subtotal, taxes, shipping, discount)
Discount code application

Cart operations sync with the backend via the cart API for persistent server-side cart state.

Checkout Flow

The checkout flow is handled by the checkout/ components:

CheckoutPage — Main layout with form and order summary
CheckoutForm — Multi-step form for shipping address, billing, and payment method selection
OrderSummary — Real-time order total with line items and discounts
ThankYouPage — Post-purchase confirmation with order details

Payment processing is handled server-side through Razorpay or Cashfree, depending on the vendor’s payment configuration.

How Vendor Customizations Apply

Vendor opens the Theme Editor and customizes sections, colors, fonts, and layout
Theme Editor saves the configuration JSON to the backend
When a customer visits the storefront, the theme fetches this JSON
ThemeColors.tsx injects CSS custom properties from the settings
ThemeTypography.tsx sets font families and sizes
SectionRenderer.tsx renders sections in the configured order with the configured settings
Each section component reads its settings and renders accordingly

This means the same theme codebase serves every vendor’s store — the only difference is the configuration JSON.

Environment Variables

Variable	Description
`NEXT_PUBLIC_API_URL`	Backend API base URL
`NEXT_PUBLIC_STORE_SLUG`	Default store slug (for single-store deploy)
`NEXT_PUBLIC_STOREFRONT_URL`	Storefront URL (self-reference)