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 { code } = props;
    return (
        !code?.value ? null
            : (
                <div dangerouslySetInnerHTML={{ __html: code.value }} />
            )
    );
}

export const settings = {
    label: 'Raw HTML',
    props: [
        {
            id: 'code',
            label: 'Your Code Here',
            type: 'code',
            default: '',
            info: 'Add Your custom HTML Code below. You can also use the full screen icon to open a code editor and add your code',
        },
    ],
    blocks: [],
};