Dynamic Sub Collections Display (Grid + Slider) in Collections template on shopify

1. Go to Shopify Dashboard > Metaobject > Create a metaobject definition. Use the following 👇 names.

Name: Collection Slider and the type will be collection_slider

Fields:

Single Line Text —> Name

File —> Image

URL —> Url

1. Add Entries i.e. Sub collections data
2. Go to Custom Data > Collections > Create a collection metafield 👇 and name it Subcollections.

Field: Metaobject ( Select the Subcollections metaobject here.)

Make it list of entries.

1. Now go to respective parent collection and add sub collections in meta fields
2. Go to Shopify Edit Code > Snippets > Add new snippet (Name: gm-collection-grid.liquid)

Add this code:

<style>
    .collection-grid-wrapper--gm {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.5rem;
        justify-content: center;
        padding: 20px 10px;
        max-width: 100%;
        margin: 0 auto;
    }
    .collection-grid-content--gm {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
    }
    .collection-grid-content--gm img {
        width: 150px;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        padding: 5px;
        border-width: 0px;
        border-style: solid;
        background: linear-gradient(rgb(219, 11, 11), rgb(251, 255, 0), rgb(231, 21, 6)) padding-box;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }
    .collection-grid-content--gm:hover img {
        transform: scale(1.1);
    }
    .collection-grid-content--gm p {
        font-size: 1.5rem;
        color: black;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    @media (max-width: 800px) {
        .collection-grid-wrapper--gm {
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 1rem;
        }
        .collection-grid-content--gm img {
            width: 96px;
        }
        .collection-grid-content--gm p {
            font-size: 1rem;
        }
    }
    @media (max-width: 540px) {
        .collection-grid-wrapper--gm {
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 0.8rem;
        }
        .collection-grid-content--gm img {
            width: 72px;
        }
    }
</style>
<div class="collection-grid-content--gm">
    <a href="{{ collection_url }}">
        <img src="{{ collection_image | image_url }}" loading="eager" alt="{{ collection_name }}" width="150" height="150">
        <p>{{ collection_name }}</p>
    </a>
</div>
6- Now Sections> Add new section (Name: gm-subcollections.liquid)
Add this code:
<div class="collection-grid-wrapper--gm">
  {% for subcollection in section.settings.subcollections %}
    {% render 'gm-collection-grid',
      collection_url: subcollection.url,
      collection_image: subcollection.image | image_url,
      collection_name: subcollection.name
    %}
  {% endfor %}
</div>
{% schema %}
{
  "name": "Bpers Collection Grid",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "metaobject_list",
      "id": "subcollections",
      "label": "Select Subcollections",
      "metaobject_type": "subcollections",
      "limit": 20
    }
  ],
  "presets": [
    {
      "name": "Bpers Collection Grid"
    }
  ]
}
{% endschema %}

1. Now go to customize > collection template > add section with name Bpers collection gird and set it to dynamic

Hurrah Done