Why can't I see the new section I created in theme customization?

Technical Q&A

Topic summary

A Shopify theme developer created a new section with a checkbox setting but cannot see it in the theme customization interface.

The Issue:

  • The section includes breadcrumb functionality with metafield references
  • Contains settings for a checkbox (show_breadcrumbs) and color scheme selector
  • The schema appears partially corrupted or reversed in the posted code

Solution Provided:

  • Missing presets array at the end of the schema definition
  • Presets are required for sections to appear in the theme customization panel
  • The responder provided corrected schema code showing proper structure with presets array containing a name field

Technical Note:
The posted code contains formatting issues (reversed/garbled text in places), making it difficult to verify complete accuracy, but the core problem is the absence of the presets configuration that Shopify requires to display custom sections in the editor.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello, I created a new section but i don’t see it. It’s a simply checkbox, why I can’t see it in the theme customization? This is the code, where did I go wrong?

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
{%- endstyle -%}

{%- if section.settings.show_breadcrumbs -%}
  
    

      
      

        
            {% if collection.metafields.custom.categoria_1 != blank %}{{ collection.metafields.custom.categoria_1 }}{% endif %}
        
        
            {% if collection.metafields.custom.categoria_2 != blank %} {% endif %}
        
        
            {% if collection.metafields.custom.categoria_2 != blank %} {{ collection.metafields.custom.categoria_2 }}{% endif %}
        
        
            {% if collection.metafields.custom.categoria_3 != blank %}{% endif %}
        
        
            {% if collection.metafields.custom.categoria_3 != blank %} {{ collection.metafields.custom.categoria_3 }}{% endif %}
        
      

    

  

{%- endif -%}
              
{% schema %}
{
  "name": "breadcrumbs",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_breadcrumbs",
      "default": true,
      "label": "show_breadcrumbs"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "all.colors.label"
    }
  ]
}
{% endschema %}
2

At the end of your settings, you need presets for the sections to show:

{% schema %}
{
  "name": "breadcrumbs",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_breadcrumbs",
      "default": true,
      "label": "show_breadcrumbs"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "all.colors.label"
    }
  ],
  "presets": [
    {
      "name": "Breadcrumbs"
    }
  ]
}
{% endschema %}