Why is 'Error: Invalid JSON: unexpected token' coming up? (brand new to this!)

Question

enter image description hereThis is the first time i've tried to add code into my website so I'm very new to the whole thing... What I'm trying to do is add the 'how did you hear about us' question to the checkout process on my website.

Specifically, I'm having trouble trying to add a theme setting to my website using coding instructions from 'shopify developers'. In the configuration directory of 'Themes', after clicking on settings_schema.json , I follow instructions to add some code after the first curly bracket }, but when I do so and try hit save, the error message 'Invalid JSON: unexpected token' comes up. If anyone can help me that would be hugely appreciated! I'm pasting below the existing code, and below that the snippet of code I'm trying to insert. Just FYI I am using safari.

Does anyone have any idea?

Best, Cosmo

exisiting code

[
{
"name": "theme_info",
"theme_name": "Themekit template theme",
"theme_version": "1.0.0",
"theme_author": "Shopify",
"theme_documentation_url": "https:\/\/github.com\/Shopify\/themekit",
"theme_support_url": "https:\/\/github.com\/Shopify\/themekit\/issues"
}
]

new code I'm trying to insert

{
"name": "Hear About Us",
"settings": [
    {
        "type": "text",
        "id": "hau_form_options",
        "label": "Form options",
        "default": "Facebook, Twitter, Google, Instagram, Youtube",
        "info": "Separate each option with a comma"
    },
    {
        "type": "header",
        "content": "Form validation"
    },
    {
        "type": "checkbox",
        "id": "hau_form_validation",
        "label": "Enable form validation",
        "default": true
    },
    {
        "type": "text",
        "id": "hau_error_message",
        "label": "Error message",
        "info": "The error message that is displayed when no selection is made",
        "default": "Please select an option below"
    },
    {
        "type": "text",
        "id": "hau_error_message_other",
        "label": "Other field error message",
        "info": "The error message that is displayed when there is no input in the 'Other' field",
        "default": "Please fill the text field below"
    },
    {
        "type": "header",
        "content": "Error styling"
    },
    {
        "type": "color",
        "id": "hau_error_color",
        "label": "Color",
        "default": "#ff0000"
    }
]
},

Ari Stehney Ari Stehney · Accepted Answer · 2021-02-16T18:51:09

I checked the JSON using JSONLint, and it looks like the trailing comma on the end is messing it up.

EDIT: I see the image now, the comma needs to be added before since you are adding it to an Array.

[{
        "name": "theme_info",
        "theme_name": "Themekit template theme",
        "theme_version": "1.0.0",
        "theme_author": "Shopify",
        "theme_documentation_url": "https:\/\/github.com\/Shopify\/themekit",
        "theme_support_url": "https:\/\/github.com\/Shopify\/themekit\/issues"
    },
    {
        "name": "Hear About Us",
        "settings": [{
                "type": "text",
                "id": "hau_form_options",
                "label": "Form options",
                "default": "Facebook, Twitter, Google, Instagram, Youtube",
                "info": "Separate each option with a comma"
            },
            {
                "type": "header",
                "content": "Form validation"
            },
            {
                "type": "checkbox",
                "id": "hau_form_validation",
                "label": "Enable form validation",
                "default": true
            },
            {
                "type": "text",
                "id": "hau_error_message",
                "label": "Error message",
                "info": "The error message that is displayed when no selection is made",
                "default": "Please select an option below"
            },
            {
                "type": "text",
                "id": "hau_error_message_other",
                "label": "Other field error message",
                "info": "The error message that is displayed when there is no input in the 'Other' field",
                "default": "Please fill the text field below"
            },
            {
                "type": "header",
                "content": "Error styling"
            },
            {
                "type": "color",
                "id": "hau_error_color",
                "label": "Color",
                "default": "#ff0000"
            }
        ]
    }
]

Why is 'Error: Invalid JSON: unexpected token' coming up? (brand new to this!)

1 Answers