The Advanced Settings section of the Theme Editor brings a JSON variable editor and inline documentation for hundreds of variables that are not currently included in the Theme Editor user interface.
📝 NOTE: Using theme variables requires an understanding of basic CSS and JSON formatting.
✔️ TIP: Refer to the article below to view all of the available theme variables:
The Advanced Settings panel
While editing a theme, click Advanced Settings in the right panel to display the variables panel.
The content in this panel will depend on the settings you've already changed in what we'll call the "visual editor," and will automatically be updated in both places whenever a change is made.
Preview Theme Variables changes
Changes made in the Advanced Editor will sync back and forth between the visual editor and the Advanced Editor; when adding a theme variable in the menu, you should see it immediately in the preview to the left. For example, as I modify the Primary Buttons options on the right, I'll see those changes reflected in the Primary Button on the left.
Inline documentation
Inline autocomplete and documentation has been added for the following sets of variables:
- banner
- titleBar
- userContent
By typing any of these, you should see the full set of documented variables for those components appear inline.
Update Theme Variables using the API
For some use-cases, it may make sense to have a technical resource update theme components using the API. All theme variables can be updated this way.
For more information, check out the article below:
Use Theme Variables with file-based themes
See developer documentation:
Troubleshooting
If you're getting an invalid JSON message, you may be missing a quote (“) or a comma somewhere.
- Every line except the last must finish in a comma.
Missing variables?
Wish a specific theme variable was available? Tell us about it by submitting an idea in the success community
