Blog Filter & Articles Search

Blog Filter

We will guide you on how to create the Blog filter by Article tag

• Step 1

From Shopify Admin Dashboard > Online Store > Themes > ... button > Edit code

• Step 2

Search or Scroll the file list on the left to find the file name "main-blog.liquid" within Snippets. (Depending on your store's theme, it will have different files. We will guide based on Dawn theme structure) .

• Step 3

Add the code below to the line#24

{% if blog.tags.size > 0 %}
      <div class="blog-filter">
        <div class="list-group">
          <ul id="BlogTagFilter" class="tag-list">
            <li>Filter by:</li>
          <li>
            <a href="{{ blog.url }}" class="button">
              {{ 'All Topics' }}
            </a>
          </li>
            {% for tag in blog.all_tags %}
            <li>
              <a href="{{ blog.url }}/tagged/{{ tag | handleize }}" class="button">
              {{ tag }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}

• Step 4

Also you can add CSS style, it's additional

<style>
  .list-group {
    text-align: center;
  }
  ul#BlogTagFilter {
	list-style: none;
	padding-top: 10px;
	}
  ul#BlogTagFilter li {
	display: inline;
    margin: 5px;
	}
</style>

Idea from "00Sarah00"

Blog Search bar

Using below code

<form method="get" action="/search">
    <input type="hidden" name="type" value="article" />
    <input type="text" name="q" />
    <input  type="submit" value="Search" />
</form>