---

Theme Sections

• Imports: This is where you can import CSS styles, triggers, and other pages that you want to include in your theme.
• Type: Defines the type of the section, which is usually a container for grouping other elements.
• ClassName: This is a CSS class that is applied to the section for styling purposes.
• InitialUiState: This object allows the theme developer to set the initial UI state of the theme, such as which sections are shown or hidden when the theme loads.

Core Syntax

• Container: The fundamental building block of the theme, used to group together elements like text, images, and other containers.
• Sections: These are individual parts of the container, which can include titles, descriptions, and other content.
• Order: Defines the order in which the sections appear within the container

Each section typically follows this structure:

{
    "type": "container",
    "className": "section-class",
    "sections": {
        "section-id": {
            "type": "container",
            "className": "question",
            "sections": {
                "title": {
                    "type": "text",
                    "text": "Localized Question Text",
                    "className": "title"
                },
                "description": {
                    "type": "text",
                    "text": "Localized Answer Text",
                    "className": "description"
                }
            },
            "order": ["title", "description"]
        }
    },
    "order": ["section-id"]
}

In this example, {{i18n.homePage.faqQuality.question1.question}} and {{i18n.homePage.faqQuality.question1.answer}} are placeholders that will be replaced with localized text based on the user’s language settings.

---