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

# Sections

> Reusable liquid components for page content

Sections are reusable content blocks defined in `.liquid` files. They are the building blocks of your theme and can be customized through the theme editor.

## Overview

Sections:

* Are highly customizable through parameters
* Can be reused multiple times with different configurations
* Support nested blocks for complex layouts
* Can be created, deleted, or renamed as needed

## Section Structure

A section file typically consists of two parts:

1. **Markup** - The Liquid/HTML code that renders the section
2. **Schema** - A JSON definition that specifies the customization options available in the theme editor

## Example Section

<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": "Course Display",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Section Title",
        "default": "Featured Course"
      },
      {
        "type": "select",
        "id": "course_id",
        "label": "Select Course",
        "options": [
          {
            "value": "",
            "label": "None"
          },
          {
            "value": "course-id-1",
            "label": "Course 1"
          },
          {
            "value": "course-id-2",
            "label": "Course 2"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Course Display",
        "settings": {
          "course_id": ""
        }
      }
    ]
  }
  {% endschema %}
  ```
</CodeGroup>

## Schema Components

The schema block defines how the section appears in the theme editor:

* `name` - The display name in the theme editor
* `settings` - Array of configuration options
* `blocks` - Optional block configurations
* `presets` - Pre-configured settings for adding the section
* `kiwi_extra` - Additional settings for the theme editor
  * `icon` - Icon to be associated with this section type in the theme editor
  * `blocks_hidden_if` - Object representing a condition that hides section blocks inside the theme editor if satisfied
    * `setting` - Which setting of this section to check
    * `value` - Expected value for the block section to be hidden

## Setting Types

Check [Input Types](/en/members-area/reference/schema/fields/settings/input-types/overview) for more details.

* `checkbox`: Boolean toggle (true/false)
* `course`: Dropdown populated with all courses of the members area
* `image_picker`: Image selection
* `module`: Dropdown group for selecting a module from a course of the members area
* `range`: Numeric slider
* `select`: Toggle button group
* `text`: Single-line text input

## Section Blocks

Blocks allow for reusable, configurable components within a section. They're ideal for:

* Slides in a carousel
* Items in a gallery
* Custom content areas

Each block has its own type and settings:

```json theme={null}
"blocks": [
  {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Slide Image"
      },
      {
        "type": "text",
        "id": "alt_text",
        "label": "Alt Text"
      }
    ]
  }
]
```

## Best Practices

<Tip>
  * Create reusable sections with clear parameters
  * Use meaningful default values
  * Group related settings together
  * Use blocks for components that need to be individually customizable
  * Keep the markup clean and maintainable
</Tip>

## Context Available in Sections

In your Liquid section code, you have access to:

1. The `section` object containing all settings from the template JSON
2. Global objects like [all\_courses](/en/members-area/reference/objects/all_courses), [all\_modules](/en/members-area/reference/objects/all_modules), and [all\_lessons](/en/members-area/reference/objects/all_lessons)
3. Translation helpers via the `t` filter

## Styling Sections

Kiwify themes use TailwindCSS for styling. This utility-first framework lets you build custom designs directly in your 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>
```