Config

The config is a crucial part of your theme's architecture, as it defines various settings and parameters that help your theme function properly and efficiently. Your theme's config consists of the primary file: settings_schema.json. This file should be located in the config directory of your theme.

settings_schema.json

settings_schema.json is a JSON file that describes the structure and available options for the theme's settings. It defines the fields that can be customized by the store owner in the theme editor, such as colors, fonts, and layout options. Each field has a unique key, a data type, and various options or properties.

The schema serves as a blueprint for the theme settings, which are stored and managed in the database. When the store owner customizes their theme through the theme editor, the values are saved in the database and then retrieved and applied when the theme is rendered.

Here's an example of a settings_schema.json file:

[
  {
    "name": "Colors",
    "settings": [
      {
        "type": "color",
        "id": "primary_color",
        "label": "Primary color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "secondary_color",
        "label": "Secondary color",
        "default": "#ffffff"
      }
    ]
  },
  {
    "name": "Typography",
    "settings": [
      {
        "type": "font",
        "id": "body_font",
        "label": "Body font",
        "default": "Arial, sans-serif"
      },
      {
        "type": "font",
        "id": "heading_font",
        "label": "Heading font",
        "default": "Verdana, sans-serif"
      }
    ]
  },
  {
    "name": "Layout",
    "settings": [
      {
        "type": "range",
        "id": "content_width",
        "label": "Content width",
        "min": 800,
        "max": 1600,
        "step": 100,
        "unit": "px",
        "default": 1200
      }
    ]
  }
]

See Input settings for more details.

Usage

To use the settings defined in your settings_schema.json file within your theme templates, you can access them using the settings object. The settings object is automatically created by the theme engine and contains the values of the settings defined in the settings_schema.json file. Each setting can be accessed using its unique id as a property of the settings object.

You can access these settings in your theme templates like this:

<style>
  body {
    background-color: {{ settings.primary_color }};
    color: {{ settings.secondary_color }};
  }
</style>

The above Liquid code snippet will generate CSS code that sets the background color and text color of the page using the values defined in the settings_schema.json file. When the store owner customizes their theme, the updated values are automatically applied to the theme, updating the appearance of the store.

Remember to use the correct Liquid syntax for accessing the settings object and its properties. If you need to access the setting value within a Liquid tag, use double curly braces {{ }}. If you need to access the setting value within a Liquid control structure, use a single curly brace and a percentage sign {% %}.

By using the settings defined in settings_schema.json within your templates, you allow the store owner to have greater control and flexibility in customizing their store's appearance and functionality.