How to create reusable component-like "collection blocks"

How to create reusable component-like "collection blocks"

eduardocoello
Tourist
9 2 2
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.
Replies 3 (3)

eduardocoello
Tourist
9 2 2

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

ProtoMan44
Shopify Partner
495 43 80

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

- A thirsty developer passionate about supporting the community. If you'd like to, you can  

Buy me a Coffee.


- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

 - 

Chat On Whatsapp


Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

INA_MSWEB
Shopify Partner
1228 142 156

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

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin