How To Add Collection In Circular Carousel Slider Shopify?

How To Add Collection In Circular Carousel Slider Shopify? In This Post, We will Learn How To Add a Collection In the Circular Carousel Slider Shopify. There is no Coding knowledge required for this you just have to follow the steps and you can add a circular collection to your Shopify store and it’s free.

Step 1: Get into Shopify Admin
Sign in to your Shopify admin account.
On the Dashboard, look for Online Store in the menu on the left.
Select Themes.

Step 2: Change the Code
In the Themes area, spot your current theme and click Actions (it’s next to the theme’s name).
Pick Edit Code from the menu that drops down.

Step 3: Find the Sections Folder
When the code editor opens look for the Sections folder in the sidebar on the left.
Click Sections to open it up.

Step 4: Create a New Section
At the top of the Sections folder, click the Add a new section button.
In the window that pops up, enter a name for your new section (for example, custom-section) and click Create Section.

Step 5: Paste the Code In Your Liquid File Given below

<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 %}

Step 6: Save the Section

Step 7: Add the Section to Your Theme With named Devdesire Circle Collection

For better understanding, you Can watch our YouTube Video Given Below