Architecture

Templates

Templates are the view page configurations files use in structuring how contents are being rendered on the storefront and to also retrieve data that would be needed for each temaplate view.

They are JSON files located inside the templates folder and subfolders and they supports JSON Standard syntaxes only.

Location

.
└── theme
    ├── layout
    |   ...
    ├── templates
    |   ├── customer
    |   |   ├── orders.json
    |   ├── home.json
    ...

Structure

Template files consist of four major blocks which are "layout", "sections", "orders" and "data" with each block having their own unique functionality and use cases for every templates as stated below.

{
    "layout": "main", // used in specifying the template's layout

    "sections": {
        ... // Consist all section objects and their settings for sections you want to render. 
    },

    "order": [], // To specify in which order the sections are to be rendered

    "data": {
        ... // To specify the data you want to make available for the page. [optional]
    }
}

Layout - is used to specify the name of the layout file the template will be rendered in and they are located inside the layouts folder.

Sections - are set of objects that are used in customizing the contents to be rendered by your templates and all section requires a "type" key, which is used to specify the section file to be rendered by the particular section.

Order - this is used to specify the order in which the sections are being rendered on your theme. It's an array of strings which takes the section names has values.

Data - by default Taojaa provides specific datas tailored to each templates features but in order to build any ecommerce experience you desire, Taojaa theme engine has provided a means to request for specific datas you might need in your template using the "data" block in your template and can customize how you want to receive these datas with paginations and filtering features.

To see the list of datas you can request for, reference the Storefront Datas guide.

Usage

When building a storefront theme with Affluent base theme, default templates would be installed inside your templates folder, you can add new templates to your theme, making sure you follow the Taojaa Theme Standards your template will be automatically mapped it's respective route/path.

If you create a new template called custom-experience.json or using a subfolder lookbooks/summer-2025.json whenever storefront visitors navigates to /custom-experience Taojaa will map this path to your custom-experience.json template and the same when users visits /lookbooks/summer-2025

{
    "layout": "main",
    "sections": {
        "hero_section" : {
            "type": "hero-slideshow", // The name of the html section file to be rendered by this section
            "settings": {
                "padding": "20px"
            },
            "widgets": {
                "slide_1_heading": {
                    "type": "h1",
                    "text": "Best online shopping website"
                },
                ...
            }
        },
        "offers_section": {
            "type": "promotion-and-offers",
            "settings": {
                "heading": "We've got the best offers for you",
                "sub_heading": "Get 30% off all orders using this coupon."
            },
            "widget": {
                "categories": {
                    "type": "navigation",
                    "handle": "special_offers" // a navigation handle from the list of store navigations
                }
            }
        }
    },
    "order": [
        "hero_section",
        "offers_section"
    ],
    "data": {
        "products": {
            "pagination": {
                "per_page": 10
            }
        },
        "featured_collections": true
    }
}
<- Layouts
Sections ->
ON THIS PAGE
Overview