Adding search bar and tabs in blogpage

Shopify Discussion
,
1

Hey everyone! :waving_hand:

Screenshot 2025-10-07 155720
Screenshot 2025-10-07 1557201920×862 117 KB

Does anyone know how to create something like this?
It’s a blog page where they’ve added a search bar and tabs (like All Posts, Benefits, Learn, Recipes, etc.) to separate blog posts. I really love this layout and want to recreate it for my store — but I can’t figure out how to do it. :sweat_smile:

I’m currently using the Atelier theme, and since I’ve just launched my store and haven’t made any sales yet, I’m hoping to find a free app or method to achieve this look.

If anyone has suggestions, tutorials, or knows an app that can help me add a search bar + blog category tabs, I’d really appreciate it! :folded_hands:

#blogpagecustomisation #blogdesign

2

Hi @Preet232
Using tags this can be achieved as Shopify doesn’t have built‑in “categories” for blogs.

Add tags to each blog post — Benefits, Learn, Recipes, etc., On the blog listing page, show all distinct tags and make them clickable filters

In your theme code above the post loop add below code:

{% assign blog_tags = blog.all_tags %}

All {% for tag in blog_tags %} {{ tag }} {% endfor %}

And For search bar, add below code above tabs code

Search

Use below css code for styling:
.blog-filter-tabs .tab-link {
padding: 0.5em 1em;
text-decoration: none;
color: #333;
}

.blog-filter-tabs .tab-link.active {
background-color: #000;
color: #fff;
}

You can follow below URL for further assistance:

3 
{% assign blog_tags = blog.all_tags %}
<div class="blog-filter-tabs">
  <a class="tab-link {% if current_tags == blank %}active{% endif %}" href="{{ blog.url }}">All</a>
  {% for tag in blog_tags %}
    <a class="tab-link {% if current_tags contains tag %}active{% endif %}"
       href="{{ blog.url }}/tagged/{{ tag | handleize }}">
      {{ tag }}
    </a>
  {% endfor %}
</div>

 And For search bar, add below code above tabs code
 <form role="search" method="get" action="/search">
  <input type="search" name="q" placeholder="Search blog posts…" value="{{ search.terms }}">
  <input type="hidden" name="type" value="article">
  <button type="submit">Search</button>
</form>

Code missed in above message.