I am creating a new custom theme using the skeleton framework generated by the Shopify CLI to start. I have a Color scheme option in my theme settings and have a single “scheme-1” scheme defined in my settings_data.json file. When I run Shopify theme dev in the CLI and and interact with the theme editor through the links provided, everything works as expected however when I then upload my theme to the store and try to edit using the theme editor, it tells me…
and
I have tried connecting the theme to a GitHut repo, uploaded the theme via zip file and pushed the theme using the CLI. The color schemes in the theme only work when I’m working locally for some reason. When the theme is uploaded to the store, I have looked at the code through the Shopify dashboard and can confirm the same data is in the settings_data and settings_schema files so it’s not an issue with the upload. I’ve checked my theme with CLI’s theme check and there are no errors.
I’ve made many custom themes before and never had this issue so I’m wondering if Shopify has maybe changed something or is enforcing some strict formatting that I’m not aware. I just don’t get why it works locally though the CLI but breaks when uploaded. Anyone have any ideas?
Here is my settings_data.json file if it helps
{
"current": {
"color_schemes": {
"scheme-1": {
"settings": {
"background": "#ffffff",
"text": "#000000",
"headings": "#000000",
"links": "{{ shop.brand.colors.primary[0].background }}",
"primary_button": "{{ shop.brand.colors.primary[0].background }}",
"primary_button_text": "{{ shop.brand.colors.primary[0].foreground }}",
"primary_button_hover": "{{ shop.brand.colors.primary[0].foreground }}",
"primary_button_text_hover": "{{ shop.brand.colors.primary[0].background }}",
"primary_button_border": "{{ shop.brand.colors.primary[0].background }}",
"secondary_button": "{{ shop.brand.colors.secondary[0].background }}",
"secondary_button_text": "{{ shop.brand.colors.secondary[0].foreground }}",
"secondary_button_border": "{{ shop.brand.colors.secondary[0].background }}",
"secondary_button_hover": "{{ shop.brand.colors.secondary[1].background }}",
"secondary_button_text_hover": "{{ shop.brand.colors.secondary[0].foreground }}",
"disabled_button": "#dddddd",
"disabled_button_text": "#333333",
"disabled_button_border": "#333333",
"field_background": "#ffffff",
"field_text": "#000000",
"field_placeholder": "#dddddd",
"field_border": "#dddddd",
}
}
}
}
}
Don’t know if it’s an extract or not but the last color schema line with a comma might prevent saving.
I’ve run into this same issue just now. It seems like a new bug where the preview theme that gets created when in dev mode is not copying over the settings_schema.json file, because when I edit the code that file is empty 
.
Manually copying over the settings_schema.json file from my live theme did not solve the issue.
Oh man. @teamdijon you were 100% correct. I wasn’t having any issues with saving and @williamwong, I did confirm that my settings_data.json was syncing over so mine wasn’t blank like your was. But yeah, if you’re previewing the theme using Shopify theme dev in the CLI, it works with and without that last item having a trailing comma but if you want to have it work as a published theme in the Shopify store, you have to remove the trailing comma on the last item.
I would have never thought of that. Strange the Shopify’s Theme Check doesn’t flag that. Thanks so much for the input. Problem solved I guess. Shopify, you may want to make this consistent moving forward to avoid this confusion.
1 Like
It got better but yeah it happens that the JSON fails silently. I guess that’s why I spotted it directly ahah. One trick I have is to copy paste the JSON inside https://jsonformatter.curiousconcept.com/ or your favorite LLM and ask it to check for you. Number of times it helped me in the past !
