Build Your Course The Easy Way
Get Started Free

Theme Settings

In this article:

One way to make using your Theme an amazing experience is to allow for customizable Theme Settings. Theme Settings can be configured for both Site and Product Themes.

The Theme Settings Editor is accessible by the Site Owner by editing either a Site or a Product, clicking the Appearance tab, then clicking Customize on any Themes.

Configuring Theme Settings

Your Theme's Theme Settings are configured in the settings_schema.json file, which is located in the config folder of your Theme.

Element Type Info Properties (* = required)
checkbox Displays a checkbox within the Theme Settings, allowing for a Boolean true / false setting. *id, *label, info, default
header Defines and displays a Header within a section. (You can define a 'subheading' style with the style property. ex: "style": "subheading") *content, style
divider Creates space between elements or sections in the Theme Editor. n/a
image Allows user to upload image to the assets folder. The id must contain the filetype extension (ex. 'background.jpg'). If the user uploads a file with a different file extension, it will automatically be converted to the filetype defined in the id. *id, *label, info, fit, width, height
select Displays a select box of defined options for the user to choose from. Elements defined within options have definable properties, label and value, both of which are required. *id, *label, info, default, options
text A simple, single-line text field for the user to input his or her own copy. *id, *label, info, default
textarea Multi-line text field for the user to input his or her own copy. *id, *label, info, default
rich_text Multi-line text field with formatting and font-style settings. *id, *label, info, default
oembed_video A text field for inputting the URL of a video. *id, *label, info, default
link_list A select box for selecting a list from the Site's "Link Lists" section. Link list select options are automatically generated. *id, *label, info, default
form A select box for selecting a form from the Site's "Forms" section. Form select options are automatically generated. *id, *label, info, default
color Allows for the input of an HTML / CSS color value, either via a text input or via the color picker. Values can be either rgba or hexadecimal. *id, *label, info, default
url Allows for the input of a valid URL. *id, *label, info, default
product Creates a dropdown allowing for a selection of a particular Product. (Only available within a Product Theme.) *id, *label, info, default
action Creates a dropdown allowing for selection of a particular action. (The default must be a valid URL.) *id, *label, info, default

Example settings_schema.json

[ { "name": "General", "elements": [ { "type": "header", "content": "General" }, { "type": "divider" }, { "type": "select", "label": "Font Family", "id": "font_family", "default": "Work Sans", "options": [ { "label": "Work Sans", "value": "Work Sans" }, { "label": "Open Sans", "value": "Open Sans" } ] } ] }, { "name": "Marquee", "content": [ { "type": "header", "content": "Marquee" } { "type": "divider" }, { "type": "header", "content": "Text", "style": "subheading" }, { "type": "divider" }, { "type": "text", "id": "marquee_title", "label": "Marquee Title", "default": "My Site" }, { "type": "textarea", "id": "marquee_subtitle", "label": "Marquee Subtitle", "default": "Where dreams come true." }, { "type": "divider" }, { "type": "header", "content": "Branding", "style": "subheading" }, { "type": "image", "id": "marquee_background.jpg", "label": "Marquee Background Image" }, { "type": "color", "id": "color_marquee_text", "label": "Marquee Text Color", "default": "#ffffff" } ] } ]

Accessing Theme Settings

Theme Settings can be accessed in Liquid via the settings object. There are two ways to access specific settings, via the "dot" syntax ( {{}}), or the hash syntax ({{ settings[id] }}). One benefit to using the hash syntax is that you can pass in an assigned variable.

[ { "name": "Greeting", "elements": [ { "type": "header", "content": "Greeting" }, { "type": "divider" }, { "type": "checkbox", "label": "Show True Greeting", "id": "show_true_greeting", "default": "true" }, { "type": "text", "label": "True Greeting", "id": "true_greeting", "default": "This is the True Greeting" }, { "type": "text", "label": "False Greeting", "id": "false_greeting", "default": "This is the False Greeting" } ] } ]

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Need Help? Live Chat with Us.