Global Configurations

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

To enhance the customization experience for merchants, you can utilize JSON to create settings that are accessible through the Fynd platform theme editor. By leveraging JSON, you can define and organize various theme settings in a structured format that can be easily modified by merchants. This allows them to customize the appearance and behavior of their themes without directly editing the underlying code. The JSON-based settings provide a user-friendly interface within the theme editor, empowering merchants to make personalized adjustments to their themes effortlessly.

Config files are related to theme settings. There are two config files:

• settings_data.json - This file hosts the saved values of the settings from settings_schema.json.
• settings_schema.json- This file contains all the theme-level global settings.

settings_data.json

The settings_data.json file serves as a container for the setting values in a theme. It allows you to define various settings that can be accessed and modified through the theme editor section of the Fynd platform.

For instance, you can include the following theme setting in the settings_data.json file to provide the merchant with the option to disable the cart:

{
  "name": "Disable Cart",
  "key": "disable_cart",
  "type": "boolean",
  "default": false,
  "description": "Enable or disable the cart functionality."
}

In this example, the setting is named "Disable Cart" and has a unique key of "disable_cart". It is defined as a boolean type, indicating that it has a true/false value. The default value is set to false, meaning the cart functionality is enabled by default. The description provides additional information about the setting's purpose.

By including this setting in the settings_data.json file, the merchant can access and toggle the cart functionality on or off directly from the theme editor section, providing them with greater control over their store's customization options.

config/settings_data.json

{
    "props": [
      {
        "type": "checkbox",
        "id": "disable_cart",
        "default": false,
        "category": "Cart",
        "label": "Disable Cart"
      }
    ]
}

Figure 1

This adds an entry for disable_cart in settings_data.json

      .....
         "custom": {
          "props": {
            "disable_cart": false
          }
        }
     .....

Anytime you change the value of disable_cart in the theme editor, settings_data.json is updated with the new value.

Basic Format:

The settings_data.json file has four parent objects:

• list : It contains current values of all page level settings and theme level settings.
• current : Contains current active settings name
• preset: Contains all the presets of the theme by their page name so that whenever someone creates a new theme all theme pages have some default pre-configured sections inside of them.
• information: General Information about the theme-like features and once you publish your theme on the Themes Marketplace it can be helpful to highlight your theme features.

Access this configurations inside theme:

This configuration will be passed as props as global_config you can use these details inside your theme.