Editables Overview

Editable regions allow content editors to update text, images, and other content directly through the Nimbu admin interface without touching code. This makes themes more accessible to non-technical users.

What Are Editables?

Editables are special Liquid tags that create editable content regions:

• {% editable_field %} - Single-line text input
• {% editable_text %} - Rich text editor (WYSIWYG)
• {% editable_file %} - Image/file uploads
• {% editable_select %} - Dropdown selections
• {% editable_switch %} - Boolean toggles
• {% editable_reference %} - Links to other content
• {% editable_canvas %} - Drag-and-drop page builders
• {% editable_group %} - Organize related editables
• {% repeatable %} - Content blocks users can add/remove

Quick Example

<section class="hero">
  <h1>{% editable_field title %}Welcome{% endeditable_field %}</h1>

  {% editable_text content %}
    <p>Add your hero content here...</p>
  {% endeditable_text %}

  {% editable_file image %}
    {{ "default-hero.jpg" | theme_image_url }}
  {% endeditable_file %}
</section>

When editors visit this page in the Nimbu admin, they'll see:

• An inline text editor for the title
• A rich text editor for the content
• An image upload button for the hero image

Canvas & Repeatables

The most powerful editable features are canvas and repeatables, which create drag-and-drop page builders:

{% editable_canvas content %}
  {% repeatable "Text Block" %}
    {% include 'repeatables/text-block' %}
  {% endrepeatable %}

  {% repeatable "Image Gallery" %}
    {% include 'repeatables/gallery' %}
  {% endrepeatable %}

  {% repeatable "Product Grid" %}
    {% include 'repeatables/products' %}
  {% endrepeatable %}
{% endeditable_canvas %}

This creates a flexible page builder where editors can:

1. Add blocks by clicking "+ Add Section"
2. Choose from available repeatable types
3. Drag blocks to reorder them
4. Edit content within each block
5. Remove blocks they don't need

Where to Learn More

Editables are a large topic with many features and options. For comprehensive documentation, see:

Pages Section

The Pages documentation provides complete coverage of:

• All editable tag types with examples
• Canvas and repeatable patterns
• Real-world page builder examples
• Best practices for editable regions
• Common patterns from production themes

Quick Links by Feature

• Canvas System - Drag-and-drop page builders
• Repeatable Blocks - Flexible content sections
• Editable Tags Reference - Complete tag documentation
• Translation - Multilingual content editing

Key Concepts

Before diving into the detailed documentation, understand these concepts:

1. Default Content

Always provide default content so pages look good before editing:

{% editable_field heading %}Default Heading{% endeditable_field %}

2. Assignment for Reuse

Assign editable values to variables for reuse:

{% editable_field button_text, assign: btn_text %}
{% if btn_text %}
  <button>{{ btn_text }}</button>
{% endif %}

3. Labels and Hints

Help editors understand what each field is for:

{% editable_file logo, label: "Company Logo", hint: "Upload a PNG or SVG (max 200KB)" %}

4. Organization with Groups

Group related settings together:

{% editable_group settings, label: "Section Settings" %}
  {% editable_select theme, options: "light,dark" %}
  {% editable_switch show_border %}
{% endeditable_group %}

When to Use Editables

Use Editables For:

✅ Content that changes frequently (homepage hero, announcements) ✅ Content that varies by page (page titles, descriptions) ✅ Settings that non-technical users should control ✅ Flexible page layouts (canvas + repeatables)

Don't Use Editables For:

❌ Theme structure and global navigation ❌ Complex logic or calculations ❌ Content that never changes ❌ Technical configuration

Example: Editable Product Features

<section class="product-features">
  <div class="container">
    <h2>{% editable_field section_title %}Features{% endeditable_field %}</h2>

    {% editable_canvas features %}
      {% repeatable "Feature" %}
        <div class="feature">
          <div class="icon">
            {% editable_file icon %}
              {{ "default-icon.svg" | theme_image_url }}
            {% endeditable_file %}
          </div>

          <h3>{% editable_field title %}Feature Title{% endeditable_field %}</h3>

          <div class="description">
            {% editable_text description %}
              <p>Describe this feature.</p>
            {% endeditable_text %}
          </div>
        </div>
      {% endrepeatable %}
    {% endeditable_canvas %}
  </div>
</section>

Editors can:

• Change the section title
• Add/remove/reorder features
• Upload custom icons for each feature
• Edit feature titles and descriptions
• All without touching code

Next Steps

For complete documentation on all editable features, continue to:

Pages - Complete Editables Guide

This comprehensive guide covers:

• All 9 editable tag types in detail
• Canvas and repeatable patterns
• Advanced techniques and examples
• Real code from production themes
• Best practices and common pitfalls

Or explore related topics:

• Snippets - Create reusable repeatable components
• Templates - Use editables in different page types
• Multilingual Sites - Translate editable content