Theme editor

You can use the settings_schema.json file to configure the theme settings that merchants can access using the theme editor. A merchant accesses the editor by clicking Customize from the Themes page of their ShopBase admin
File format
The settings_schema.json file contains the definitions for your theme settings, grouped into sections according to the setting type.
The grouping of the settings in settings_schema.json is reflected in the theme editor.
There are two categories of theme setting:
Section settings: These control the settings that can be configured by merchants.
Sidebar settings: These are not configurable by the merchant. They control informational elements (headers and paragraphs), which you can use to add detail and clarity to the theme editor sidebar.
Current supported setting types:
Input (text, number, url, textarea)
{
	"id": "",
	"type": "input",
	"default": "",
	"placeholder": "",
	"maxLength": 100
}
Example:
{
	"id": "input",
	"type": "input",
	"placeholder": "Placeholder"
}
Image picker
{
	"id": "",
	"type": "image_picker",
	"info": ""
}
Example:
{
	"id": "logo",
	"type": "image_picker",
	"info": "Upload a logo"
}
Radio
{
	"id": "",
	"type": "radio",
	"default": 0,
	"options": []
}
Example:
{
	"id": "radio",
	"type": "radio",
	"default": 1,
	"options": [
		{
			"label": "Radio 1",
			"value": 1
		}
	],
}
Sections
Supported Types: image_picker, text, number, url, textarea, select, checkbox, radio, slider, help_text, label, heading, text_editor, collection, product, page, link, menu, video
{
	"icon": "",
	"label": "",
	"sections": [
		{
			"elements": [
			]
		},
		{
			"children": {
				"default": [],
				"elements": []
			},
			"label": "content",
			"max_items": 5,
			"options": {
				"btnAdd": "Add slideshow",
				"btnDelete": "Remove content",
				"heading": "Slideshow",
				"id": "title"
			}
		}
	]
}
Example:
{
  "icon": "image-multiple",
  "label": "Slideshow",
  "sections": [
    {
      "elements": [
        {
          "default": "fade_in",
          "id": "text_animation",
          "label": "Text animation",
          "options": [
            {
              "label": "None",
              "value": "none"
            },
            {
              "label": "Fade in",
              "value": "fade_in"
            },
            {
              "label": "Fade up",
              "value": "fade_up"
            },
            {
              "label": "Fade down",
              "value": "fade_down"
            }
          ],
          "type": "select"
        },
        {
          "default": "slide",
          "id": "gallery_transition",
          "label": "Gallery transition",
          "options": [
            {
              "label": "Fade",
              "value": "fade"
            },
            {
              "label": "Slide",
              "value": "slide"
            }
          ],
          "type": "select"
        },
        {
          "default": 6,
          "id": "change_slides_every",
          "label": "Change slides every",
          "max": 12,
          "min": 4,
          "type": "slider",
          "unit": "sec"
        },
        {
          "default": 30,
          "id": "opacity",
          "label": "Opacity",
          "max": 100,
          "min": 0,
          "type": "slider",
          "unit": "%"
        }
      ],
      "label": "setting"
    },
    {
      "children": {
        "default": [],
        "elements": [
          {
            "id": "background_image",
            "info": "1600x1000px recommended",
            "label": "Background image",
            "type": "image_picker"
          },
          {
            "id": "alt_text",
            "label": "Alt text",
            "placeholder": "Describe image to improve SEO",
            "type": "text"
          },
          {
            "default": "Introducing The",
            "id": "preheading",
            "label": "Preheading",
            "type": "textarea"
          },
          {
            "default": "Roller Shop Base Theme",
            "id": "heading",
            "label": "Heading",
            "type": "text"
          },
          {
            "default": "Exclusively From Shop Base",
            "id": "subheading",
            "label": "Subheading",
            "type": "textarea"
          },
          {
            "default": "centre",
            "id": "text_position",
            "label": "Text position",
            "options": [
              {
                "label": "Centre",
                "value": "centre"
              },
              {
                "label": "Right",
                "value": "right"
              },
              {
                "label": "Left",
                "value": "left"
              }
            ],
            "type": "select"
          },
          {
            "default": "centre",
            "id": "text_alignment",
            "label": "Text alignment",
            "options": [
              {
                "label": "Centre",
                "value": "centre"
              },
              {
                "label": "Right",
                "value": "right"
              },
              {
                "label": "Left",
                "value": "left"
              }
            ],
            "type": "select"
          },
          {
            "default": "Shop Men",
            "id": "first_button_label",
            "label": "First button label",
            "type": "text"
          },
          {
            "id": "first_button_link",
            "label": "First button link",
            "placeholder": "Paste a link or search",
            "type": "link"
          },
          {
            "default": false,
            "id": "highlight_first_button_link",
            "label": "Highlight first button label",
            "type": "checkbox"
          },
          {
            "default": "Shop Women",
            "id": "second_button_label",
            "label": "Second button label",
            "type": "text"
          },
          {
            "id": "second_button_link",
            "label": "Second button link",
            "placeholder": "Paste a link or search",
            "type": "link"
          },
          {
            "default": true,
            "id": "highlight_second_button_link",
            "label": "Highlight second button label",
            "type": "checkbox"
          }
        ],
        "label": "Slideshow"
      },
      "label": "content",
      "options": {
        "btnAdd": "Add slideshow",
        "btnDelete": "Remove content",
        "heading": "Slideshow",
        "id": "title"
      }
    }
  ]
}
Sidebar settings
Supported types: image_picker, text, number, url, textarea, select, color, checkbox, radio, slider, help_text, label, heading
{
    "schema": [
    ],
    "type": ""
}
Example:
{
  "schema": [
    {
      "content": "Currency",
      "warning": "",
      "info": "",
      "type": "heading"
    },
    {
      "default": true,
      "id": "enable_conversion",
      "label": "Enable currency conversion",
      "type": "checkbox"
    },
    {
      "label": "Even though prices are displayed in different currencies, orders will still be processed in your store's currency.",
      "type": "help_text"
    },
    {
      "default": "without",
      "id": "format_type",
      "label": "Format",
      "options": [
        {
          "label": "Without currency ($10)",
          "value": "without"
        },
        {
          "label": "With currency ($10 USD)",
          "value": "with"
        }
      ],
      "type": "select"
    },
    {
      "default": "USD CAD AUD GBP EUR JPY",
      "id": "support_currencies",
      "label": "Supported currencies",
      "type": "text"
    },
    {
      "content": "Use the country's ISO currency code. Separate your currency codes with a space.",
      "type": "help_text"
    },
    {
      "content": "Please note that the store currency always appears as an option on your store.",
      "type": "help_text"
    }
  ],
  "type": "currency"
}
Theme object, methods, and props
How to update configure for theme editor
Last modified 2yr ago
Copy link
On this page