Production-Ready Section Templates

Detailed technical documentation and implementation guide for Production-Ready Section Templates.

Overview #

1. Hero Banner Section #

A customizable hero section with title, subtitle, CTA button, and hero image block:

```jw
{% set bg_color = section.settings.bg_color | default("#0f172a") %}
{% set padding = section.settings.padding | default(80) %}

<section id="jw-section-{{ section.id }}" style="background: {{ bg_color }}; padding: {{ padding }}px 0;">
    <div class="jw-container" data-id="{{ section.id }}">
        {% for block in section.blocks %}
            {% switch block.type %}
                {% case "hero_text" %}
                    <div class="hero-text-content" {{ jw_attributes(block) }}>
                        <h1 class="fontStyle1">{{ block.settings.title | default("Transform Your Store") }}</h1>
                        <p class="fontStyle7">{{ block.settings.subtitle }}</p>
                        {% if block.settings.button.url %}
                            <a href="{{ block.settings.button.url }}" class="btn-primary" target="{{ block.settings.button.target }}">
                                {{ block.settings.button.label | default("Explore Now") }}
                            </a>
                        {% endif %}
                    </div>
                {% case "hero_image" %}
                    <div class="hero-image-wrapper" {{ jw_attributes(block) }}>
                        <img src="{{ block.settings.image | asset_url }}" alt="Hero Banner">
                    </div>
                {% default %}
                    {{ render_block(block) }}
            {% endswitch %}
        {% endfor %}
    </div>
</section>

{% rules %}
{
  "name": "Hero Banner",
  "settings": [
    { "type": "color_background", "id": "bg_color", "label": "Background Color", "default": "#0f172a" },
    { "type": "range", "id": "padding", "label": "Vertical Padding", "min": 20, "max": 150, "step": 10, "unit": "px", "default": 80 }
  ],
  "blocks": [
    {
      "type": "hero_text",
      "name": "Hero Text & Button",
      "settings": [
        { "type": "quickEditor", "id": "title", "label": "Title", "default": "Transform Your Store" },
        { "type": "textarea", "id": "subtitle", "label": "Subtitle", "default": "Build stunning storefronts with JoonWeb." },
        { "type": "url", "id": "button", "label": "CTA Button", "default": { "url": "/collections", "label": "Shop Now", "target": "_self" } }
      ]
    },
    {
      "type": "hero_image",
      "name": "Hero Image",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Banner Image" }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Hero Banner", "settings": {} }]
}
{% endrules %}
```

2. Product Feed Section #

Renders dynamic products using the `products` array and `JWCart.add` shopping cart engine:

```jw
<section id="jw-section-{{ section.id }}" class="product-feed-section">
    <div class="jw-container" data-id="{{ section.id }}">
        <h2 class="fontStyle2 text-center mb-8">{{ section.settings.title | default("Featured Products") }}</h2>
        <div class="row">
            {% for product in products %}
                <div class="col-lg-3 col-md-4 col-6 mb-6">
                    <div class="product-card background1 p-4 rounded-xl shadow-sm">
                        <img src="{{ product.cover }}" alt="{{ product.title }}" class="rounded-lg mb-3 w-full h-48 object-cover">
                        <h5 class="fontStyle3 mb-2"><a href="{{ product.url }}">{{ product.title }}</a></h5>
                        <div class="fontStyle7 font-bold text-primary mb-3">{{ site.currency }} {{ product.sale_price }}</div>
                        <button class="btn-sm btn-outline w-full" onclick="JWCart.add('redirect','{{ product.default_varient }}',1)">
                            Add to Cart
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

{% rules type: "ProductFeed" %}
{
  "name": "Product Feed",
  "settings": [
    { "type": "text", "id": "title", "label": "Section Title", "default": "Featured Products" },
    { "type": "number", "id": "limit", "label": "Number of Products", "default": 8 }
  ],
  "blocks": [
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Product Feed", "settings": {} }]
}
{% endrules %}
```

3. Header Navigation Section #

Uses `section.navigation` array to render responsive navigation links and logo:

```jw
<header id="jw-section-{{ section.id }}" class="site-header {% if section.settings.enable_sticky %}sticky-header{% endif %}">
    <div class="jw-container flex items-center justify-between py-4">
        
        <a href="/" class="logo-link">
            {% if section.settings.logo %}
                <img src="{{ section.settings.logo | asset_url }}" style="height: {{ section.settings.logo_height }}px;" alt="Logo">
            {% else %}
                <span class="fontStyle2">{{ site.name | default("Store") }}</span>
            {% endif %}
        </a>
        
        
        <nav class="nav-menu flex gap-6">
            {% for menu in section.navigation %}
                <a href="{{ menu.link }}" class="fontStyle7 hover:text-primary">{{ menu.label }}</a>
            {% endfor %}
        </nav>
        
        
        <div class="header-actions flex items-center gap-4">
            <a href="/cart" class="cart-icon-btn flex items-center gap-1 fontStyle7">
                <i class="fas fa-shopping-cart"></i>
                <span>Cart</span>
            </a>
        </div>
    </div>
</header>

{% rules %}
{
  "name": "Header Navigation",
  "settings": [
    { "type": "image_picker", "id": "logo", "label": "Logo Image" },
    { "type": "range", "id": "logo_height", "label": "Logo Height (px)", "min": 20, "max": 120, "step": 5, "default": 40 },
    { "type": "checkbox", "id": "enable_sticky", "label": "Enable Sticky Header", "default": true }
  ],
  "blocks": [
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Header Navigation", "settings": {} }]
}
{% endrules %}
```

4. Blog Details & Sidebar Section #

