Shopify theme editor crashing after creating sections for the homepage

Question

I'm trying to create a Gallery section for shopify using liquid and Schema. After working a bit on the code, the theme editor renders unresponsive or crashes. I've tried deleting the theme I'm editing, and publishing a backup but the backup theme's editor also crashes (even though the new sections does not even exist on that version).

After a day or two it seems to be working fine, but if I create another section to test, it goes unresponsive again. Don't really know what I'm missing here. At first, Shopify support told me it was on their side, but it is not, because it happens when I create a new section. Their solution was to update my theme which is not happening because I've donde extensive customization and theme versioning is terrible with Shopify. Anyways, here's the section I'm trying to create:

<div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">
    {% for block in section.blocks %}

        <div class="image-wrap" style="background-image: url('{{ block.settings.image | img_url: '500x500' }}');">
        <h3>{{ block.settings.mention-text }}</h3>
        </div>
        
    {% endfor %}
</div>


{% schema %}
{
    "name": "Galeria",
    "settings": [
        {
            "type": "select",
            "id": "per-row",
            "label": "Images per row",
            "options": [
                {
                    "value": "49.5%",
                    "label": "2 per row"
                },
                {
                    "value": "33%",
                    "label": "3 per row"
                },
                {
                    "value": "24.5%",
                    "label": "4 per row"
                }
            ],
            "default": "24.5%"
        },
        {
           "type": "select",
           "id": "height",
           "label": "Image Height",
           "options": [
               {
                "value": "100px",
                "label": "100px"
               },
               {
                "value": "200px",
                "label": "200px"
            },
            {
                "value": "300px",
                "label": "300px"
            },
            {
                "value": "410px",
                "label": "450px"
            },
            {
                "value": "500px",
                "label": "500px"
            }
           ],
           "default": "500px"
        }
    ],
    "blocks": [
    {
        "type": "image",
        "name": "Image Block",
        "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "Image"
                },
                {
                    "type": "text",
                    "id": "mention_text",
                    "label": "Mention user",
                    "placeholder": "@"
                }
            ]
        }
    ],
    "presets": [
        {
            "category": "Galeria",
            "name": "Galeria"
        }
    ]
}
{% endschema %}
{% style %}

.image-wrap {
    display: inline-block;
    width: {{section.settings.per-row}};
    height: {{section.settings.height}};
    background-size: 100%;
}

.page-width.galeria-testimonial {
    width: 90%;
    margin: 0 auto;
}

{% endstyle %}

Answer 1

I believe you need to delete the section info from your settings_data.json file. All your sections created has JSON objects stored here that is at times not removed upon file deletion and you need to manually delete it. I suggest if you open that file and look for Galeria and delete the json object for that section.

This article can help in your understanding of themes.

An additional suggestion is to begin versioning your theme outside of Shopify you can have a versioning and use staging themes to test new features/changes in order for better version control and testing without the hassle of messing up your live site.