Blog Filter
We will guide you on how to create the Blog filter by Article tag
From Shopify Admin Dashboard > Online Store > Themes > ... button > Edit code
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) .
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 %}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>Tags
