Section Anatomy & Block System

Detailed technical documentation and implementation guide for Section Anatomy & Block System.

Anatomy of a .jw Section File #

A `.jw` section is a self-contained storefront building block that combines **dynamic template markup**, **scoped styling**, **client-side JavaScript**, and an embedded **`{% rules %}` JSON schema**.

### Production Template Anatomy (Based on cart.jw)

```jw
{# 1. DYNAMIC CONFIGURATION & VARIABLE MAPPING #}
{% set button_size_typ = {
  "btns-sm": "btns-sm",
  "btns-md": "btns-md",
  "btns-lg": "btns-lg",
  "btns-xlg": "btns-xlg"
} %}
{% set button_typ = button_size_typ[section.desktop.buttonSize] ?? 'btns-md' %}

{# 2. SCOPED STYLES (Scoped with #{{ section.id }}) #}
<style>
  /* Border radius configuration */
  {% if section.desktop.borderRadius %}
    #{{ section.id }} .border-radius {
      border-radius: {{ section.desktop.borderRadius }}px;
    }
  {% endif %}

/* Responsive section padding */
  {% if section.desktop.deskPaddingTop or section.desktop.deskPaddingBottom or section.mobile.deskPaddingTop or section.mobile.deskPaddingBottom %}
    #{{ section.id }} {
      padding-top: {{ section.mobile.deskPaddingTop | default(30) }}px;
      padding-bottom: {{ section.mobile.deskPaddingBottom | default(30) }}px;
    }
    @media screen and (min-width: 750px) {
      #{{ section.id }} {
        padding-top: {{ section.desktop.deskPaddingTop | default(60) }}px;
        padding-bottom: {{ section.desktop.deskPaddingBottom | default(60) }}px;
      }
    }
  {% endif %}

/* Dynamic font styles from Property object */
  #{{ section.id }} .theme-title .jwset {
    font-size: {{ Property.title.style['size'] | default(28) }}px;
    font-family: {{ Property.title.style['family'] | default('Inter') }};
    font-weight: {{ Property.title.style['weight'] | default('700') }};
    line-height: {{ Property.title.style['height'] | default('1.2') }};
    letter-spacing: {{ Property.title.style['spacing'] | default('0') }};
  }
</style>

{# 3. SECTION MARKUP & STOREFRONT DATA BINDING #}
<section class="jw_section section-padding {{ section.colors ? section.colors : 'background5' }}" id="{{ section.id }}">
  <div class="{{ section.desktop.sectionWidth ? section.desktop.sectionWidth : 'container' }}">
    {% if title %}
      <div class="fontStyle3 theme-title mb-4">
        <span class="jwset">{{ title }}</span>
      </div>
    {% endif %}

{# RENDER BLOCKS OR CUSTOM CONTENT #}
    {% if section.blocks is defined and section.blocks | length > 0 %}
      <div class="row g-4">
        {% for block in section.blocks %}
          <div class="col-md-4" {{ jw_attributes(block) }}>
            {% switch block.type %}
              {% case "feature_card" %}
                <div class="card p-4 border-radius {{ section.colors2 ? section.colors2 : 'background5' }}">
                  {% if block.settings.icon %}
                    <img src="{{ block.settings.icon | asset_url }}" class="mb-3" style="width: 48px;">
                  {% endif %}
                  <h4 class="fontStyle5">{{ block.settings.title }}</h4>
                  <p class="fontStyle7 text-muted">{{ block.settings.description }}</p>
                </div>
              {% default %}
                {{ render_block(block) }}
            {% endswitch %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</section>

{# 4. SCOPED JAVASCRIPT #}
<script>
$(document).ready(function() {
  $('#{{ section.id }} .jw_action_btn').on('click', function() {
    console.log('Action triggered in section {{ section.id }}');
  });
});
</script>

{# 5. EMBEDDED RULES SCHEMA #}
{% rules %}
{
  "name": "Feature Highlights",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Section Heading",
      "default": "Why Choose Us"
    },
    {
      "type": "range",
      "id": "borderRadius",
      "label": "Card Border Radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "default": 12
    }
  ],
  "blocks": [
    {
      "type": "feature_card",
      "name": "Feature Card",
      "settings": [
        { "type": "image_picker", "id": "icon", "label": "Icon Image" },
        { "type": "text", "id": "title", "label": "Title", "default": "Fast Shipping" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "Delivery within 48 hours." }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [
    {
      "name": "Feature Highlights",
      "category": "Promotional"
    }
  ]
}
{% endrules %}
```

Critical Syntax Invariant: The {# Spacing Rule #

Core Section Objects & Functions #

Every `.jw` section has access to global and section-level context variables:

| Object / Function | Description | Example |
|---|---|---|
| `section.id` | Unique alphanumeric identifier for this section instance. | `#{{ section.id }}` |
| `section.settings` | Values configured by the merchant in `{% rules %}` settings. | `{{ section.settings.title }}` |
| `section.desktop` | Desktop design settings (`deskPaddingTop`, `borderRadius`, `sectionWidth`). | `{{ section.desktop.deskPaddingTop }}` |
| `section.mobile` | Mobile design settings (`deskPaddingTop`, `deskPaddingBottom`). | `{{ section.mobile.deskPaddingTop }}` |
| `section.colors` | Active color scheme class (`background1` to `background6`). | `class="{{ section.colors }}"` |
| `Property.*.style` | Font properties object (`size`, `family`, `weight`, `height`, `spacing`). | `{{ Property.title.style['size'] }}px` |
| `cart` | Global cart object (`cart.items`, `cart.subtotal`, `cart.total`, `cart.discount`). | `{% if cart.items %}` |
| `site.currency` | Merchant's active store currency symbol (e.g. `₹`, `$`, `€`). | `{{ site.currency }}{{ item.sale_price }}` |
| `root.url` | Store root URL for internal linking. | `<a href="{{ root.url }}/collections">` |
| `jw_attributes(block)` | Emits selection attributes required for Site Builder click-to-edit. | `<div {{ jw_attributes(block) }}>` |
| `render_block(block)` | Renders theme and app blocks in the `{% default %}` switch case. | `{{ render_block(block) }}` |

Last modified: Oct 08, 2026

Section Anatomy & Block System

Anatomy of a .jw Section File #

Critical Syntax Invariant: The {# Spacing Rule #

Core Section Objects & Functions #

Endpoint Title