> ## 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.

# Estrutura do Tema

> Entendendo a arquitetura e os componentes

O sistema de temas da Área de Membros Kiwify segue uma arquitetura modular inspirada no Shopify. Este documento fornece uma visão geral de como os componentes trabalham juntos para criar uma experiência de aprendizado personalizável.

## Estrutura de Diretórios

```
nome-do-tema/
├── 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
```

## Componentes Principais

<CardGroup cols={2}>
  <Card title="Templates" icon="file-code" href="/members-area/key-concepts/theme/templates">
    Arquivos JSON que definem a estrutura e conteúdo da página
  </Card>

  <Card title="Sections" icon="puzzle-piece" href="/members-area/key-concepts/theme/sections">
    Componentes .liquid reutilizáveis para conteúdo da página
  </Card>

  <Card title="Locales" icon="language" href="/members-area/key-concepts/theme/locales">
    Arquivos de tradução para múltiplos idiomas
  </Card>

  <Card title="Snippets" icon="code" href="/members-area/key-concepts/theme/snippets">
    Fragmentos de código reutilizáveis compartilhados entre seções
  </Card>
</CardGroup>

## Como Estes Componentes Funcionam Juntos

<Steps>
  <Step title="Templates Definem a Estrutura">
    <a href="/members-area/key-concepts/theme/templates">Templates</a> são arquivos JSON que definem quais seções aparecem em uma página e sua ordem. Eles também armazenam dados de configuração para cada seção.
  </Step>

  <Step title="Sections Fornecem Conteúdo">
    <a href="/members-area/key-concepts/theme/sections">Sections</a> são arquivos Liquid que renderizam o conteúdo real na página. Eles podem ser personalizados através das configurações do editor de tema definidas em seu schema.
  </Step>

  <Step title="Snippets Adicionam Reutilização">
    <a href="/members-area/key-concepts/theme/snippets">Snippets</a> são fragmentos de código reutilizáveis que podem ser incluídos em seções para manter consistência e reduzir duplicação.
  </Step>

  <Step title="Locales Permitem Tradução">
    <a href="/members-area/key-concepts/theme/locales">Locales</a> fornecem capacidades de tradução, permitindo que seu tema suporte múltiplos idiomas.
  </Step>
</Steps>

## Fluxo de Dados

<Accordion title="Como os Dados Fluem Através do Seu Tema">
  1. A Área de Membros carrega o arquivo JSON de template apropriado (index.json ou login.json)
  2. Ela lê as seções e sua ordem do template
  3. Para cada seção, ela:
     * Carrega o arquivo Liquid da seção
     * Passa as configurações da seção do template para a seção
     * Renderiza a seção com seus dados
  4. Dentro das seções, você pode:
     * Acessar objetos globais como `all_courses`
     * Renderizar snippets para componentes de UI reutilizáveis
     * Usar traduções através do filtro `t`
</Accordion>

## Objetos Globais Disponíveis

Confira [Visão Geral dos Objetos](/members-area/reference/objects) para uma lista completa e mais detalhes.

<CardGroup cols={2}>
  <Card title="all_courses" icon="book" href="/members-area/objects/all_courses">
    Acesso a todos os cursos que o usuário tem permissão para visualizar
  </Card>

  <Card title="all_modules" icon="folder" href="/members-area/objects/all_modules">
    Acesso a todos os módulos em todos os cursos
  </Card>

  <Card title="all_lessons" icon="file" href="/members-area/objects/all_lessons">
    Acesso a todas as aulas em todos os módulos
  </Card>

  <Card title="last_watched_lessons" icon="clock-rotate-left" href="/members-area/objects/last_watched_lessons">
    Array de IDs de aulas visualizadas recentemente
  </Card>
</CardGroup>

## Estilização

<Info>
  Os temas Kiwify usam TailwindCSS para estilização, um framework CSS utility-first que permite estilizar elementos diretamente em sua marcação HTML/Liquid.
</Info>

## Bibliotecas Disponíveis

O ambiente de execução dos temas conta com as seguintes bibliotecas disponíveis para uso:

* [Embla Carousel](https://www.embla-carousel.com/): para a criação de carrosseis
* [Microtip](https://microtip.vercel.app/): para a exibição de tooltips

Para mais informações, consulte a documentação das respectivas bibliotecas. O tema padrão da Kiwify contém exemplos de uso.

## Limitações

<Warning>
  * JavaScript não é suportado atualmente em arquivos de tema
  * Apenas duas páginas podem ser personalizadas (index e login)
  * Máximo de 25 seções por template
  * Máximo de 50 blocos por seção
</Warning>

## Saiba Mais

Para informações detalhadas sobre cada componente, visite as páginas de documentação dedicadas:

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