Hey @JontiUK ,
As everyone has mentioned, either you can use a Shopify app or custom code this. I’m here to help you with the latter one - if you follow this step by step you’ll be able to add the filters to your blogs.
Step 1: Edit the main-blog.liquid file
- Go to: Admin → Online Store → Themes → Actions → Edit code
- Find: sections/main-blog.liquid
- Location: Around line 13-15 (after the
line)
Add this code immediately after the blog title:
<!-- Blog Filter Dropdown -->
<div class="blog-filter-container" style="margin: 20px 0;">
<form>
<select onchange="window.location = this.value;" style="padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; background: white;">
<option value="{{ blog.url }}">All Posts</option>
{% assign sorted_tags = blog.all_tags | sort %}
{% for tag in sorted_tags %}
<option value="{{ blog.url }}/tagged/{{ tag | handleize }}"
{% if current_tags contains tag %}selected="selected"{% endif %}>
{{ tag }}
</option>
{% endfor %}
</select>
</form>
</div>
## Step 2: For Homepage Blog Section (if that’s where you want the filter)
- Go to: sections/blog-posts.liquid (or whatever your homepage blog section is called)
- Find: The section where blog posts are displayed (usually after any heading)
- Add this code before the blog posts loop:
<!-- Homepage Blog Filter -->
{% assign main_blog = blogs[section.settings.blog] %}
<div class="homepage-blog-filter" style="margin: 20px 0; text-align: center;">
<form>
<select onchange="window.location = this.value;" style="padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
<option value="{{ main_blog.url }}">Filter by Category</option>
{% assign sorted_tags = main_blog.all_tags | sort %}
{% for tag in sorted_tags %}
<option value="{{ main_blog.url }}/tagged/{{ tag | handleize }}">{{ tag }}</option>
{% endfor %}
</select>
</form>
</div>
## Step 3: Enhanced Version with Better Styling
If you want better styling, create a new file called blog-filter.css in your assets folder and add this:
Create: assets/blog-filter.css
.blog-filter-container {
margin: 24px 0;
display: flex;
justify-content: center;
}
.blog-filter-select {
padding: 12px 16px;
border: 1px solid #e1e3e5;
border-radius: 6px;
font-size: 14px;
background: white;
color: #333;
cursor: pointer;
min-width: 200px;
transition: border-color 0.2s ease;
}
.blog-filter-select:hover {
border-color: #333;
}
.blog-filter-select:focus {
outline: none;
border-color: #333;
box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.1);
}
@media screen and (max-width: 749px) {
.blog-filter-select {
width: 100%;
max-width: 300px;
}
}
Then update your liquid code to use the CSS classes:
<!-- Styled Blog Filter -->
{{ 'blog-filter.css' | asset_url | stylesheet_tag }}
<div class="blog-filter-container">
<form>
<select onchange="window.location = this.value;" class="blog-filter-select">
<option value="{{ blog.url }}">All Categories</option>
{% assign sorted_tags = blog.all_tags | sort %}
{% for tag in sorted_tags %}
<option value="{{ blog.url }}/tagged/{{ tag | handleize }}"
{% if current_tags contains tag %}selected="selected"{% endif %}>
{{ tag }}
</option>
{% endfor %}
</select>
</form>
</div>
## Step 4: Important Notes
Tag Preparation:
- Make sure all your blog posts are properly tagged
- Use consistent tag names (e.g., “Recipes”, “Tutorials”, “Tips”)
- The dropdown will automatically populate with all existing tags
URL Structure:
- The filter works by redirecting to: /blogs/your-blog/tagged/tag-name
- This is Shopify’s native filtering system
Testing:
- Save your changes
- Go to your blog page
- Test the dropdown - it should redirect to filtered views
- Verify all tags appear correctly
## Step 5: Advanced Features (Optional)
If you want to add a search box alongside the dropdown, add this code after the dropdown:
<!-- Blog Search Box -->
<div class="blog-search-container" style="margin: 10px 0; text-align: center;">
<form action="{{ blog.url }}" method="get">
<input type="search" name="q" placeholder="Search blog posts..."
style="padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; width: 250px;">
<button type="submit" style="padding: 8px 16px; background: #333; color: white; border: none; border-radius: 4px; margin-left: 8px;">Search</button>
</form>
</div>
The filter will work immediately once you save the changes. Your visitors can now easily filter by category without scrolling through everything!
Let me know if you need help with any specific part of the implementation!
Tip: Please make a copy of your theme first and then implement these changes. Also, if you want we can do this for you - for free.
Cheers,
Shubham | Untechnickle