Storefront Design

Themes

Documentation for building and customizing themes on JoonWeb. Learn theme structure, templates, styling, and best practices for responsive design.

Recommended Starting Point

Getting Started with Theme Development

Understand the official JoonWeb theme folder structure, .jw template anatomy, global typography tokens, and JSON rules schema.

Select a category below to view documentation articles, API endpoints, and guides.

1 Endpoints / Guides

JoonWeb Theme development introduction and folder structure

Theme Architecture & Directory Structure

1 Endpoints / Guides

Typography and background color utility classes

Typography & Background Color Utility Classes

1 Endpoints / Guides

Section anatomy, jw_attributes, render_block, and custom block definitions

Section Anatomy & Block System

6 Endpoints / Guides

Ready-to-use production section templates

Production-Ready Section Templates Header Footer Blog Grid Feed Product Grid Feed Dynamic Site Form

1 Endpoints / Guides

Step-by-step guide to converting static HTML into dynamic .jw sections

Converting Static HTML to Dynamic .jw Sections


                            sections/hero.jw


                            {% rules %} ... {% endrules %}


                            .fontStyle1, .background1


                            jw_attributes(block)