How to create reusable component-like "collection blocks"

[eduardocoello]

I want to create a "collection block" schema where a merchant would be able to select up to 2 collections and display them on their homepage. At the moment this isn't possible for me and I always end up crashing the theme, having to re-upload the code theme and accessing through the CLI with a different theme-id.

The collection should be able to display 8 items in total, I made a snippet where all the html and css structure is layed out. In my example, "dynamic-collection" is the snippet (snippets/dynamic-collection.liquid)

<section class="dynamic-collection">

    {% include 'dynamic-collection' with collection_title: collection.title, collection_products: collection.products %}

</section>

As i said i always end up crashing the theme this is the schema I've used.

{% schema %}

    {

        "name": "Colección Home",

        "blocks": [

            {

                "name": "Collection block",

                "type": "collection",

                "settings": [

                    {

                        "type": "collection",

                        "id": "collection_id",

                        "label": "Seleccionar colección"

                    }

                ]

            }

        ],

        "max_blocks": 2

    }

{% endschema %}

This next one does not crashes the theme.
Im looking to find something similar than "max_blocks" where I can let the merchant select more than 1 at least.

{% schema %}

    {

        "name": "Colección Home",

        "settings": [

            {

                "type": "collection",

                "id": "collection_id",

                "label": "Select collection"

            }

        ]

    }

{% endschema %}

But maybe these "block collections" aren't possible? I asked the following to the AI and it said the following:

me: "is there a type for collections in shopify blocks?"
ai: "In Shopify, blocks within sections can't directly handle collections. You'd typically use a collection section to display products grouped in collections. For more on sections, check this guide."

Would appreciate any help on this!

Thanks.

[eduardocoello]

Btw, this is the error message I get (screenshot is in spanish) https://imgur.com/31DhKQY

[ProtoMan44]

@eduardocoello thanks for posting here.
please add preset in the section schema.

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

Here is the schema code you can use this schema code and create html and CSS, JS code according to schema with responsive.

{% schema %}
  {
    "name": "Collection list ",
    "class": "index-section",
    "max_blocks": 15,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Collection list"
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      },
      {
        "type": "range",
        "id": "per_row",
        "label": "Collections per row",
        "default": 4,
        "min": 2,
        "max": 6,
        "step": 1
      }
    ],
    "presets": [{
      "name": "Collection list",
      "blocks": [
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        },
        {
          "type": "collection"
        }
      ]
    }],
    "blocks": [
      {
        "type": "collection",
        "name": "Collection",
        "settings": [
          {
            "id": "collection",
            "type": "collection",
            "label": "Collection"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Title"
          }, 
          {
            "type": "image_picker",
            "id": "collection_image",
            "label": "Image"
          }
            ]
          }
        ]
      }
    ]
  }
{% endschema %}

Hope this helps.

Regards,

San