Uses the global `blog` object with settings for post title, content body, and sidebar widgets:

```jw
<article id="jw-section-{{ section.id }}" class="blog-article-section py-12">
    <div class="jw-container grid grid-cols-1 lg:grid-cols-12 gap-8">
        <div class="lg:col-span-8">
            {% for block in section.blocks %}
                {% switch block.type %}
                    {% case "blog_title" %}
                        <h1 class="fontStyle1 mb-4" {{ jw_attributes(block) }}>{{ blog.title }}</h1>
                    {% case "blog_content" %}
                        <div class="blog-content prose max-w-none" {{ jw_attributes(block) }}>{{ blog.article }}</div>
                    {% default %}
                        {{ render_block(block) }}
                {% endswitch %}
            {% endfor %}
        </div>
        
        
        <aside class="lg:col-span-4 space-y-6">
            {% for block in section.blocks %}
                {% if block.type == "blog_sidebar" %}
                    <div class="sidebar-widget background2 p-6 rounded-xl" {{ jw_attributes(block) }}>
                        {% for subblock in block.blocks %}
                            {% if subblock.type == "popular_posts" %}
                                <h4 class="fontStyle4 mb-4">{{ subblock.settings.heading | default("Popular Posts") }}</h4>
                                <ul class="space-y-2">
                                    {% for post in blog.popular_post %}
                                        <li><a href="{{ post.url }}" class="fontStyle8 hover:underline">{{ post.title }}</a></li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        {% endfor %}
                    </div>
                {% endif %}
            {% endfor %}
        </aside>
    </div>
</article>

{% rules %}
{
  "name": "Blog Details",
  "settings": [],
  "blocks": [
    { "type": "blog_title", "name": "Blog Title", "settings": [] },
    { "type": "blog_content", "name": "Blog Content", "settings": [] },
    {
      "type": "blog_sidebar",
      "name": "Sidebar Widget",
      "blocks": [
        {
          "type": "popular_posts",
          "name": "Popular Posts List",
          "settings": [
            { "type": "text", "id": "heading", "label": "Widget Heading", "default": "Popular Posts" }
          ]
        }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Blog Details", "settings": {} }]
}
{% endrules %}
```

5. Footer Section #

Renders multi-column navigation menus, social links, and copyright text:

```jw
<footer id="jw-section-{{ section.id }}" class="site-footer background1 py-16">
    <div class="jw-container grid grid-cols-1 md:grid-cols-4 gap-8">
        {% for block in section.blocks %}
            {% if block.type == "column" %}
                <div class="footer-col" {{ jw_attributes(block) }}>
                    <h4 class="fontStyle4 mb-4">{{ block.settings.heading }}</h4>
                    {% if block.blocks %}
                        <ul class="space-y-2">
                            {% for subblock in block.blocks %}
                                {% if subblock.type == "navigation" and subblock.settings.links %}
                                    {% for link in subblock.settings.links %}
                                        <li><a href="{{ link.link }}" class="fontStyle8 hover:underline">{{ link.label }}</a></li>
                                    {% endfor %}
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="border-t border-slate-700 mt-12 pt-6 text-center fontStyle9">
        {{ site.name }} &copy; {{ "now" | date("Y") }}. All rights reserved.
    </div>
</footer>

{% rules %}
{
  "name": "Footer",
  "settings": [],
  "blocks": [
    {
      "type": "column",
      "name": "Footer Column",
      "settings": [
        { "type": "text", "id": "heading", "label": "Column Heading", "default": "Quick Links" }
      ],
      "blocks": [
        {
          "type": "navigation",
          "name": "Navigation Links",
          "settings": []
        }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Footer", "settings": {} }]
}
{% endrules %}
```

6. Dynamic Contact Form Section #

Uses the `siteform` block type to render lead collection forms with CSRF security tokens:

```jw
<section id="jw-section-{{ section.id }}" class="contact-form-section py-12">
    <div class="jw-container max-w-2xl mx-auto">
        <h2 class="fontStyle2 text-center mb-8">{{ section.settings.title | default("Get in Touch") }}</h2>
        {% for block in section.blocks %}
            {% if block.type == "siteform" and block.form %}
                <form class="jw_dynamic_form space-y-4 background2 p-8 rounded-2xl shadow-sm" {{ jw_attributes(block) }}>
                    <input type="hidden" name="csrf_token" value="{{ block.form.csrf }}">
                    {% for field in block.form.fields %}
                        <div class="form-group space-y-1">
                            <label class="fontStyle8 font-semibold">{{ field.label }}</label>
                            {% if field.type == "text" %}
                                <input type="text" name="{{ field.name }}" class="w-full px-4 py-2.5 rounded-lg border border-slate-300 fontStyle7" placeholder="{{ field.placeholder }}"{% if field.required == "yes" %} required{% endif %}>
                            {% elseif field.type == "textarea" %}
                                <textarea name="{{ field.name }}" rows="4" class="w-full px-4 py-2.5 rounded-lg border border-slate-300 fontStyle7" placeholder="{{ field.placeholder }}"></textarea>
                            {% endif %}
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn-primary w-full py-3 fontStyle7 font-bold">
                        {{ block.form.submit_label | default("Send Message") }}
                    </button>
                </form>
            {% endif %}
        {% endfor %}
    </div>
</section>

{% rules %}
{
  "name": "Contact Form",
  "settings": [
    { "type": "text", "id": "title", "label": "Section Title", "default": "Get in Touch" }
  ],
  "blocks": [
    {
      "type": "siteform",
      "name": "Lead Form",
      "settings": []
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Contact Form", "settings": {} }]
}
{% endrules %}
```

Last modified: Aug 25, 2026