To add custom section under a collection which is same or separate for from list for each collection.

Adding Tags or Popular keywords under Collection Shopify

create a dynamic “Popular Searches” section on a Shopify store, displaying a list of clickable links based on the current collection’s settings. The section is configurable through the Shopify admin, allowing store owners to add, edit, or remove search links and associate them with specific collections.

HTML Structure:

				
					<div class="page-width popular-search-main">
   <!-- Heading Placeholder -->
  <div class="popular-search-wrap">
      <!-- List of tags is here --> 
  </div>
</div>

Liquid Logic for Displaying the Title

				
					// Heading Placeholder
{% for block in section.blocks %}
  {% assign collection_checkbox_id = current_collection %}
  {% if block.settings.tag_url and block.settings.tag_url != '' %}
    {% if block.settings[collection_checkbox_id] %}
      <h4>{{ section.settings.popular_searches }}</h4>
      <hr>
      {% break %}
    {% endif %}
  {% endif %}
{% endfor %}

This loop checks each block’s settings to determine if the current collection has any associated tags.
If a block with a non-empty tag_url is found and the current collection matches, it displays the section title (Popular Searches) and a horizontal line (<hr>).

Liquid Logic for Generating Search Links

				
					// List of tags
{% for block in section.blocks %}
  {% assign collection_checkbox_id = current_collection %}
  {% if block.settings.tag_url and block.settings.tag_url != '' %}
    {% if block.settings[collection_checkbox_id] %}
      <a class="searchlist-item" href="{{ block.settings.tag_url }}" target="_blank">
          {{ block.settings.title }}
          </a>
    {% endif %}
  {% endif %}
{% endfor %}

This loop iterates through the blocks again, checking if each block has a tag_url and if it matches the current collection.
For each matching block, it creates a link (<a>) with the class searchlist-item, pointing to the specified URL (tag_url) and displaying the title (title).

Schema Definition:

				
					{% schema %}
{
  "name": "Popular Searches",
  "settings": [
    {
      "type": "text",
      "id": "popular_searches",
      "label": "Popular Searches",
      "default": "Popular Searches"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "list_searches",
      "settings": [
        {
          "type": "url",
          "id": "tag_url",
          "label": "Tag URL"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "header",
          "content": "Select Collections"
        },
        {
          "type": "checkbox",
          "id": "menswear",
          "label": "Mens Wear",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "menswear-shirts",
          "label": "Menswear Shirts",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "menswear-tshirts",
          "label": "Menswear T Shirts",
          "default": false
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Popular Searches"
    }
  ]
}
{% endschema %}

The schema defines the structure and configuration options for this section.
It allows store admins to set the section title (popular_searches) and add multiple blocks, each representing a search link.
Each block includes settings for tag_url (the URL of the search link) and title (the displayed text).
Additionally, there are checkboxes for various collections (e.g., menswear, menswear-shirts), allowing the admin to specify which collections the link should appear for.

CSS Styling:

				
					<style>
  .popular-search-main {
    margin-top: 50px;
  }
  .popular-search-main hr {
    margin: 5px 0;
  }
  .popular-search-main h4 {
    margin-bottom: 12px;
  }
  .popular-search-wrap a:last-child {
    border: none;
  }
  .popular-search-wrap a {
    padding: 0 10px;
    margin: 5px 0px;
    border-right: 1px solid #aaa;
  }
  .popular-search-wrap {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }
</style>

The CSS styles define the appearance and layout of the popular-search-main and popular-search-wrap elements, including margin, padding, and border properties.
The links (<a>) are styled to have a right border, except for the last one, and are arranged flexibly within the container.

Entire script will look like:

				
					// sections/popular-searches.liquid
<div class="page-width popular-search-main">
   {% assign current_collection = collection.handle %}

   {% for block in section.blocks %}
      {% assign collection_checkbox_id = current_collection %}
      {% if block.settings.tag_url and block.settings.tag_url != '' %}
        {% if block.settings[collection_checkbox_id] %}
          <h4>{{ section.settings.popular_searches }}</h4>
          <hr>
          {% break %}
        {% endif %}
      {% endif %}
    {% endfor %}
  
  <div class="popular-search-wrap">    
    {% for block in section.blocks %}
      {% assign collection_checkbox_id = current_collection %}
      {% if block.settings.tag_url and block.settings.tag_url != '' %}
        {% if block.settings[collection_checkbox_id] %}
          <a class="searchlist-item" href="{{ block.settings.tag_url }}" target="_blank">{{ block.settings.title }}</a>
        {% endif %}
      {% endif %}
    {% endfor %}
  </div>
</div>

// schema for section url , title and collection options
{% schema %}
{
  "name": "Popular Searches",
  "settings": [
    {
      "type": "text",
      "id": "popular_searches",
      "label": "Popular Searches",
      "default": "Popular Searches"
    }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "list_searches",
      "settings": [
        {
          "type": "url",
          "id": "tag_url",
          "label": "Tag URL"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "header",
          "content": "Select Collections"
        },
        {
          "type": "checkbox",
          "id": "menswear",
          "label": "Mens Wear",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "menswear-shirts",
          "label": "Menswear Shirts",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "menswear-tshirts",
          "label": "Menswear T Shirts",
          "default": false
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Popular Searches"
    }
  ]
}
{% endschema %}

// style : you can modify as per requirement

<style>
  .popular-search-main {
    margin-top: 50px;
  }
  .popular-search-main hr{
    margin:5px 0;
  }
  .popular-search-main h4{
    margin-bottom:12px;
  }
  .popular-search-wrap a:last-child {
    border: none;
  }
  .popular-search-wrap a {
    padding: 0 10px;
    margin: 5px 0px;
    border-right: 1px solid #aaa;
  }
  .popular-search-wrap {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }
</style>

Add Section in Shopify