Skip to main 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

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