> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Structure

> Understanding the architecture and components

The Kiwify Members Area theme system follows a modular architecture inspired by Shopify. This document provides an overview of how the components work together to create a customizable learning experience.

## Directory Structure

```
theme-name/
├── templates/
│   ├── index.json
│   └── login.json
├── sections/
│   └── [...].liquid
├── locales/
│   ├── en.default.json
│   ├── es.default.json
│   ├── pt.default.json
│   ├── en.schema.json
│   ├── es.schema.json
│   └── pt.schema.json
└── snippets/
    └──[...].liquid
```

## Core Components

<CardGroup cols={2}>
  <Card title="Templates" icon="file-code" href="/en/members-area/key-concepts/theme/templates">
    JSON files that define page structure and content
  </Card>

  <Card title="Sections" icon="puzzle-piece" href="/en/members-area/key-concepts/theme/sections">
    Reusable .liquid components for page content
  </Card>

  <Card title="Locales" icon="language" href="/en/members-area/key-concepts/theme/locales">
    Translation files for multiple languages
  </Card>

  <Card title="Snippets" icon="code" href="/en/members-area/key-concepts/theme/snippets">
    Reusable code fragments shared across sections
  </Card>
</CardGroup>

## How These Components Work Together

<Steps>
  <Step title="Templates Define Structure">
    <a href="/en/members-area/key-concepts/theme/templates">Templates</a> are JSON files that define which sections appear on a page and their order. They also store configuration data for each section.
  </Step>

  <Step title="Sections Provide Content">
    <a href="/en/members-area/key-concepts/theme/sections">Sections</a> are Liquid files that render the actual content on the page. They can be customized through the theme editor settings defined in their schema.
  </Step>

  <Step title="Snippets Add Reusability">
    <a href="/en/members-area/key-concepts/theme/snippets">Snippets</a> are reusable code fragments that can be included in sections to maintain consistency and reduce duplication.
  </Step>

  <Step title="Locales Enable Translation">
    <a href="/en/members-area/key-concepts/theme/locales">Locales</a> provide translation capabilities, allowing your theme to support multiple languages.
  </Step>
</Steps>

## Data Flow

<Accordion title="How Data Flows Through Your Theme">
  1. The Members Area loads the appropriate template JSON file (index.json or login.json)
  2. It reads the sections and their order from the template
  3. For each section, it:
     * Loads the section's Liquid file
     * Passes the section's settings from the template to the section
     * Renders the section with its data
  4. Within sections, you can:
     * Access global objects like `all_courses`
     * Render snippets for reusable UI components
     * Use translations via the `t` filter
</Accordion>

## Available Global Objects

Check [Objects Overview](/en/members-area/reference/objects) for a complete list and more details.

<CardGroup cols={2}>
  <Card title="all_courses" icon="book" href="/members-area/objects/all_courses">
    Access to all courses the user has permission to view
  </Card>

  <Card title="all_modules" icon="folder" href="/members-area/objects/all_modules">
    Access to all modules across all courses
  </Card>

  <Card title="all_lessons" icon="file" href="/members-area/objects/all_lessons">
    Access to all lessons across all modules
  </Card>

  <Card title="last_watched_lessons" icon="clock-rotate-left" href="/members-area/objects/last_watched_lessons">
    Array of recently viewed lesson IDs
  </Card>
</CardGroup>

## Styling

<Info>
  Kiwify themes use TailwindCSS for styling, a utility-first CSS framework that allows you to style elements directly in your HTML/Liquid markup.
</Info>

## Available Libraries

The theme runtime environment includes the following libraries available for use:

* [Embla Carousel](https://www.embla-carousel.com/): for creating carousels
* [Microtip](https://microtip.vercel.app/): for displaying tooltips

For more information, consult the documentation of the respective libraries. The default Kiwify theme contains usage examples.

## Limitations

<Warning>
  * JavaScript is not currently supported in theme files
  * Only two pages can be customized (index and login)
  * Maximum of 25 sections per template
  * Maximum of 50 blocks per section
</Warning>

## Learn More

For detailed information about each component, visit the dedicated documentation pages:

* [Templates](/en/members-area/key-concepts/theme/templates)
* [Sections](/en/members-area/key-concepts/theme/sections)
* [Locales](/en/members-area/key-concepts/theme/locales)
* [Snippets](/en/members-area/key-concepts/theme/snippets)