Overview

Overview

Sections are reusable UI components that can be customized by merchants. Section files are present inside the sections folder of a theme.

Anatomy of a section

Sections are re-usable React components which can customized from theme editor. Each section has a settings configuration object which is passed to the component as its props. Sections can be provided with custom props by passing props to the SectionRenderer component.

For each section, there must be a named export for Component defining the visual interface of the section and a named export for settings defining the configuration schema for the section.

Here is an example for a section that renders HTML markup in a react component.

import React from 'react';

export function Component({ props, blocks }) {
    const descValue = props?.description?.value;
    if (!descValue) return null;

    return <p>{descValue}</p>;
}

export const settings = {
    label: "Section Description",
    props: [
        {
            id: "description",
            label: "Description",
            type: "text",
            default: "",
            info: "Description text of the section",
        },
    ],
    blocks: [],
};