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

# Seções

> Componentes liquid reutilizáveis para conteúdo da página

Seções são blocos de conteúdo reutilizáveis definidos em arquivos `.liquid`. Eles são os blocos de construção do seu tema e podem ser personalizados através do editor de tema.

## Visão Geral

Seções:

* São altamente personalizáveis através de parâmetros
* Podem ser reutilizadas múltiplas vezes com diferentes configurações
* Suportam blocos aninhados para layouts complexos
* Podem ser criadas, deletadas ou renomeadas conforme necessário

## Estrutura da Seção

Um arquivo de seção geralmente consiste de duas partes:

1. **Markup** - O código Liquid/HTML que renderiza a seção
2. **Schema** - Uma definição JSON que especifica as opções de personalização disponíveis no editor de tema

## Exemplo de Seção

<CodeGroup>
  ```liquid Markup theme={null}
  <div class="course-list {% if section.settings.full_width %}container-fluid{% else %}container{% endif %}">
    <h2>{{ section.settings.title }}</h2>
    
    {% if section.settings.course_id != blank %}
      {% assign course = all_courses[section.settings.course_id] %}
      {% if course %}
        <div class="course-card">
          <h3>{{ course.name }}</h3>
          <img src="{{ course.thumbnail }}" alt="{{ course.name }}">
          <div class="progress">{{ course.user_data.progress }}%</div>
        </div>
      {% endif %}
    {% endif %}
  </div>
  ```

  ```json Schema theme={null}
  {% schema %}
  {
    "name": "Exibição de Curso",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Título da Seção",
        "default": "Curso em Destaque"
      },
      {
        "type": "select",
        "id": "course_id",
        "label": "Selecionar Curso",
        "options": [
          {
            "value": "",
            "label": "Nenhum"
          },
          {
            "value": "course-id-1",
            "label": "Curso 1"
          },
          {
            "value": "course-id-2",
            "label": "Curso 2"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Largura Total",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Exibição de Curso",
        "settings": {
          "course_id": ""
        }
      }
    ]
  }
  {% endschema %}
  ```
</CodeGroup>

## Componentes do Schema

O bloco schema define como a seção aparece no editor de tema:

* `name` - O nome de exibição no editor de tema
* `settings` - Array de opções de configuração
* `blocks` - Configurações de bloco opcionais
* `presets` - Configurações pré-definidas para adicionar a seção
* `kiwi_extra` - Configurações adicionais para o editor de tema
  * `icon` - Ícone a ser associado com este tipo de seção no editor de tema
  * `blocks_hidden_if` - Objeto representando uma condição que oculta blocos de seção dentro do editor de tema se satisfeita
    * `setting` - Qual configuração desta seção verificar
    * `value` - Valor esperado para que a seção de bloco seja ocultada

## Tipos de Configuração

Consulte [Tipos de Input](/members-area/reference/schema/fields/settings/input-types/overview) para mais detalhes.

* `checkbox`: Toggle booleano (verdadeiro/falso)
* `course`: Dropdown populado com todos os cursos da área de membros
* `image_picker`: Seleção de imagem
* `module`: Grupo dropdown para selecionar um módulo de um curso da área de membros
* `range`: Slider numérico
* `select`: Grupo de botões toggle
* `text`: Input de texto de linha única

## Blocos de Seção

Blocos permitem componentes reutilizáveis e configuráveis dentro de uma seção. Eles são ideais para:

* Slides em um carrossel
* Itens em uma galeria
* Áreas de conteúdo personalizadas

Cada bloco tem seu próprio tipo e configurações:

```json theme={null}
"blocks": [
  {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Imagem do Slide"
      },
      {
        "type": "text",
        "id": "alt_text",
        "label": "Texto Alternativo"
      }
    ]
  }
]
```

## Melhores Práticas

<Tip>
  * Crie seções reutilizáveis com parâmetros claros
  * Use valores padrão significativos
  * Agrupe configurações relacionadas
  * Use blocos para componentes que precisam ser individualmente personalizáveis
  * Mantenha o markup limpo e de fácil manutenção
</Tip>

## Contexto Disponível nas Sections

No seu código Liquid de seção, você tem acesso a:

1. O objeto `section` contendo todas as configurações do JSON do template
2. Objetos globais como [all\_courses](/members-area/reference/objects/all_courses), [all\_modules](/members-area/reference/objects/all_modules), e [all\_lessons](/members-area/reference/objects/all_lessons)
3. Helpers de tradução via filtro `t`

## Estilizando Sections

Os temas Kiwify usam TailwindCSS para estilização. Este framework utility-first permite construir designs personalizados diretamente no seu markup:

```liquid theme={null}
<div class="flex flex-col md:flex-row p-4 gap-6 rounded-lg shadow-md bg-white">
  <img class="w-full md:w-1/3 rounded-md object-cover" src="{{ course.thumbnail }}" alt="{{ course.name }}">
  <div class="flex-1">
    <h3 class="text-xl font-bold text-gray-900">{{ course.name }}</h3>
    <div class="h-2 w-full bg-gray-200 rounded-full mt-2">
      <div class="h-2 bg-green-500 rounded-full" style="width: {{ course.user_data.progress }}%"></div>
    </div>
  </div>
</div>
```