Config

The Config folder is the configuration engine of a Soppiya theme. It manages the relationship between the developer’s code and the merchant’s administrative interface. This folder contains the underlying logic for the Theme Settings area of the Visual Editor and handles the permanent storage of all design-related data.

---

Folder Location

Configuration files are stored in the /config directory at the root of the theme.

└── theme
    └── config
        ├── settings_schema.json   # Defines the Editor UI
        └── settings_data.json     # Stores saved merchant data

---

settings_schema.json

The settings_schema.json file serves as a blueprint for the Theme settings tab in the Soppiya Visual Editor. By modifying this file, developers define the specific inputs—such as color pickers, font selectors, and checkboxes—that allow a merchant to customize their brand identity without editing code.

File Structure

The file consists of an array of JSON objects, where each object represents a Category of settings.

note

Metadata Assignment: You can include a theme_info object within this file to display the theme's name, version, and developer contact details in the admin dashboard.

Technical Implementation Example

The following example creates a "Brand Styles" category with a color picker and a toggle for a sticky header:

[
  {
    "name": "Brand Styles",
    "settings": [
      {
        "type": "color",
        "id": "color_primary",
        "label": "Primary Brand Color",
        "default": "#00A5FF"
      },
      {
        "type": "checkbox",
        "id": "enable_sticky_header",
        "label": "Enable Sticky Header",
        "default": true
      }
    ]
  }
]

---

settings_data.json

The settings_data.json file acts as the database for the theme's configurations. While settings_schema.json defines the "questions," settings_data.json stores the "answers."

warning

Manual Edits: Although this file can be edited manually, it is primarily managed by the platform. Every time a merchant clicks Save in the Visual Editor, Soppiya automatically updates this file with the new values.

Data Organization

The data is typically organized into two main parent objects:

1. current: Stores the settings values for the theme as it currently appears on the storefront.
2. presets: Stores pre-defined variations of theme settings (e.g., a "Dark Mode" vs. a "Light Mode" configuration).

Technical Implementation Example

Based on the schema defined above, the corresponding data file would look like this:

{
  "current": {
    "color_primary": "#A80000",
    "enable_sticky_header": false,
    "sections": {
      "header": {
        "type": "header",
        "settings": {
          "menu": "main-menu"
        }
      }
    }
  },
  "presets": {
    "Classic Blue": {
      "color_primary": "#00A5FF",
      "enable_sticky_header": true
    }
  }
}

tip

Accessing Settings in Liquid: Values stored in this file are globally accessible throughout the theme using the settings object. For example: {{ settings.color_primary }}.

---

Developer Best Practices

• ID Uniqueness: Ensure every id within settings_schema.json is unique across the entire theme. Duplicate IDs will cause data collisions and unexpected behavior in the editor.
• Logical Grouping: Organize your schema into clear categories (e.g., Typography, Colors, Social Media). This improves the merchant's workflow and makes the store easier to manage.
• Default Values: Always provide sensible default values in your schema. This ensures the theme looks professional immediately upon installation, before the merchant has made any custom selections.

---

For details on how these settings are localized for different markets, proceed to the Locales documentation.