Skip to main content

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

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

​
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 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: 
"blocks": [
  {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Slide Image"
      },
      {
        "type": "text",
        "id": "alt_text",
        "label": "Alt Text"
      }
    ]
  }
]

​
Best Practices

  • 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

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