Creating a New Theme Section

Sections are the building blocks of your storefront pages. You can create custom sections from scratch in the code editor and they will appear in the Visual Editor's + Add panel — ready to drag onto any page.

What is a section?

A section is a Liquid template file in the sections/ folder. It contains:

HTML markup — the structure rendered on your storefront.
Liquid logic — dynamic content from products, settings, or your shop.
Schema block — a JSON block at the bottom of the file that defines the settings merchants can configure in the Visual Editor sidebar.

Creating a new section

Open the code editor (Online Store → Themes → Edit Code).
Click the + icon in the file tree header.
In the modal, select Section as the file type.
Enter a name (e.g., my-banner). Cartly will create sections/my-banner.liquid.
Click Create.

Cartly generates a working scaffold automatically — full HTML structure, five example settings (a heading text field, color picker, range slider, checkbox, and image picker), and a preset with default values. You can edit the scaffold immediately.

Understanding the schema block

The {%- schema -%} block at the bottom of the file controls what appears in the Visual Editor sidebar when a merchant selects this section. Key fields:

name — the display name shown in the + Add panel (e.g., "Feature Grid").
settings — an array of configurable fields. Each field has a type, an id (used in Liquid as section.settings.id), a label, and optionally a default value.
presets — an array of preset configurations. At least one preset is required. Without a preset, the section does not appear in the + Add panel.

Why presets matter

When a merchant clicks + Add section in the Visual Editor, they see a list of sections with their preset configurations. The preset provides a ready-to-use starting point — default text, default colors, and a default set of blocks. Without a preset, your section is invisible to the Visual Editor. Always include at least one.

Available setting types

Type	What it shows in the editor
`text`	Single-line text input
`textarea`	Multi-line text area
`image_picker`	Media library selector
`color`	Color picker
`range`	Slider with min, max, and step
`select`	Dropdown — requires an `options` array
`checkbox`	On/off toggle
`url`	URL input
`product`	Product search typeahead
`collection`	Collection search typeahead

After saving

Save the file with ⌘S (Mac) or Ctrl+S (Windows). Open the Visual Editor (Online Store → Themes → Customize) and click + Add section — your new section appears in the list, ready to add to any page.