How to add blog filter tags in Dawn theme

[sraschella]

Is there anyway to add a drop down or menu to filter blog posts by tags? I’m using the Dawn theme and don’t see anyway of doing this and don’t see the tags I’m adding showing up anywhere.

Thanks!

[oscprofessional]

@sraschella
Hii,
please refer this link
https://hueapps.co/how-to-add-blog-posts-filters-to-shopify-dawn-theme/

[sraschella]

Thanks, but is I’m looking for a way to do it with code rather than an app. Are you able to help me with that?

[AndreaDee]

I was looking for a similar solution for my client. I was trying to figure out how to sort her recipe blog posts into categories (eg. soups, sides, mains etc.)

This article was very helpful and helped me find my solution: https://shopify.dev/themes/architecture/templates/blog

My solution was to add a linkable element to my blog template - I chose Collapsable Content since it’s easier to search on mobile. Once that was in place I added each Category I wanted to include on a separate line and linked each category using the following format as a template: https://my-store.myshopify.com/blogs/main/tagged/news (for my example I would use https://my-store.myshopify.com/blogs/recipes/tagged/soups).

You could also use the same method in the navigation section as well. Rather than selecting one of the pages from the dropdown, you plug in your links using the format above.

[Josr]

It worked, thanks.

[Katricep]

This worked great for me. Thanks. Is there a way to optimize the style for mobile? The tags show a little jumbled in mobile view. Maybe they can be inline vertically because of the space available in mobile view.

[Aday7]

Hi, did you find a solution to this?

Also the code you put in above worked; however, when a filter is clicked the entire page refreshes and scrolls back to the top.. Is there a way for just the filtered section to refresh with the relevant blogs rather than refreshing the whole page with it?

Thanks!

[Aday7]

Hi @00Sarah00

Did you manage any time to look into scroll to top refresh issue I mentioned? Sorry I’ve been trying to work it out myself but can’t seem to find a solution..

Any help would be greatly appreciated!

[ihatecodin]

Thank you so much, this worked amazing! Just what I needed for a faq blog filter, and I put the dropdown to the leftside of my page so I slightly alter the style section:

.blog-filter{ margin: 0; /* Remove automatic centering */ width: auto; /* Set width to auto to take only the necessary space */ padding: 10px; } .dropbtn { background-color: #ddd; border: none; color: #5f326d; padding: 10px 13px; text-align: left; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; } .dropbtn:hover, .dropbtn:focus { background-color: #000000; color:white; } .dropdown { position: relative; display: inline-block; text-align: left; padding: 10px; } .dropdown-content { display: none; position: absolute; /* Make the dropdown positioned relative to the dropdown container */ left: 0; /* Align it with the left edge of the dropdown button */ background-color: #f1f1f1; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 5px 5px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; width: auto; /* Ensure it takes up only necessary width */ margin: 0; /* Remove centering */ }

I prefer it on the left side so the whole dropdown doesn’t block too many blogs when filtering. Appreciate your sharing!

[nancy5]

Hi Sarah!

I followed the first code, and it displayed my tags beautifully on the site. Like mentioned above, on mobile it doesn’t look good. I want to try your second code, however, to me it isn’t clear if the second code replaces the desktop design and make a dropdown menu both for desktop and mobile.

Adding a dropdown only for mobile would be ideal. Is that possible?

[nancy5]

Hi Sarah,

Please let me know if you had time to look into a mobile code.

Another question on desktop code; it’s kind of positioned more to the right - perhaps even in the middle. Is it suppose to be like that? Could there be a change of code to justify the “Filter by:” followed by the tags", to be positioned to the left side?

Thanks in advance!

[nancy5]

Hi Sarah,

Yes, I did figure out how to put it to the left. Looks beautiful!

[nancy5]

Hi Sarah,
I am confused with what you mean with first and second code, since the thread has several codes now.

Currently, this is how the code is on main-blog.liquid:

{{ ‘component-article-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘section-main-blog.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- paginate blog.articles by 6 -%}

{{ blog.title | escape }}

.list-group { text-align: left; } ul#BlogTagFilter { list-style: none; padding-top: 10px; } ul#BlogTagFilter li { display: inline; margin: 5px; } {% if blog.tags.size > 0 %}

• Filter by:
• {{ 'All Topics' }}
{% for tag in blog.all_tags %}
• {{ tag }}
{% endfor %}

{% endif %}

{%- for article in blog.articles -%}

{%- render 'article-card', article: article, media_height: section.settings.image_height, media_aspect_ratio: article.image.aspect_ratio, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author, show_excerpt: true -%}

{%- endfor -%}

{%- if paginate.pages > 1 -%}
{%- render ‘pagination’, paginate: paginate -%}
{%- endif -%}

{%- endpaginate -%}

{% schema %}
{
“name”: “t:sections.main-blog.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “header”,
“content”: “t:sections.main-blog.settings.header.content”
},
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “grid”,
“label”: “t:sections.main-blog.settings.layout.options__1.label”
},
{
“value”: “collage”,
“label”: “t:sections.main-blog.settings.layout.options__2.label”
}
],
“default”: “collage”,
“label”: “t:sections.main-blog.settings.layout.label”,
“info”: “t:sections.main-blog.settings.layout.info”
},
{
“type”: “checkbox”,
“id”: “show_image”,
“default”: true,
“label”: “t:sections.main-blog.settings.show_image.label”
},
{
“type”: “select”,
“id”: “image_height”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.main-blog.settings.image_height.options__1.label”
},
{
“value”: “small”,
“label”: “t:sections.main-blog.settings.image_height.options__2.label”
},
{
“value”: “medium”,
“label”: “t:sections.main-blog.settings.image_height.options__3.label”
},
{
“value”: “large”,
“label”: “t:sections.main-blog.settings.image_height.options__4.label”
}
],
“default”: “medium”,
“label”: “t:sections.main-blog.settings.image_height.label”,
“info”: “t:sections.main-blog.settings.image_height.info”
},
{
“type”: “checkbox”,
“id”: “show_date”,
“default”: true,
“label”: “t:sections.main-blog.settings.show_date.label”
},
{
“type”: “checkbox”,
“id”: “show_author”,
“default”: false,
“label”: “t:sections.main-blog.settings.show_author.label”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-blog.settings.paragraph.content”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

With this in mind, would you be able to guide me what to add?

Thank you!

[nancy5]

You are amazing! It definitely worked.. I just need to tweak the design part a little bit. Thank you!

[ab-hewits]

Hi! your code works perfectly for creating filters based off of tags!

I was wondering - is there any way you think it would be possible to filter based on article date created year instead of by tag? Thinking of adding another one, so that there is a filter by topic (tag), and by year posted

[JontiUK]

Hi Sarah, I’ve been following this thread closely and was actually directed to it by Shopify support during a conversation this morning. Adding a filter to the blog section on my homepage www.akivatech.co.uk is something I’ve really been looking forward to, so it’s encouraging to see that someone has been able to make it work. That said, I have to admit I’m not comfortable adding code myself—it makes me a bit nervous. I was wondering if you, or someone else you might recommend, would be able to assist with adding this feature for me. I’d be more than happy to pay for the support; it would just be a real relief to have someone experienced take care of it. Specifically, I’m looking for a dropdown filter on the homepage blog section that allows users to search by tags, and applies only to blog post content.