Handling Sections

Welcome to Tutorial 2 of the Fynd Platform Theme Development series. In this session, we will dive into creating and updating sections for a theme. Sections are reusable UI components that empower merchants to customize their storefronts easily.

1. What Are Sections?

Sections in the Fynd Platform are reusable React components stored in the sections folder of a theme. They are configurable through the theme editor, allowing merchants to adjust their settings without altering the code. Each section typically includes:

A Component: Defines the section's visual interface.
A Settings Object: Holds the configuration schema for the section​section-overview​settings-object.

2. Anatomy of a Section

Here’s an example of a basic section that displays an HTML paragraph:

import React from 'react';

export function Component({ props }) {
    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: [],
};

3. Adding a New Section

To add a new section:

Navigate to the sections folder in your theme directory.
Create a new file, e.g., custom-section.jsx.
Define both the Component and settings exports​section-overview​settings-object​section-pages.

4. Updating Section Settings

Use the settings object to define the configuration options. The object can include:

label: The name of the section in the editor.
props: Customizable properties of the section.
blocks: Define nested content or reusable units within a section.
Example:

export const settings = {
    label: "Custom Section",
    props: [
        {
            id: "title",
            label: "Title",
            type: "text",
            default: "Default Title",
            info: "Enter a title for the section.",
        },
        {
            id: "color",
            label: "Color",
            type: "color",
            default: "#000000",
            info: "Choose a color for the text.",
        },
    ],
    blocks: [
        {
            label: "Image",
            type: "image_picker",
            props: [
                {
                    id: "image",
                    label: "Image",
                    type: "image_picker",
                    default: "",
                    info: "Upload an image.",
                },
            ],
        },
    ],
};

5. Previewing Changes

To preview your section:

Upload the updated theme to the Fynd Platform.
Open the Theme Editor.
Add the section to a page and modify its settings to ensure all configurations work as expected​ section-pages.

6. Best Practices

• Use descriptive labels and IDs for props to ensure clarity in the Theme Editor.
• Keep the settings object structured and manageable by categorizing props when necessary.
• Test your sections extensively in the editor for both usability and responsiveness.

Conclusion

That's how you can create and update sections in a theme on the Fynd Platform. In the next tutorial, we will explore integrating global settings and configurations for more dynamic themes. Stay tuned!