Build JoonWeb (.JW) Section with ChatGPT

Detailed technical documentation and implementation guide for Build JoonWeb (.JW) Section with ChatGPT.

Overview & 1-Click Launch with ChatGPT #

ChatGPT Prompt Template & Workflow #

### JW Language Conditionals & Truthiness
| Legacy Syntax | JW Language Equivalent (Native) |
|---|---|
| `{% if title != blank %}` | `{% if title is not empty %}` or `{% if title != '' %}` |
| `{% if title != nil %}` | `{% if title is not null %}` |
| `{% if title != "" %}` | `{% if title != '' %}` |
| `{% if title != blank and title != nil %}` | `{% if title is defined and title is not empty %}` |
| `{% if title == blank %}` | `{% if title is empty %}` or `{% if title == '' %}` |
| `{% if title == nil %}` | `{% if title is null %}` |

### Master Prompt for ChatGPT

Copy and paste the following prompt into ChatGPT to generate any custom section:

```markdown
You are an Expert JoonWeb Theme Developer. Follow the official specifications:
https://joonweb.dev/skills/jw-theme-sections/SKILL.md

Create a production-ready, ultra-premium [SECTION_NAME] section in .jw format for an [Online Store / Informative Website].

Strict Requirements:
1. Top Comment: {# Copy and paste this code directly into the JoonWeb Theme Editor (.jw file) #}
2. File Order (Mandatory): Variables {% set %} -> <style> (Scoped CSS MUST come BEFORE <section>) -> <section> (Outer HTML container) -> <script> -> {# Do not change if you don't know #} -> {% rules %}.
3. Outer Wrapper: <section id="jw-section-{{ section.id }}" class="xx background{{ sc }} ..." data-xx="1" data-bl="{{ site ? 0 : 1 }}" style="...">.
4. Conditionals: Use != '' (never != blank).
5. Styling: Bootstrap 5.3 + Bootstrap Icons + FontAwesome 6. Scoped CSS using {{ S }} with builder overrides {{ S }}[data-bl="1"].
6. Editable Blocks: <div class="xx-blk" data-jw-block> and {% switch block.type %} ... {% default %} {{ render_block(block) }} {% endswitch %}.
7. Valid Setting Types: ONLY radio (yes/no), quickEditor (<p>...</p>), text, url, image_picker, range, select, color, color_background, header, paragraph, buttons, socialicon. Never use checkbox or textarea.
8. Schema Blocks & Presets: Append {"type": "themes"} and {"type": "apps"} to schema blocks. NEVER include themes or apps in presets blocks.
9. Clean Comments: No unnecessary, bulky decorative comments.
```

### Custom GPT Setup (Optional)
If you are configuring a custom GPT for your development agency or team:
1. In the GPT **Instructions** field, paste the system prompt above.
2. Add `https://joonweb.dev/skills/jw-theme-sections/SKILL.md` to GPT Knowledge.
3. Your GPT is now primed to generate valid single-file `.jw` templates on demand.

Ready-to-Use Prompt Examples for ChatGPT #

Here are tested prompt examples you can copy and send to ChatGPT right now:

#### 1. Full-Width Hero Banner
```text
Create a full-width Hero Banner section (.jw) for an informative agency website with:
- Background image picker with dark overlay opacity range slider (0% to 100%)
- Large responsive heading and lead paragraph
- Primary CTA button and secondary outline button with link pickers
- Text alignment selector (left, center, right)
- Scoped CSS under #jw-section-{{ section.id }}
- Valid JSON {% rules %} ... {% endrules %} with fully populated default presets
```

#### 2. E-Commerce Featured Product Grid with Instant Cart
```text
Generate an e-commerce Featured Product Grid section in .jw format with:
- Collection selector setting and product count slider (4 to 12)
- Responsive Bootstrap 5.3 grid with column controls (2, 3, or 4 columns)
- Product card featuring: hover zoom effect, discount percentage badge, sale price, MRP strikethrough, and stock badge
- Instant Ajax Add to Cart button using JWCart.add(variantId, 1, this)
- Scoped CSS under #jw-section-{{ section.id }}
- Valid JSON {% rules %} ... {% endrules %} with fully populated default presets
```

#### 3. Customer Testimonials Carousel
```text
Generate an interactive Customer Testimonials section in .jw format with:
- Section header with title and subtitle
- Repeatable blocks for individual testimonials
- Each block containing: 5-star rating display, customer quote text, avatar image picker, customer name, and role/company
- Responsive Bootstrap 5.3 card layout
- Scoped CSS for card hover lift and quotation styling
- Valid JSON {% rules %} ... {% endrules %} with fully populated default presets (3 demo testimonials)
```

Production .jw File Anatomy & Output #

When generated correctly, your `.jw` section will follow this precise single-file structure:

```html
{# ======================================================== #}
{# JoonWeb Hero Banner Section (.jw)                        #}
{# ======================================================== #}
<section id="jw-section-{{ section.id }}" class="jw-hero-banner position-relative overflow-hidden" style="padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px;">
  <div class="container position-relative z-1 py-5">
    <div class="row align-items-center {% if section.settings.alignment == 'center' %}justify-content-center text-center{% else %}justify-content-start text-start{% endif %}">
      <div class="col-12 col-lg-8">
        {% if section.settings.heading %}
          <h1 class="display-4 fw-bold mb-3 text-white">{{ section.settings.heading }}</h1>
        {% endif %}
        {% if section.settings.subheading %}
          <p class="lead mb-4 text-white-50">{{ section.settings.subheading }}</p>
        {% endif %}
        {% if section.settings.btn_text and section.settings.btn_link %}
          <a href="{{ section.settings.btn_link }}" class="btn btn-primary btn-lg px-4">{{ section.settings.btn_text }}</a>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{% rules %}
{
  "name": "Hero Banner",
  "settings": [
    { "type": "text", "id": "heading", "label": "Main Heading", "default": "Next-Gen Digital Commerce" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Elevate your storefront experience." },
    { "type": "text", "id": "btn_text", "label": "Button Label", "default": "Shop New Arrivals" },
    { "type": "url", "id": "btn_link", "label": "Button URL", "default": "/collections/all" }
  ],
  "presets": [
    {
      "name": "Hero Banner",
      "settings": {
        "heading": "Next-Gen Digital Commerce",
        "subheading": "Elevate your storefront experience.",
        "btn_text": "Shop New Arrivals",
        "btn_link": "/collections/all"
      }
    }
  ]
}
{% endrules %}
```

### Installation
Save the generated code as `sections/[section_name].jw` in your theme folder. It will instantly appear in the JoonWeb visual editor sidebar for merchants to add and customize!

Last modified: Oct 12, 2026

Build JoonWeb (.JW) Section with ChatGPT

Overview & 1-Click Launch with ChatGPT #

ChatGPT Prompt Template & Workflow #

Ready-to-Use Prompt Examples for ChatGPT #

Production .jw File Anatomy & Output #

Endpoint Title