┌─────────────────────────────────────────────────┐
│ Theme ZIP                                        │
│  templates/home.cw   templates/product.detail.cw │
│  sections/header.cw  sections/footer.cw          │
└──────────┬──────────────────────────────────────┘
           │ Extract & Upload
           ▼
┌─────────────────────────────────────────────────┐
│ Backend (C#)                                     │
│  1. Lexer — Tokenizes .cw into TaggedTokens      │
│  2. Parser — Builds AST from tokens              │
│  3. Compiler — Walks AST, executes directives    │
│  4. Sandbox — Restricts to registered cw_*()     │
│  5. Output — Server-rendered HTML                │
└──────────┬──────────────────────────────────────┘
           │ fetchRenderTemplate() (API)
           ▼
┌─────────────────────────────────────────────────┐
│ Frontend (Browser)                               │
│  Inject HTML into DOM                            │
│  Hydrate widget areas                            │
│  Missing template → Show v2 template error       │
└─────────────────────────────────────────────────┘
    

my-theme-v3.0.0.zip
├── manifest.json              // Theme metadata, templates, header/footer presets, starter content, widgets
├── templates/
│   ├── home.cw                // Home page template (directive-based)
│   ├── catalogue.default.cw   // Category/collection listing
│   ├── product.detail.cw      // Product detail page
│   ├── cart.cw                // Cart page
│   ├── checkout.cw            // Checkout page
│   ├── login.cw               // Customer login page
│   ├── register.cw            // Customer registration page
│   ├── maintenance.cw         // Maintenance/offline page
│   ├── blogs.default.cw       // Blog index
│   ├── post.default.cw        // Blog post
│   ├── page.default.cw        // Generic page
│   ├── page.not-found.cw      // 404 page
│   └── account/
│       ├── dashboard.cw       // Account dashboard
│       ├── orders.cw          // Order history
│       ├── order-detail.cw    // Single order view
│       ├── wishlist.cw        // Customer wishlist
│       ├── returns.cw         // Customer returns
│       ├── reviews.cw         // Customer reviews
│       ├── profile.cw         // Profile settings
│       ├── addresses.cw       // Saved addresses
│       ├── invoices.cw        // Customer invoices
│       └── documents.cw       // Customer documents
├── partials/
│   ├── header.cw              // Default header partial (fallback)
│   ├── footer.cw              // Default footer partial (fallback)
│   ├── header-light.cw        // Named header preset (@include via key)
│   ├── header-dark.cw         // Named header preset (@include via key)
│   ├── footer-dark.cw         // Named footer preset (@include via key)
│   └── footer-minimal.cw      // Named footer preset (@include via key)
├── sections/
│   ├── hero-banner.cw         // Reusable section
│   └── featured-products.cw   // Reusable section
├── widgets/                   // Custom widget .cw templates
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   ├── responsive.css
│   │   └── bootstrap.min.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       ├── logo.png
│       ├── thumbnail.png      // Theme thumbnail (for marketplace listing)
│       └── hero-bg.jpg
└── bundled-plugins/
    ├── whatsapp-chat-v2.0.0.zip  // Optional companion plugin
    └── reviews-summary-v2.0.0.zip

{
  "name":        "My Storefront Theme",
  "version":     "2.0.0",
  "description": "A modern, responsive storefront theme",
  "author":      "CoreWave",
  "formatVersion": 3,

  "thumbnail": "assets/images/thumbnail.png",

  "templates": {
    "home.default":      { "label": "Home",      "icon": "home",    "format": "cw" },
    "catalogue.default": { "label": "Catalog",   "icon": "grid",   "format": "cw" },
    "product.detail":    { "label": "Product Detail", "icon": "box",    "format": "cw" },
    "cart.default":      { "label": "Cart",       "icon": "cart",   "format": "cw" },
    "checkout.default":  { "label": "Checkout",  "icon": "credit-card", "format": "cw" },
    "page.default":      { "label": "Page",       "icon": "file",   "format": "cw" },
    "page.not-found":   { "label": "404",        "icon": "alert-circle", "format": "cw" },
    "maintenance.default": {
      "label": "Coming Soon",
      "icon": "clock",
      "format": "cw",
      "showHeader": false,
      "showFooter": false
    }
  },

  "headerPresets": [
    {
      "key":     "header-light",
      "label":   "Light Header",
      "partial": "partials/header-light.cw"
    },
    {
      "key":     "header-dark",
      "label":   "Dark Header",
      "partial": "partials/header-dark.cw"
    }
  ],

  "footerPresets": [
    {
      "key":     "footer-dark",
      "label":   "Dark Footer",
      "partial": "partials/footer-dark.cw",
      "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/footer-dark-preview.png"
    },
    {
      "key":     "footer-minimal",
      "label":   "Minimal Footer",
      "partial": "partials/footer-minimal.cw",
      "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/footer-minimal-preview.png"
    }
  ],

  "defaultHeaderPresetKey": "header-light",
  "defaultFooterPresetKey": "footer-dark",

  "starterContent": {
    "home.default": { "defaultHome": true },
    "product.detail": { "defaultProductDetails": true },
    "blog.default": { "defaultBlogPage": true },
    "post.default": { "defaultBlogPost": true },
    "maintenance.default": {
      "defaultMaintenance": true,
      "showHeader": false,
      "showFooter": false
    },

    "pages": [
      {
        "title":           "About Us",
        "handle":          "about-us",
        "templateKey":     "page.default",
        "pageHeaderKey":   "header-dark",
        "pageFooterKey":   "footer-minimal",
        "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/about-page-preview.png",
        "sortOrder":       2,
        "publish":         true
      },
      {
        "title":           "Contact",
        "handle":          "contact",
        "templateKey":     "page.default",
        "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/contact-page-preview.png",
        "sortOrder":       3,
        "publish":         true
      },
      {
        "title":           "Coming Soon",
        "handle":          "coming-soon",
        "templateKey":     "maintenance.default",
        "showHeader":      false,
        "showFooter":      false,
        "pageHeaderKey":   "__none",
        "pageFooterKey":   "__none",
        "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/coming-soon-preview.png",
        "sortOrder":       4,
        "publish":         true
      }
    ],

    "menus": {
      "main": [
        { "label": "Home", "url": "/", "sortOrder": 1 },
        { "label": "Shop", "url": "/shop", "sortOrder": 2 },
        { "label": "About", "pageHandle": "about-us", "sortOrder": 3 },
        { "label": "Blog", "url": "/blogs", "sortOrder": 4 },
        { "label": "Categories", "sortOrder": 5,
          "children": [
            { "label": "Clothing",  "pageHandle": "category-clothing",  "sortOrder": 1 },
            { "label": "Electronics", "pageHandle": "category-electronics", "sortOrder": 2 }
          ]
        }
      ],
      "footer": [
        { "label": "Contact", "pageHandle": "contact", "sortOrder": 1 }
      ],
      "secondary-nav": [
        { "label": "Support", "url": "/support", "sortOrder": 1 },
        { "label": "FAQ", "pageHandle": "faq", "sortOrder": 2 }
      ]
    }
  }
}

{{--
  Template Name: Home Page
  Template Key: home.default
--}}

@code
  __featured = cw_get_featured_products(8);
  __store = cw_get_store_info();
@endcode

@include('header')

{{-- Hero Section --}}
<section class="hero">
  <div class="container">
    <h1>@code echo __store.name; @endcode</h1>
    <p>@code echo __store.tagline; @endcode</p>
    <a href="@link('/shop')" class="btn btn--primary">Shop Now</a>
  </div>
</section>

{{-- Featured Products --}}
@if(__featured)
<section class="products">
  <div class="container">
    <h2>Featured Products</h2>
    <div class="product-grid">
      @each('product-card', __featured, 'product')
    </div>
  </div>
</section>
@endif

@include('footer')

{{-- This comment will not appear in the rendered HTML --}}

<!DOCTYPE html>
<html>
<head>
  @yield('head')
</head>
<body>
  @include('header')
  <main>
    @yield('content')
  </main>
  @include('footer')
  @stack('footer-scripts')
</body>
</html>

@extends('layouts/main')

@section('head')
  <title>@code echo __page.title; @endcode</title>
  @css('assets/css/page.css')
@endsection

@section('content')
  <article>
    <h1>@code echo __page.title; @endcode</h1>
    @code echo __page.content; @endcode
  </article>
@endsection

@push('footer-scripts')
  <script src="@asset('assets/js/page.js')"></script>
@endpush

@code
  __products = cw_get_products(['category' => 'clothing', 'limit' => 12]);
  __store = cw_get_store_info();
  __cart_count = cw_get_cart_count();
  __is_logged_in = cw_user_logged_in();
@endcode

theme.zip
├── templates/
│   ├── home.default.cw
│   └── product.detail.cw
├── sections/
│   ├── hero-banner.cw
│   └── featured-products.cw
└── partials/
    └── product-card.cw

{{-- sections/featured-products.cw --}}
<section class="featured-products">
  <header>
    <h2>{{ cw_default(__section_title, 'Featured Products') }}</h2>
  </header>

  @query(__products, ['type' => 'products', 'tag' => 'featured', 'limit' => 8, 'orderby' => 'price', 'order' => 'asc'])
    <div class="product-grid">
      @each('product-card', __products, 'product')
    </div>
  @else
    <p>No featured products are available yet.</p>
  @endquery
</section>

@extends('layouts/main')

@section('content')
  @include('hero-banner')

  @var(__section_title, 'Best sellers')
  @include('featured-products')
@endsection

@switch(__route.kind)
  @case('product')
    <h1>Product</h1>
    @break
  @case('blog')
    <h1>Blog</h1>
    @break
  @default
    <h1>Storefront</h1>
@endswitch

@is_product()
  @code
    __product = cw_get_product();
  @endcode

  <a href="{ cw_product_url(__product) }">View product</a>
@endis

@is_account()
  <a href="{ cw_route('account.orders') }">Orders</a>
@endis

@include('header')
@includeonce('partials/product-pagination.cw')
@query(__products, ['type' => 'products', 'limit' => 8, 'orderby' => 'price'])
@hook('product.card.after', __product)
@filter(name: 'product.price_html', input: __html)
@var(__title, 'Featured Products')
@set(__layout, 'shop')
@echo(__title)

@extends('layouts/main')

@section('title')Home@endsection

@section('content')
  <h1>{{ cw_get_store().name }}</h1>
@endsection

@query(__products, ['type' => 'products', 'limit' => 12])
  @each('product-card', __products, 'product')
@endquery

@code
  __store = cw_get_store();
  __featured = cw_get_featured_products(8);
  echo __store.name;
@endcode

@var(__cta, 'Shop now')
<a href="/products">@echo(__cta)</a>

@code
  __customer = function_exists('cw_customer') ? cw_customer() : null;
  __excerpt = cw_str_limit(text: strip_tags(__post.content), limit: 120);
@endcode

<p>{ __excerpt }</p>

@foreach(__products as __product)
  @if(__product.stockQuantity <= 0)
    @continue
  @endif

  @switch(__product.productType)
    @case('Digital')
      <span>Instant delivery</span>
      @break
    @default
      <span>Ships after checkout</span>
  @endswitch
@endforeach

@push('footer-scripts')
  <script src="@asset('assets/js/gallery.js')" defer></script>
@endpush

{{-- in layout --}}
@stack('footer-scripts')

@query(__products, [
  'type' => 'product',
  'category' => 'clothing',
  'limit' => 12,
  'order' => 'desc',
  'orderby' => 'price'
])
  @foreach(__products as __product)
    @include('product-card', ['product' => __product])
  @endforeach
@else
  <p>No products found.</p>
@endquery

@code
  __customer = cw_get_customer_profile().customer;
@endcode

@is_logged_in
  <div class="welcome-banner">
    <h3>Welcome back, { __customer.first_name } { __customer.last_name }!</h3>
    <a href="/account">My Account</a>
  </div>
@else
  <div class="login-prompt">
    <p>Sign in for personalised shopping.</p>
    <a href="/login" class="btn btn-primary">Sign In</a>
  </div>
@endis_logged_in

@if(cw_user_logged_in())
  <p>You are signed in.</p>
@else
  <p>Guest browsing.</p>
@endif

@query(__products, ['type' => 'products', 'limit' => 8, 'orderby' => 'created_at', 'order' => 'desc'])
@endquery

@if(cw_count(var: __products) > 0)
  @foreach(__products as __product)
    <a href="{ cw_product_url(__product) }">
      <span>{ __product.title ?? __product.name }</span>
      <strong>{ cw_money(amount: __product.price) }</strong>
    </a>
  @endforeach
@endif

@code
  __product = __product ?? cw_get_product();
  __tags = cw_get_product_tags(productId: __product.id);
  __related = cw_get_related_products(productId: __product.id, limit: 4);
@endcode

<h1>{ __product.title ?? __product.name }</h1>
<p>SKU: { __product.sku ?? '-' }</p>
<p>{ cw_money(amount: __product.price) }</p>

@code
  __cart = cw_get_cart();
  __cart_items = cw_cart_items();
  __checkout = cw_get_checkout_breakdown();
@endcode

<button type="button" class="js-cw-add-to-cart" data-cw-product-id="{ __product.id }">
  Add to cart
</button>

<form class="js-cw-storefront-checkout"
      data-cw-checkout-version="storefront-commerce"
      data-institution-id="{ cw_storefront_institution_id() }"
      data-api-base-url="{ cw_public_api_base_url() }">
  <input type="hidden" name="csrf_token" value="{ cw_csrf_token() }">
  <input type="hidden" name="cart_token" value="{ cw_cart_token() }">

  @widget('core.checkout-delivery-options', [
    'title' => 'Delivery Options',
    'loadingText' => 'Loading pickup and delivery options...',
    'emptyText' => 'No pickup or delivery option is available for this store right now.'
  ])

  @widget('core.checkout-payment-options', [
    'title' => 'Payment Method',
    'loadingText' => 'Loading payment methods...',
    'emptyText' => 'This store has not enabled a payment method yet.'
  ])

  <button type="submit">Place order</button>
</form>

@is_logged_in
  @code
    __customer = cw_customer();
    __orders = cw_get_customer_orders(page: 1, limit: 5);
  @endcode
  <a href="{ cw_route('account.default') }">My account</a>
@else
  <a href="{ cw_route('login') }">Log in</a>
@endis_logged_in

@query(__countries, ['type' => 'countries', 'limit' => 300, 'orderby' => 'name', 'order' => 'asc'])
@endquery

<select name="country_id" id="billing-country" data-region-target="billing-region" data-city-target="billing-city" required>
  <option value="">Select country</option>
  @foreach(__countries as __country)
    <option value="{ __country.id }">{ __country.name }</option>
  @endforeach
</select>

<select name="region_id" id="billing-region" data-city-target="billing-city" required>
  <option value="">Select state</option>
</select>

<select name="city_id" id="billing-city" required>
  <option value="">Select city</option>
</select>

@code
  __rates = cw_fetch_json(url: 'https://api.example.com/public/rates', timeout: 5, maxBytes: 65536);
@endcode

@if(__rates.items)
  @foreach(__rates.items as __rate)
    <p>{ __rate.currency }: { __rate.value }</p>
  @endforeach
@endif

@code
  __route = cw_current_route();
  __product_id = cw_current_product_id();
  __product_slug = cw_current_product_slug();
  __category_slug = cw_current_category_slug();
  __blog_id = cw_current_blog_id();
  __blog_slug = cw_current_blog_slug();
  __post_id = cw_current_post_id();
  __post_slug = cw_current_post_slug();
  __account_section = cw_current_account_section();
  __account_item = cw_current_account_item_lookup();
  __order_id = cw_current_order_id();
  __return_id = cw_current_return_id();
@endcode

@if(__route.kind == 'product')
  <p>Rendering product {{ __product_slug }}</p>
@elseif(__route.kind == 'account')
  <p>Rendering account {{ __account_section }} item {{ __account_item }}</p>
@endif

{{-- templates/product.detail.cw --}}
@extends('layouts/main')

@section('content')
  @code
    __product = cw_get_product(slug: cw_current_product_slug());
  @endcode

  @isset(__product)
    <article class="product-detail">
      <img src="{{ __product.image }}" alt="{{ __product.title }}">
      <h1>{{ __product.title }}</h1>
      <p>{{ cw_format_money(amount: __product.price) }}</p>
      <div>{{ __product.description }}</div>

      @query(__related, ['type' => 'products', 'category' => __product.categories.0.slug, 'limit' => 4])
        @each('product-card', __related, 'product')
      @endquery
    </article>
  @else
    @include('not-found')
  @endisset
@endsection

{{-- templates/blog.default.cw --}}
@extends('layouts/main')

@section('content')
  <h1>{{ __blog.name }}</h1>

  @query(__posts, ['type' => 'posts', 'blog' => cw_current_blog_slug(), 'limit' => 12, 'orderby' => 'published_at', 'order' => 'desc'])
    @each('post-card', __posts, 'post')
  @else
    <p>No posts have been published in this blog yet.</p>
  @endquery
@endsection

{{-- templates/post.default.cw --}}
@extends('layouts/main')

@section('content')
  @code
    __post = cw_get_post(slug: cw_current_post_slug(), blog: cw_current_blog_slug());
  @endcode

  <article class="blog-post">
    @code
      __paths = cw_base_paths();
    @endcode

    <p><a href="{{ __paths.blog }}/{{ cw_current_blog_slug() }}">{{ __blog.name }}</a></p>
    <h1>{{ __post.title }}</h1>
    <time>{{ cw_format_date(date: __post.published_at, format: 'M d, Y') }}</time>
    <div class="post-content">{{ __post.content }}</div>
  </article>
@endsection

@query(__products, [
  'type' => 'products',
  'category' => 'clothing',
  'tag' => 'sale,featured',
  'brand' => 'CoreWave',
  'min_price' => 1000,
  'max_price' => 50000,
  'in_stock' => true,
  'on_sale' => true,
  'orderby' => 'price',
  'order' => 'asc',
  'limit' => 24
])
  @each('product-card', __products, 'product')
@endquery

<a href="{ cw_category_url(__category) }" class="shop-filter-link">{ __category.name }</a>
<a href="{ cw_brand_url(__brand) }" class="shop-filter-link">{ __brand.name }</a>
<a href="{ cw_collection_url(__collection) }" class="shop-filter-link">{ __collection.title }</a>

<select name="orderby">
  <option value="created_at|desc">Newest</option>
  <option value="price|asc">Price: Low to High</option>
  <option value="price|desc">Price: High to Low</option>
  <option value="title|asc">Name: A to Z</option>
</select>

@query(__categories, ['type' => 'categories', 'active' => true, 'parent_id' => 0, 'orderby' => 'display_order', 'order' => 'asc'])
  @foreach(__categories as __category)
    <a href="/category/{{ __category.slug }}">{{ __category.name }}</a>
  @endforeach
@endquery

@query(__blogs, ['type' => 'blogs', 'q' => 'news', 'orderby' => 'published_at', 'order' => 'desc'])
  @each('blog-card', __blogs, 'blog')
@endquery

@query(__posts, ['type' => 'posts', 'blog' => 'news', 'tag' => 'announcement', 'orderby' => 'published_at', 'order' => 'desc'])
  @each('post-card', __posts, 'post')
@endquery

{{--
  Template Part: Product Card
  Usage: @include('product-card', ['product' => __product])
--}}
<div class="product-card">
  {{-- Sale badge --}}
  @if(__product.on_sale)
    <span class="product-card__badge">Sale!</span>
  @endif

  <a href="{{ __product.url }}" class="product-card__image">
    @has_image(__product)
      @image(__product, 'medium')
    @else
      <div class="product-card__placeholder">No Image</div>
    @endis
  </a>

  <div class="product-card__info">
    <h3><a href="{{ __product.url }}">@code echo __product.title; @endcode</a></h3>

    {{-- Star rating --}}
    @if(__product.rating > 0)
    <div class="product-card__rating">
      @for(__i=0; __i<5; __i++)
        @if(__i < cw_count(var: __product.rating))
          <span class="star star--filled">★</span>
        @else
          <span class="star star--empty">☆</span>
        @endif
      @endfor
      <span class="rating-count">(@code echo __product.review_count; @endcode)</span>
    </div>
    @endif

    <div class="product-card__price">
      @if(__product.on_sale && __product.compare_price)
        <span class="price--compare">@code echo cw_format_money(amount: __product.compare_price); @endcode</span>
      @endif
      <span class="price--current">@code echo cw_format_money(amount: __product.price); @endcode</span>
    </div>

    <button
      type="button"
      class="js-cw-add-to-cart"
      data-cw-product-id="{ __product.id }"
      data-cw-product-name="{ __product.title }"
      data-cw-product-price="{ __product.price }"
      data-cw-product-image="{ __product.image }"
      data-cw-product-url="{ cw_product_url(__product) }"
    >Add to cart</button>

    <button
      type="button"
      class="js-cw-add-to-wishlist"
      data-cw-product-id="{ __product.id }"
      data-cw-product-name="{ __product.title }"
      data-cw-product-price="{ __product.price }"
      data-cw-product-image="{ __product.image }"
      data-cw-product-url="{ cw_product_url(__product) }"
    >Add to wishlist</button>
  </div>
</div>

{{--
  Template Name: Cart Page
  Template Key: cart.default
--}}

@include('header')

<div class="cart-page">
  <div class="container">
    <h1>@code echo __('Shopping Cart'); @endcode</h1>

    {{-- Cart summary from session --}}
    <div class="cart-summary">
      <p>
        @code echo __('Items in cart:'); @endcode
        <strong>@code echo cw_get_cart_count(); @endcode</strong>
      </p>

      {{-- Applied discounts --}}
      @code
        __applied_discounts = cw_get_cart_applied_discounts();
      @endcode
      @if(cw_count(var: 'applied_discounts') > 0)
        <div class="cart-discounts">
          <h3>@code echo __('Applied Discounts'); @endcode</h3>
          @foreach(__applied_discounts as __discount)
            <div class="cart-discount">
              <span>@code echo __discount.code; @endcode</span>
              <span>-@code echo __discount.display_name; @endcode</span>
            </div>
          @endforeach
        </div>
      @endif
    </div>

    {{-- Featured products --}}
    @query(__featured_products, ['type' => 'products', 'limit' => 4, 'orderby' => 'created_at', 'order' => 'desc'])

    @if(cw_count(var: 'featured_products') > 0)
      <h2>@code echo __('Featured Products'); @endcode</h2>
      <div class="product-grid">
        @foreach(__featured_products as __product)
          @include('product-card', ['product' => __product])
        @endforeach
      </div>
    @else
      <div class="cart-empty">
        <p>@code echo __('Your cart is empty.'); @endcode</p>
        <a href="@link('/shop')" class="btn btn--primary">@code echo __('Continue Shopping'); @endcode</a>
      </div>
    @endif
  </div>
</div>

@include('footer')

{{--
  Template Name: Product Detail
  Template Key: product.detail
--}}

@code
  __related_products = cw_get_related_products(productId: __product.id, limit: 4);
  __reviews = cw_product_reviews(productId: __product.id, page: 1, limit: 5);
@endcode

@include('header')

<div class="product-detail">
  <div class="container">
    <div class="product-detail__gallery">
      @has_image(__product)
        <div class="product-gallery__main">
          @image(__product, 'large')
        </div>
      @else
        <div class="product-gallery__placeholder">No Image</div>
      @endis

      {{-- Gallery images --}}
      @if(cw_count(var: __product.images) > 1)
        <div class="product-gallery__thumbs">
          @foreach(__product.images as __image)
            <img src="@code echo __image.thumbnail; @endcode"
                 alt="@code echo __image.alt; @endcode"
                 class="@if(__image.is_cover) active @endif">
          @endforeach
        </div>
      @endif
    </div>

    <div class="product-detail__info">
      <h1>@code echo __product.title; @endcode</h1>

      {{-- Star rating --}}
      @if(__product.rating > 0)
      <div class="product-detail__rating">
        @for(__i=0; __i<5; __i++)
          @if(__i < cw_count(var: __product.rating))
            <span class="star star--filled">★</span>
          @else
            <span class="star star--empty">☆</span>
          @endif
        @endfor
        <a href="#reviews">@code echo __product.review_count; @endcode @code echo __('reviews'); @endcode</a>
      </div>
      @endif

      <div class="product-detail__price">
        @if(__product.on_sale && __product.compare_price)
          <span class="price--compare">@code echo cw_format_money(amount: __product.compare_price); @endcode</span>
          <span class="price--current price--sale">@code echo cw_format_money(amount: __product.price); @endcode</span>
          <span class="price--badge">Sale!</span>
        @else
          <span class="price--current">@code echo cw_format_money(amount: __product.price); @endcode</span>
        @endif
      </div>

      <div class="product-detail__description">
        @code echo __product.description; @endcode
      </div>

      {{-- Product attributes / options --}}
      @if(cw_count(var: __product.attributes) > 0)
        @foreach(__product.attributes as __attribute)
          @if(cw_contains(value: __attribute.name, search: 'color') || cw_contains(value: __attribute.name, search: 'colour'))
            <div class="product-option product-option--color">
              <span>@code echo __attribute.name; @endcode:</span>
              <ul>
                @foreach(__attribute.options as __option)
                  <li title="@code echo __option.value; @endcode" style="background-color: @code echo __option.value; @endcode"></li>
                @endforeach
              </ul>
            </div>
          @else
            <div class="product-option">
              <span>@code echo __attribute.name; @endcode:</span>
              <ul>
                @foreach(__attribute.options as __option)
                  <li>@code echo __option.value; @endcode</li>
                @endforeach
              </ul>
            </div>
          @endif
        @endforeach
      @endif

      <div class="product-detail__actions">
        @hook('product.add_to_cart', __product)
      </div>
    </div>
  </div>
</div>

{{-- Customer Reviews --}}
<section id="reviews" class="product-reviews">
  <div class="container">
    <h2>@code echo __('Customer Reviews'); @endcode
      (@code echo __product.review_count; @endcode)
    </h2>

    @if(cw_count(var: 'reviews') > 0)
      @foreach(__reviews as __review)
        <div class="review">
          <div class="review__rating">
            @for(__i=0; __i<__review.rating; __i++)★ @endfor
            @for(__i=__review.rating; __i<5; __i++)☆ @endfor
          </div>
          <p class="review__comment">@code echo __review.comment; @endcode</p>
          <span class="review__author">— @code echo __review.author; @endcode</span>
          <span class="review__date">@code echo __review.date; @endcode</span>
        </div>
      @endforeach
    @else
      <p>@code echo __('No reviews yet. Be the first to review!'); @endcode</p>
    @endif

    {{-- Submit review form --}}
    <div class="review-form">
      <h3>@code echo __('Write a Review'); @endcode</h3>
      <form method="post" action="@link('/reviews/submit')">
        <input type="hidden" name="product_id" value="@code echo __product.id; @endcode">
        <div class="form-group">
          <label>@code echo __('Rating'); @endcode</label>
          <select name="rating" required>
            <option value="5">★★★★★</option>
            <option value="4">★★★★☆</option>
            <option value="3">★★★☆☆</option>
            <option value="2">★★☆☆☆</option>
            <option value="1">★☆☆☆☆</option>
          </select>
        </div>
        <div class="form-group">
          <label>@code echo __('Review'); @endcode</label>
          <textarea name="comment" rows="4" required></textarea>
        </div>
        <button type="submit" class="btn btn--primary">
          @code echo __('Submit Review'); @endcode
        </button>
      </form>
    </div>
  </div>
</section>

{{-- Related Products --}}
@if(cw_count(var: 'related_products') > 0)
<section class="related-products">
  <div class="container">
    <h2>@code echo __('Related Products'); @endcode</h2>
    <div class="product-grid">
      @each('product-card', __related_products, 'product')
    </div>
  </div>
</section>
@endif

@include('footer')

@extends('layouts/default')
@section('content')
  

    @code
      __cart = cw_get_cart();
      __breakdown = cw_get_checkout_breakdown(subtotal: __cart.subtotal);
      __note = cw_get_order_note();
      __customer = cw_customer();
    @endcode

    
Checkout
    @if(__cart && __cart.item_count > 0)
      

        @query(type: 'products', ids: cw_collect(__cart, 'product_id'), limit: 50)
          

            
            
{ item.title }
            
Qty: { item.quantity } x { cw_money(amount: item.price) }
            @if(item.variant_key)
              
Variant: { item.variant_key }
            @endif
          
        @endquery
      

      

        
Subtotal: { cw_money(amount: __cart.subtotal) }
        
Shipping: { cw_money(amount: __cart.shipping_total) }
        
Tax: { cw_money(amount: __breakdown.tax_total) }
        
Total: { cw_money(amount: __cart.grand_total) }

        @if(__cart.coupon_code)
          
Coupon applied: { __cart.coupon_code }
        @endif

        @if(__note && __note.order_note)
          
Order Note: { __note.order_note }
        @endif
      

      

        
        

        
        
        
        
        
        
        
        

        @widget('core.checkout-delivery-options', [
          'title' => 'Delivery Options',
          'loadingText' => 'Loading pickup and delivery options...',
          'emptyText' => 'No pickup or delivery option is available for this store right now.'
        ])

        { __note.order_note }
        Place Order
      
    @else
      
Your cart is empty.
    @endif
  
@endsection

@foreach(__product.attributes as __attribute)
  

    { __attribute.name }
    
      @foreach(__attribute.options as __option)
        
          { __option.value }
          @if(__option.unit_price && __option.unit_price != __product.price)
            — { cw_money(amount: __option.unit_price) }
          @endif
          @if((__option.stock_quantity ?? __product.stock_quantity) <= 0)
            — Out of Stock
          @endif
        
      @endforeach
    
  
@endforeach


  Add to Cart

@foreach(__product.attributes as __attribute)
  @code
    __is_color = cw_contains(value: __attribute.name, search: 'color');
    __is_size  = cw_contains(value: __attribute.name, search: 'size');
  @endcode

  @if(__is_color == 'true')
    

      @foreach(__attribute.options as __option)
        
          
        
      @endforeach
    
  @else
    <-- render standard dropdown -->
  @endif
@endforeach

{{-- Using the @asset directive --}}
<img src="@asset('assets/images/logo.png')" alt="Logo">

{{-- Using @css to enqueue stylesheets --}}
@css('assets/css/hero.css')
@css('assets/css/cart.css')

{{-- Using @js to enqueue scripts --}}
@js('assets/js/carousel.js')
@js('assets/js/main.js')

{{-- Using product image property --}}
<img src="@code echo __product.image; @endcode" alt="@code echo __product.title; @endcode">

{{-- layouts/main.cw --}}
@cw_header()

<main id="content">
  @yield('content')
</main>

@cw_footer()

@cw_header('header-dark')
@cw_footer(key: 'footer-minimal')

{{--
  Template Part: Header
  Usage: rendered by @cw_header() when selected by headerPresets
--}}
@code
  __store = cw_get_store();
@endcode
<header class="site-header">
  <div class="container">
    <div class="header__logo">
      <a href="@link('/')">
        @if(__store.logo_light)
          <img src="{ __store.logo_light }" alt="{ __store.name }">
        @elseif(__store.logo)
          <img src="{ __store.logo }" alt="{ __store.name }">
        @else
          <img src="@asset('assets/images/logo.png')" alt="{ __store.name }">
        @endif
      </a>
    </div>
    <nav class="header__nav">
      <ul>
        <li><a href="@link('/shop')">@code echo __('Shop'); @endcode</a></li>
        <li><a href="@link('/about')">@code echo __('About'); @endcode</a></li>
        <li><a href="@link('/blog')">@code echo __('Blog'); @endcode</a></li>
        <li><a href="@link('/contact')">@code echo __('Contact'); @endcode</a></li>
      </ul>
    </nav>
    <div class="header__actions">
      <a href="@link('/account')" class="header__icon">@code echo __('My Account'); @endcode</a>
      <a href="@link('/login')" class="header__icon">@code echo __('Login'); @endcode</a>
    </div>
  </div>
</header>

{{--
  Template Part: Footer
  Usage: rendered by @cw_footer() when selected by footerPresets
--}}
@code __store = cw_get_store(); @endcode
<footer class="site-footer">
  <div class="container">
    <div class="footer__grid">
      <div class="footer__col">
        <h4>@code echo __('Quick Links'); @endcode</h4>
        <ul>
          <li><a href="@link('/about')">@code echo __('About Us'); @endcode</a></li>
          <li><a href="@link('/contact')">@code echo __('Contact'); @endcode</a></li>
          <li><a href="@link('/privacy')">@code echo __('Privacy Policy'); @endcode</a></li>
        </ul>
      </div>
      <div class="footer__col">
        <h4>@code echo __('Contact'); @endcode</h4>
        <p>@code echo __store.email; @endcode</p>
        <p>@code echo __store.phone; @endcode</p>
      </div>
    </div>
    <div class="footer__bottom">
      <p>&copy; @code echo date('Y'); @endcode @code echo __store.name; @endcode. @code echo __('All rights reserved.'); @endcode</p>
    </div>
  </div>
  @hook('footer_injection')
</footer>

// manifest.json — headerPresets and footerPresets
{
  "name":        "My Storefront Theme",
  "version":     "2.0.0",
  "formatVersion": 3,

  "headerPresets": [
    {
      "key":      "header-light",
      "label":    "Light Header",
      "partial":  "partials/header-light.cw"
    },
    {
      "key":      "header-dark",
      "label":    "Dark Header",
      "partial":  "partials/header-dark.cw"
    }
  ],

  "footerPresets": [
    {
      "key":      "footer-dark",
      "label":    "Dark Footer",
      "partial":  "partials/footer-dark.cw",
      "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/footer-dark-preview.png"
    },
    {
      "key":      "footer-minimal",
      "label":    "Minimal Footer",
      "partial":  "partials/footer-minimal.cw",
      "previewImageUrl": "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/footer-minimal-preview.png"
    }
  ],

  "defaultHeaderPresetKey": "header-light",
  "defaultFooterPresetKey": "footer-dark"
}

{
  "templates": {
    "maintenance.default": {
      "label": "Coming Soon",
      "icon": "clock",
      "format": "cw",
      "showHeader": false,
      "showFooter": false
    }
  },
  "starterContent": {
    "maintenance.default": {
      "defaultMaintenance": true,
      "showHeader": false,
      "showFooter": false
    },
    "pages": [
      {
        "title": "Coming Soon",
        "handle": "coming-soon",
        "templateKey": "maintenance.default",
        "showHeader": false,
        "showFooter": false,
        "pageHeaderKey": "__none",
        "pageFooterKey": "__none",
        "publish": true
      }
    ]
  }
}

<!doctype html>
<html>
<head>
  <style>
    @cw_custom_css
  </style>
</head>
<body>
  @cw_header_html
  @cw_header()

  @yield('content')

  @cw_footer()
  @cw_footer_html
</body>
</html>

{
  "corewavePseudoCode": {
    "engine": "corewave-pseudo/1.0",
    "blocks": [
      {
        "id":     "welcome-email",
        "hook":    "corewave.customer.after_signup",
        "action": "send_email",
        "args": {
          "template": "welcome",
          "subject": "Welcome to our store!"
        }
      }
    ]
  }
}

{
  "name":        "WhatsApp Chat",
  "pluginCode": "whatsapp-chat",
  "version":     "2.0.0",

  "corewavePseudoCode": {
    "engine": "corewave-pseudo/1.0",
    "blocks": [
      {
        "id":     "whatsapp-button",
        "hook":    "corewave.theme.page.render",
        "action": "inject_html",
        "args": {
          "position": "body_end",
          "html":    "<div class=\"wa-chat\" data-phone=\"{{phone}}\">Chat with us</div>"
        }
      }
    ]
  }
}

my-theme-v3.0.0.zip
├── manifest.json
├── templates/
├── assets/
└── bundled-plugins/
    ├── whatsapp-chat-v2.0.0.zip
    └── reviews-summary-v2.0.0.zip

{{-- Action hook — plugins can execute code here --}}
@hook('product.card.after', __product)

{{-- Filter hook — plugins can modify a value --}}
@code
  __html = '<span class="price">' . cw_format_price(__product.price) . '</span>';
  __html = @filter('product.price_html', __html);
  echo __html;
@endcode

{{-- Widget area — plugins can render UI components --}}
@widget('sidebar')

{
  "id": "sf-custom-html",
  "html": "<section class=\"promo-strip\"><h2>Free delivery today</h2><a href=\"/shop\">Shop now</a></section>",
  "css": ".promo-strip { padding: 32px; background: #111; color: #fff; text-align: center; } .promo-strip a { color: #f8c15c; }",
  "htmlClass": "my-custom-widget",
  "allowThemeScripts": true
}

@widget('core.html', [
  'html' => '<div class="designer-note">Editable fallback HTML</div>',
  'css' => '.designer-note { padding: 20px; border: 1px dashed currentColor; }',
  'htmlClass' => 'theme-custom-html'
])

@widget('core.heading', [
  'tag' => 'h1',
  'title' => cw_get_page_title(),
  'className' => 'theme-page-title'
])

@widget('e-image', [
  'src' => __product.imageUrl,
  'alt' => __product.name,
  'width' => '100%',
  'objectFit' => 'cover'
])

@widget('core.button', [
  'label' => 'View product',
  'href' => cw_product_url(__product),
  'className' => 'theme-btn theme-btn-primary'
])

{
  "children": [
    {
      "key": "heading",
      "instanceId": "heading-abc123",
      "settings": {
        "text": "Welcome",
        "level": "h2"
      }
    },
    {
      "key": "button",
      "instanceId": "button-def456",
      "settings": {
        "label": "Shop Now",
        "href": "/products"
      }
    }
  ]
}

@widget('core.container', [
  'direction' => 'column',
  'gap' => '16px',
  'children' => [
    ['key' => 'heading', 'instanceId' => 'child-heading-1', 'settings' => [
      'title' => 'Welcome to Our Store',
      'tag' => 'h2',
    ]],
    ['key' => 'text-editor', 'instanceId' => 'child-text-1', 'settings' => [
      'html' => '<p>Browse our latest collection.</p>',
    ]],
    ['key' => 'button', 'instanceId' => 'child-btn-1', 'settings' => [
      'label' => 'Shop Now',
      'href' => '/products',
    ]],
  ],
])

{{-- Container with dynamic children --}}
@code
  __banner_heading = 'Summer Sale -- ' .. cw_get_store_name();
  __banner_subtitle = 'Up to ' .. cw_get_discount('summer2024')?.discountPercentage .. '% off';
@endcode
@widget('core.container', [
  'class' => 'promo-banner',
  'children' => [
    ['key' => 'heading', 'instanceId' => 'promo-heading', 'settings' => [
      'title' => __banner_heading,
      'tag' => 'h1',
    ]],
    ['key' => 'text-editor', 'instanceId' => 'promo-text', 'settings' => [
      'html' => '<p>' .. __banner_subtitle .. '</p>',
    ]],
    ['key' => 'button', 'instanceId' => 'promo-btn', 'settings' => [
      'label' => 'Shop Sale',
      'href' => cw_product_url(__product),
      'className' => 'btn-accent',
    ]],
  ],
])

@widget('core.container', [
  'direction' => 'row',
  'gap' => '24px',
  'children' => [
    ['key' => 'container', 'instanceId' => 'left-col', 'settings' => [
      'direction' => 'column',
      'gap' => '12px',
      'children' => [
        ['key' => 'heading', 'instanceId' => 'left-heading', 'settings' => [
          'title' => 'Left Column',
        ]],
        ['key' => 'text-editor', 'instanceId' => 'left-text', 'settings' => [
          'html' => '<p>Content for the left side.</p>',
        ]],
      ],
    ]],
    ['key' => 'container', 'instanceId' => 'right-col', 'settings' => [
      'direction' => 'column',
      'gap' => '12px',
      'children' => [
        ['key' => 'image', 'instanceId' => 'right-image', 'settings' => [
          'src' => __product.imageUrl,
          'alt' => __product.name,
          'objectFit' => 'cover',
        ]],
      ],
    ]],
  ],
])

{{-- A designer can still provide sane defaults in the template. --}}
@widget('anton.hero-slideshow', [
  'instanceId' => 'home-hero',
  'items' => [
    ['image' => 'assets/images/Home_03/Banner1_Home3.png', 'title' => 'New arrivals']
  ]
])

{{--
Visual editor style overrides are saved separately, for example:
{
  "widgetInstances": {
    "home-hero": {
      "key": "anton.hero-slideshow",
      "settings": {
        "overrideWrapperElement": "section",
        "overrideWrapperClass": "merchant-home-hero",
        "overrideBackgroundImage": "https://files.corewave360.com/...",
        "overridePadding": "40px 0",
        "overrideMargin": "0 auto"
      }
    }
  }
}
--}}

{{-- Render a styled section element with nested content --}}
@widget('core.custom-element', [
  'tag' => 'section',
  'class' => 'hero-section',
  'elementId' => 'home-hero',
  'backgroundImage' => '@asset('assets/images/hero-bg.jpg')',
  'width' => '100%',
  'minHeight' => '450px',
  'color' => '#fff',
  'textAlign' => 'center',
  'display' => 'flex',
  'alignItems' => 'center',
  'justifyContent' => 'center',
  'padding' => '40px 20px'
])

<section id="home-hero" class="hero-section"
         style="width:100%;min-height:450px;color:#fff;background-image:url(/assets/images/hero-bg.jpg);text-align:center;display:flex;align-items:center;justify-content:center;padding:40px 20px">
  {{-- Nested child widgets render here if any --}}
</section>

{{-- Wrap a social icons widget in a <nav> with a CSS class --}}
@widget('core.social-icons', [
  'wrapperElement' => 'nav',
  'wrapperClass' => 'iconft'
])

{{-- Wrap a button in a <p> --}}
@widget('core.button', [
  'label' => 'Learn More',
  'href' => '/about',
  'wrapperElement' => 'p',
  'wrapperClass' => 'text-center'
])

{{-- wrapperClass without wrapperElement applies the class to the widget root --}}
@widget('core.heading', [
  'tag' => 'h2',
  'title' => 'Featured Products',
  'wrapperClass' => 'section-title'
])

{
  "widgets": {
    "theme.navigation": {
      "label": "Theme Navigation",
      "template": "widgets/navigation.cw",
      "fields": {
        "menu": { "type": "select", "label": "Menu", "source": "navigations", "default": "" },
        "logo": { "type": "image", "label": "Logo", "default": "" },
        "logoWidth": { "type": "number", "label": "Logo width", "default": 0 }
      }
    }
  }
}

{{-- widgets/navigation.cw --}}
@code
  __menu_id = widget.settings.menu;
  __items = cw_get_navigation(__menu_id);
@endcode

@if(widget.settings.logo)
  <img src="{ widget.settings.logo }" alt="" />
@endif

{
  "widgets": {
    "anton-navigation-one": {
      "label": "Navigation Menu One",
      "description": "Select navigation menu to display",
      "template": "widgets/anton-navigation-one.cw",
      "fields": {
        "menuId": {
          "label": "Menu",
          "type": "select",
          "default": "",
          "source": "cw_get_navigations",
          "valueField": "id",
          "labelField": "name"
        }
      }
    }
  }
}

{{-- widgets/anton-navigation-one.cw --}}
@code
  __menu = cw_get_navigation(id: widget.settings.menuId);
@endcode

@if(__menu)
  <ul class="main-menu">
    @foreach(__menu.items as item)
      <li class="level11">
        <a href="{ item.url ?? '#' }">{ item.label }</a>

        @if(item.children)
          <div class="hover-menu-home">
            @foreach(item.children as child)
              <div class="item-menu-home">
                <a href="{ child.url ?? '#' }">{ child.label }</a>
              </div>
            @endforeach

            @if(item.imageUrl)
              <div class="item-menu-home">
                <img src="{ item.imageUrl }" alt="{ item.label }">
              </div>
            @endif
          </div>
        @endif
      </li>
    @endforeach
  </ul>
@endif

"widgets": {
  "featured-products": {
    "label":       "Featured Products",
    "description": "Displays a grid of featured products",
    "template":  "widgets/featured-products.cw",
    "fields": {
      "title":    { "label": "Section Title", "type": "text", "default": "Featured Products" },
      "limit":   { "label": "Product Count", "type": "number", "default": 4 },
      "category": { "label": "Category Filter", "type": "select", "default": "", "source": "categories" },
      "menus":    { "label": "Navigation Menus", "type": "multi-select", "default": [], "source": "cw_get_navigations" }
    }
  }
}

{-- widgets/featured-products.cw --}
{-- Load category options dynamically using cw_get_select_options --}
@code
  __category_opts = cw_get_select_options(['source' => 'categories', 'limit' => 100]);
  __selected_cat  = __widget.settings.category;
@endcode

{-- If admin selected a specific category, only show those products --}
@if(__selected_cat)
  @query(__products, [
    'category' => __selected_cat,
    'limit'    => __widget.settings.limit ?? 4
  ])
@else
  @query(__products, [
    'featured' => 1,
    'limit'    => __widget.settings.limit ?? 4
  ])
@endif

<section class="featured-products-widget">
  @if(__widget.settings.title)
    <h2>{ __widget.settings.title }</h2>
  @endif

  {-- Render a category filter dropdown using @foreach over dynamic options --}
  <form class="category-filter">
    <select name="category" onchange="this.form.submit()">
      <option value="">All Categories</option>
      @foreach(__category_opts as __opt)
        <option value="{ __opt.value }" @if(__opt.value == __selected_cat)selected</option>
      @endforeach
    </select>
  </form>

  <div class="product-grid">
    @foreach(__products as __product)
      <div class="product-card">
        <a href="{ __product.url }">
          <img src="{ __product.thumbnail }" alt="{ __product.title }" loading="lazy" />
          <h3>{ __product.title }</h3>
        </a>
        <span class="price">{ cw_format_price(__product.price) }</span>
      </div>
    @endforeach
  </div>
</section>

my-theme-v3.0.0.zip
├── manifest.json
├── templates/
├── widgets/                    // Custom widget .cw templates
│   ├── featured-products.cw
│   ├── newsletter-signup.cw
│   └── product-carousel.cw
├── assets/
└── bundled-plugins/

{-- Render widget with default settings --}
@widget('featured-products')

{{-- Render widget with page/template fallback defaults --}}
@widget('featured-products', [
  'title'    => 'Best Sellers',
  'limit'    => 8,
  'category' => 'best-sellers'
])

{-- Widget area — admins can place any widget here --}
<aside class="sidebar">
  @widget('blog-sidebar')
</aside>

"widgets": {
  "promo-banner": {
    "label": "Promo Banner",
    "description": "A promotional banner with heading, text, and button",
    "template": "widgets/promo-banner.cw",
    "fields": {
      "title": { "label": "Title", "type": "text", "default": "Special Offer" },
      "body":  { "label": "Body", "type": "textarea", "default": "" },
      "bgColor": { "label": "Background Color", "type": "color", "default": "#1a1a2e" }
    }
  }
}

{{-- widgets/promo-banner.cw --}}
{{-- This widget template embeds platform widgets using @widget() --}}

@code
  __title = __widget.settings.title ?? 'Special Offer';
  __body  = __widget.settings.body ?? '';
  __bg    = __widget.settings.bgColor ?? '#1a1a2e';
@endcode


  {{-- Embed a heading widget --}}
  @widget('core.heading', [
    'title' => __title,
    'tag'   => 'h2'
  ])

  @if(__body)
    
{ __body }
  @endif

  {{-- Embed a button widget --}}
  @widget('core.button', [
    'label' => 'Shop Now',
    'href'  => '/collections/all',
    'variant' => 'primary'
  ])

  {{-- Embed a theme widget that itself has a .cw template with @widget() --}}
  @widget('trust-badges', [
    'layout' => 'row'
  ])

┌─────────────────────────────────────────────────┐
│  Widget Editor                                  │
│  Editing: promo-banner                          │
│                                                 │
│  Widget: [promo-banner        ▼]                │
│                                                 │
│  ┌─ Widget Template ──────────────────────────┐ │
│  │  widgets/promo-banner.cw          [3 @widget()] │
│  │  This widget's .cw template contains       │ │
│  │  @widget() directives that are rendered     │ │
│  │  recursively at runtime.                    │ │
│  │                                             │ │
│  │  • core.heading                             │ │
│  │  • core.button                              │ │
│  │  • trust-badges                             │ │
│  │                                             │ │
│  │  ┌────────────────────────────────────────┐ │ │
│  │  │ 
    │ │ │
│  │  │   @widget('core.heading', [           │ │ │
│  │  │     'title' => __title,               │ │ │
│  │  │     'tag'   => 'h2'                   │ │ │
│  │  │   ])                                   │ │ │
│  │  │   ...                                  │ │ │
│  │  └────────────────────────────────────────┘ │ │
│  │  [Save Widget Template]                     │ │
│  └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

"anton.social-icons": {
  "label": "Anton Social Icons",
  "template": "widgets/anton-social-icons.cw",
  "fields": {
    "items": {
      "label": "Social Icons",
      "type": "repeater",
      "default": [],
      "fields": {
        "label": { "label": "Label", "type": "text", "default": "" },
        "href":  { "label": "Link URL", "type": "text", "default": "" },
        "icon":  { "label": "Font Awesome Class", "type": "text", "default": "" },
        "class": { "label": "Additional CSS Class", "type": "text", "default": "" }
      }
    }
  }
}

@code
  __items = __widget.settings.items ?? [];
@endcode

@foreach(__items as __item)
  @if(__item.href && __item.icon)
    <a href="{ __item.href }" class="{ __item.class }" aria-label="{ __item.label }">
      <i class="{ __item.icon }" aria-hidden="true"></i>
    </a>
  @endif
@endforeach

{
  "fields": {
    "category": {
      "label":   "Category Filter",
      "type":    "select",
      "default": "",
      "options": [
        { "value": "clothing",   "label": "Clothing" },
        { "value": "electronics", "label": "Electronics" },
        { "value": "accessories", "label": "Accessories" }
      ]
    },
    "colors": {
      "label":   "Available Colors",
      "type":    "multi-select",
      "default": ["red"],
      "options": [
        { "value": "red",   "label": "Red" },
        { "value": "blue",  "label": "Blue" },
        { "value": "green", "label": "Green" }
      ]
    }
  }
}

@if(widget.settings.category == 'clothing')
  <div class="filter filter--clothing">Showing clothing items</div>
@elseif(widget.settings.category == 'electronics')
  <div class="filter filter--electronics">Showing electronics</div>
@else
  <div class="filter filter--all">Showing all categories</div>
@endif

{-- Check if a specific value is selected --}
@if(in_array('red', widget.settings.colors))
  <div class="color-swatch color-swatch--red">Red is active</div>
@endif

{-- Iterate through all selected values --}
<ul class="selected-filters">
  @foreach(widget.settings.colors as __color)
    <li>{ __color }</li>
  @endforeach
</ul>

{
  "fields": {
    "category": {
      "label":   "Category Filter",
      "type":    "select",
      "default": "",
      "source": "categories"
    },
    "products": {
      "label":   "Featured Products",
      "type":    "multi-select",
      "default": [],
      "source": "products"
    },
    "menuIds": {
      "label":   "Menus to Render",
      "type":    "multi-select",
      "default": [],
      "source": "cw_get_navigations",
      "valueField": "id",
      "labelField": "name"
    }
  }
}

{-- Fetch select options from a data source --}
@code
  __category_opts = cw_get_select_options(['source' => 'categories', 'limit' => 100]);
  __product_opts  = cw_get_select_options(['source' => 'products', 'limit' => 50, 'order' => 'asc']);
  __blog_opts     = cw_get_select_options(['source' => 'blogs']);
  __country_opts  = cw_get_select_options(['source' => 'countries', 'orderBy' => 'name']);
  __tag_opts      = cw_get_select_options(['source' => 'tags', 'scope' => 'products']);
  __discount_opts = cw_get_select_options(['source' => 'discounts']);
  __menu_opts     = cw_get_select_options(['source' => 'navigations', 'valueField' => 'id', 'labelField' => 'name']);
@endcode

{-- Render a single-select dropdown using dynamic options --}
<select name="category">
  @foreach(__category_opts as __opt)
    <option value="{ __opt.value }">{ __opt.label }</option>
  @endforeach
</select>

{-- Render a multi-select checkbox group using dynamic options --}
<div class="checkbox-group">
  @foreach(__category_opts as __opt)
    <label>
      <input type="checkbox"
             value="{ __opt.value }"
             {{ in_array(__opt.value, widget.settings.categories) ? 'checked' : '' }}>
      { __opt.label }
    </label>
  @endforeach
</div>

{
  "schemaVersion": 3,
  "themeCode":      "my-storefront-theme",
  "version":        "1.0.0",
  "generatedAt":    "2025-01-15T10:30:00.000Z",

  "manifest":      { /* sanitized manifest.json */ },

  "themeCssUrl": "https://storage.googleapis.com/.../style.css",
  "cssUrls": [ /* ordered CSS URLs */ ],
  "scriptUrls": [ /* ordered JS URLs */ ],

  "files": {
    "assets/css/style.css": "https://storage.googleapis.com/.../style.css",
    "assets/images/logo.png": "https://storage.googleapis.com/.../logo.png"
  },

  "templates": {
    "home.default": { /* inlined .cw content */ },
    "page.default": "https://storage.googleapis.com/.../page.default.cw"
  },
  "templateFormats": {
    "home.default": "cw",
    "cart.default": "cw"
  }
}

curl -i 'https://api.books.corewave360.com/v1/public/storefront/ssr?host=corewave360.com&path=/blogs/news/spring-launch'

location / {
  proxy_pass https://api.books.corewave360.com/v1/public/storefront/ssr?host=$host&path=$request_uri;
  proxy_set_header Host api.books.corewave360.com;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

{
  "appearanceDefaults": {
    "theme": {
      "primary": "#ea5e03",
      "background": "#f4f4f4",
      "surface": "#ffffff",
      "text": "#111111",
      "muted": "#888888",
      "border": "#e5e5e5"
    },
    "typography": {
      "body": "Poppins",
      "header": "Poppins",
      "navigation": "Poppins",
      "title": "Poppins",
      "h1": "Poppins",
      "h2": "Poppins",
      "h3": "Poppins",
      "h4": "Poppins",
      "h5": "Poppins",
      "h6": "Poppins",
      "button": "Poppins",
      "price": "Poppins"
    },
    "layout": {
      "header": {
        "sticky": true
      }
    }
  },
  "cmsSettingsDefaults": {
    "permalink": {
      "productSearchBase": "product-search",
      "blogSearchBase": "blog-search",
      "searchBase": "search"
    }
  }
}

"starterContent": {
  "anton.home.one": { "defaultHome": true },
  "anton.product.details.one": { "defaultProductDetails": true },
  "anton.blogs.one": { "defaultBlogPage": true },
  "anton.blog": { "defaultBlogPost": true },
  "anton.not-found": { "defaultNotFound": true },
  "maintenance.anton": { "defaultMaintenance": true }
}

"starterContent": {
  "home.default": { "defaultHome": true },

  "pages": [
    {
      "title":             "About Us",
      "handle":            "about-us",
      "templateKey":       "page.default",
      "pageHeaderKey":     "header-dark",
      "pageFooterKey":     "footer-minimal",
      "previewImageUrl":   "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/about-page-preview.png",
      "sortOrder":         2,
      "publish":           true
    },
    {
      "title":             "Contact",
      "handle":            "contact",
      "templateKey":       "page.default",
      "previewImageUrl":   "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/contact-page-preview.png",
      "sortOrder":         3,
      "publish":           true
    },
    {
      "title":             "Coming Soon",
      "handle":            "coming-soon",
      "templateKey":       "maintenance.default",
      "showHeader":        false,
      "showFooter":        false,
      "pageHeaderKey":     "__none",
      "pageFooterKey":     "__none",
      "previewImageUrl":   "https://files.corewave360.com/platform/storefront-marketplace/media/05-2026/coming-soon-preview.png",
      "sortOrder":         4,
      "publish":           true
    }
  ]
}

"starterContent": {
  "home.default": { "defaultHome": true },
  "product.detail": { "defaultProductDetails": true },
  "menus": {
    "main": [
      { "label": "Home",   "url": "/",        "sortOrder": 1 },
      { "label": "Shop",   "url": "/shop",    "sortOrder": 2 },
      { "label": "About",  "pageHandle": "about-us", "sortOrder": 3 },
      { "label": "Blog",   "url": "/blogs",   "sortOrder": 4 },
      { "label": "Categories", "sortOrder": 5,
        "children": [
          { "label": "Clothing",  "pageHandle": "category-clothing",  "sortOrder": 1 },
          { "label": "Electronics", "pageHandle": "category-electronics", "sortOrder": 2 }
        ]
      }
    ],
    "footer": [
      { "label": "Contact", "pageHandle": "contact", "sortOrder": 1 }
    ],
    "secondary-nav": [
      { "label": "Support", "url": "/support", "sortOrder": 1 },
      { "label": "FAQ", "pageHandle": "faq", "sortOrder": 2 }
    ]
  }
}

@code __stock = cw_get_stock(productId: __product.id); @endcode
@if(__stock.is_low_stock)
  Only { __stock.total_stock } left!
@endif

@foreach(__product.badges as __badge)
  { __badge.label }
@endforeach