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