Skip to main content

Editor - Theme Configuration

Theme configuration allows you to customize theme settings without editing code. This guide covers the theme configuration system.

Configuration Overview​

Theme configuration is managed through:

  • Settings Schema (config/settings_schema.json) - Defines available settings
  • Settings Data (config/settings_data.json) - Stores current values
  • Visual Editor - UI for editing settings

Settings Schema​

The settings schema defines what settings are available:

{
  "sections": [
    {
      "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_picker",
          "id": "body_font",
          "label": "Body Font",
          "default": "Arial"
        },
        {
          "type": "range",
          "id": "font_size",
          "label": "Font Size",
          "min": 12,
          "max": 24,
          "default": 16,
          "unit": "px"
        }
      ]
    }
  ]
}

Setting Types​

Text​

Single-line text input:

{
  "type": "text",
  "id": "store_name",
  "label": "Store Name",
  "default": "My Store"
}

Textarea​

Multi-line text input:

{
  "type": "textarea",
  "id": "description",
  "label": "Description",
  "default": "Store description"
}

Number​

Numeric input:

{
  "type": "number",
  "id": "max_products",
  "label": "Max Products",
  "default": 12,
  "min": 1,
  "max": 100
}

Range​

Slider input:

{
  "type": "range",
  "id": "opacity",
  "label": "Opacity",
  "min": 0,
  "max": 100,
  "default": 50,
  "unit": "%"
}

Color​

Color picker:

{
  "type": "color",
  "id": "primary_color",
  "label": "Primary Color",
  "default": "#000000"
}

Select​

Dropdown selection:

{
  "type": "select",
  "id": "layout",
  "label": "Layout",
  "options": [
    { "value": "grid", "label": "Grid" },
    { "value": "list", "label": "List" }
  ],
  "default": "grid"
}

Checkbox​

Boolean toggle:

{
  "type": "checkbox",
  "id": "show_vendor",
  "label": "Show Vendor",
  "default": true
}

Radio​

Radio button group:

{
  "type": "radio",
  "id": "image_size",
  "label": "Image Size",
  "options": [
    { "value": "small", "label": "Small" },
    { "value": "medium", "label": "Medium" },
    { "value": "large", "label": "Large" }
  ],
  "default": "medium"
}

Image Picker​

Image selection:

{
  "type": "image_picker",
  "id": "logo",
  "label": "Logo"
}

Font Picker​

Font selection:

{
  "type": "font_picker",
  "id": "heading_font",
  "label": "Heading Font",
  "default": "Arial"
}

URL​

URL input:

{
  "type": "url",
  "id": "button_url",
  "label": "Button URL",
  "default": "/collections/all"
}

HTML​

HTML content:

{
  "type": "html",
  "id": "custom_html",
  "label": "Custom HTML"
}

Accessing Settings​

In Templates​

Access settings using settings object:

{{ settings.primary_color }}
{{ settings.store_name }}
{{ settings.show_vendor }}

In Snippets​

Settings available in all snippets:

{% if settings.show_vendor %}
  <span class="vendor">{{ product.vendor }}</span>
{% endif %}

In Sections​

Use settings in sections:

<section style="background-color: {{ settings.primary_color }};">
  <!-- Section content -->
</section>

Settings Data​

Current settings are stored in config/settings_data.json:

{
  "current": {
    "primary_color": "#000000",
    "secondary_color": "#ffffff",
    "store_name": "My Store",
    "show_vendor": true
  }
}

Visual Configuration​

Settings Panel​

The settings panel provides:

  • Organized sections
  • Visual controls
  • Live preview
  • Search functionality

Editing Settings​

  1. Open Settings panel
  2. Navigate to section
  3. Modify values
  4. Preview updates automatically
  5. Save changes

Setting Groups​

Settings organized by category:

  • Colors - Color scheme
  • Typography - Fonts and text
  • Layout - Page layout
  • Products - Product display
  • Cart - Shopping cart
  • Footer - Footer settings

Advanced Settings​

Conditional Settings​

Show settings based on other settings:

{
  "type": "checkbox",
  "id": "enable_custom_header",
  "label": "Enable Custom Header",
  "default": false
},
{
  "type": "text",
  "id": "header_text",
  "label": "Header Text",
  "default": "",
  "info": "Only shown if custom header is enabled"
}

Setting Dependencies​

{% if settings.enable_custom_header %}
  <div class="custom-header">
    {{ settings.header_text }}
  </div>
{% endif %}

Settings Validation​

Required Settings​

Mark settings as required:

{
  "type": "text",
  "id": "api_key",
  "label": "API Key",
  "required": true
}

Setting Validation​

Validate setting values:

{
  "type": "number",
  "id": "max_items",
  "label": "Max Items",
  "min": 1,
  "max": 100,
  "default": 10
}

Settings Best Practices​

1. Organize by Function​

Group related settings:

{
  "name": "Product Display",
  "settings": [
    { "id": "products_per_page" },
    { "id": "show_vendor" },
    { "id": "show_price" }
  ]
}

2. Provide Defaults​

Always provide default values:

{
  "id": "layout",
  "default": "grid"
}

3. Use Descriptive Labels​

Clear, descriptive labels:

{
  "id": "max_products",
  "label": "Maximum Products Per Page"
}

4. Add Help Text​

Provide context with info:

{
  "id": "api_key",
  "label": "API Key",
  "info": "Get your API key from the settings page"
}

Settings Examples​

Color Scheme​

{
  "name": "Color Scheme",
  "settings": [
    {
      "type": "color",
      "id": "primary_color",
      "label": "Primary Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "secondary_color",
      "label": "Secondary Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Accent Color",
      "default": "#ff0000"
    }
  ]
}

Typography​

{
  "name": "Typography",
  "settings": [
    {
      "type": "font_picker",
      "id": "heading_font",
      "label": "Heading Font",
      "default": "Arial"
    },
    {
      "type": "font_picker",
      "id": "body_font",
      "label": "Body Font",
      "default": "Arial"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading Size",
      "min": 16,
      "max": 48,
      "default": 24,
      "unit": "px"
    }
  ]
}

Search settings quickly:

  1. Use search box in settings panel
  2. Type setting name or label
  3. Results filtered instantly
  4. Click to navigate

Settings Export/Import​

Export Settings​

  1. Open settings
  2. Click "Export"
  3. Download JSON file
  4. Store for backup

Import Settings​

  1. Open settings
  2. Click "Import"
  3. Select JSON file
  4. Settings imported
  5. Preview updates

Next Steps​