In order to add a new color to the color scheme in the Debut Shopify theme, there are at least 5 files that need to be updated:
- settings_schema.json
- settings_data.json
- base.css
- image.banner.liquid (or whatever section you’re updating)
- theme.liquid
The basic process is this:
- Add settings in settings_schema.json for the new color picker in theme configuration settings. This is what allows the visual web interface to ask for the data. Specify the color ID.
- Add properties in the settings_data.json file for the data values to be stored in both current and default forms. Use same ID as in settings_schema.json.
- Add the new color ID to the theme.liquid file to translate the hex code into RGB numbers and assign it to a variable.
- In the base.css file, create and assign the CSS class to the same variable used in theme.liquid AND add the CSS class to EVERY instance where you see other examples of other colors.
- Update the schema and CSS code in the image.banner.liquid (or whatever section you’re updating).
Here’s a visual:
