Shopify Theme Development - Main Menu schema (invalid JSON in schema) - json

Question

For the last two weeks I've been taking a Shopify theme developer course and started developing my very own theme in Shopify. However, I have encountered a couple of strange problems. I currently have a header that contains a slideshow, where I can select images from the Shopify Customizer. However, I also need to display the main menu, and this is where the problem is. I have tried to add my menu in the schema like this:
{% schema %}
{
"name": "Main Menu",
"settings": [
{
"type": "link_list",
"id": "main_linklist",
"label": "Menu",
"default": "main-menu"
}
]
},
{
"name": "Homepage Carousel",
"settings": [
{
"type": "image_picker",
"id": "slide-1",
"label": "Slide 1"
},
{
"type": "image_picker",
"id": "slide-2",
"label": "Slide 2"
}
]
}
{% endschema %}
The error that I'm getting is 'Invalid JSON in tag 'schema'. I have also tried to make to schemas, but I quickly found out that this did not work. Can anyone point me in the right direction here? It has been driving me crazy for two days now, and I honestly can't find a fix for it.

Answer 1

You combining settings_schema.json and section {% schema %} logic, which is a "No no".
This is how a standard settings_schema.json should look like:
[
{
"name": "theme_info",
"theme_name": "Theme",
"theme_author": "N/A",
"theme_version": "1.0.0",
"theme_documentation_url": "https://help.shopify.com/manual/using-themes",
"theme_support_email": "theme-support#shopify.com"
},
{
"name": "General",
"settings": [
{
"type": "header",
"content": "Favicon"
},
{
"type": "image_picker",
"id": "favicon",
"label": "Favicon"
}
]
},
{
"name": "Social media",
"settings": [
{
"type": "header",
"content": "Social sharing image"
},
{
"type": "image_picker",
"id": "share_image",
"label": "Image"
}
]
},
{
"name": "Footer",
"settings": [
{
"type": "richtext",
"id": "copyright",
"label": "Copyright",
"info": "Use [year] to set the current year."
}
]
}
]
And this is how should a section {% schema %} look like.
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "header",
"type": "text",
"label": "Header",
"default": "Hello world"
},
{
"id": "content",
"type": "textarea",
"label": "Content"
}
],
"blocks": [
{
"type": "quote",
"name": "Quote",
"settings": [
{
"id": "content",
"type": "text",
"label": "Quote"
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
}
]
}
{% endschema %}
So to summarize you need to learn the difference between a settings_schema.json syntax and the section {% schema %} syntax.
At the moment I'm not sure if you are making your options inside the settings_schema.json or you are making a separate section. In both cases you need to fix the schema syntax.
If you are using the settings_schema.json there is no {% schema %} around the json.
If you are using a section {% schema %} you are allowed for only one object (if it's not a block):
{
"name": "Main Menu",
"settings": [
.....
]
}
Read the section docs: https://help.shopify.com/en/themes/development/sections
And the settings_schema docs: https://help.shopify.com/en/themes/development/theme-editor/settings-schema