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: [],
};

Section chunking

A theme can also split each section into its own JavaScript bundle. The theme engine then loads only the chunks that the current page uses.

A chunked section has two more requirements:

• The section file must add a default export, next to the Component and settings named exports.
• The section file name must use kebab case, and must not contain the word section.

Read Section Chunking for the packages, the feature flag, and the build steps.