Pular para o conteúdo principal
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

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

​
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 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: 
"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

  • 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

​
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, all_modules, e 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: 
<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>