How To Add Collection In Circular Carousel Slider Section in Shopify by Custom Coding

1. Log in to your Shopify backend & go to “Online Store” and click “Customize” on your chosen theme.
2. In the backend, click on the three dots and select “Edit Code.”
3. Create a new section named – circle_collection.liquid
4. Paste the bellow code, and save the section

<style>
@media only screen and (max-width: 600px){._circle_img img{width:60px;}
._circle_icon{gap:13px !important;justify-content: flex-start !important;}
  </style>
<div class=" icon_circle_parent icon_circle-{{ section.id }}" style="padding-top:15px; padding-bottom:15px; padding-top: 10px; padding-bottom: 10px;" >
{% if section.settings.is_icon_enable %}
    <style>
      ._circle_icon{display:flex; justify-content: center; align-items: center; gap:40px; flex-wrap: nowrap; overflow: auto;}
      ._circle_img img{border-radius:100%;width:80px;}
      ._circle_img{display: flex; flex-direction: column; justify-content: center; align-items: center;}
      ._collection_title{font-size: 12px; font-weight: 600;}
      </style>
    <div class="_circle_icon page-width">
  {% for block in section.blocks %}
    {% assign _circle_collection = block.settings.circle_collection %}
    {% assign _collections =  collections[_circle_collection] %}
    <div class="_circle_img" >
    <a href="{{_collections.url}}">
    <img src={{ _collections.featured_image | img_url }}>
      </a>
      <span class="_collection_title">
        {% unless block.settings.cutome_title_circle == blank %}
        {{ block.settings.cutome_title_circle }}
          {% else %}
          {{ _collections.title }}
        {% endunless %}
      </span>
    </div>
{% endfor %}
</div>
{% endif %}
</div>
{% schema %}
  {
    "name": "Circle Collection",
    "settings": [
      {
        "type": "text",
        "label": "Title",
        "id": "icon_title"
      },
      {
        "type": "checkbox",
        "label": "Enable Circle Icon",
        "id": "is_icon_enable"
      }
    ]
    ,"blocks": [
     {
       "type": "circle-icon",
       "name": "circle Icon",
       "settings":[
         {
           "type": "collection",
           "label": "Select Collection",
           "id": "circle_collection"
         },
          {
           "type": "text",
           "label": "Custom Collection Name",
           "id": "cutome_title_circle"
         }
       ]
       
     }
    ],
    "presets": [
      {
        "name": "Circle Collection"
      }
    ]
  }
{% endschema %}

Its Show look like this type