Display Blog based on tags

[MezcalMitre]

Hello, i have the HONEY theme.

I want to put specific blog posts to display on my blog page based on a blog tag.

Here is the example. In this cards (margarita, café , etc) i want that when you click there the site only shows especific blogs based on tags.

[LuffyOnePiece]

Hi @MezcalMitre ,

Here is a quick solution.

Go to main-blog.liquid and under this code (i believe it's line 31 in refresh theme, could be the same for Dawn theme):

{%- paginate blog.articles by 6 -%}
  <div class="main-blog page-width section-{{ section.id }}-padding">
    <h1 class="title--primary">{{ blog.title | escape }}</h1>

Add the following:

    {% 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 %}

And off course you need to style, above line 31, add:

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

I hope you don't have hundreds of tags ,, 

Also, if you update your theme, this code may disappear and you need to add it again.

Hope this helps

Thank you

[MezcalMitre]

Cant find this section

{%- paginate blog.articles by 6 -%}
  <div class="main-blog page-width section-{{ section.id }}-padding">
    <h1 class="title--primary">{{ blog.title | escape }}</h1>

The only code it have is this:

{
"sections": {
"1712889441df56d420": {
"type": "apps",
"blocks": {
"xo_gallery_xo_gallery_QMHMeG": {
"type": "shopify:\/\/apps\/xo-gallery\/blocks\/xo-gallery\/e61dfbaa-1a75-4e4e-bffc-324f17325251",
"settings": {
"type": "gallery",
"id": 2,
"mid": ""
}
}
},
"block_order": [
"xo_gallery_xo_gallery_QMHMeG"
],
"disabled": true,
"settings": {
"include_margins": true
}
},
"multicolor_cards_ddYJCT": {
"type": "multicolor-cards",
"blocks": {
"card_K9ikCq": {
"type": "card",
"settings": {
"card_title": "Margarita",
"link": "",
"background": "#3a3a3e",
"text_color": "#ffffff"
}
},
"card_CFF9N4": {
"type": "card",
"settings": {
"card_title": "Café",
"link": "",
"background": "#3A3A3E",
"text_color": "#FFFFFF"
}
},
"card_kPCjwr": {
"type": "card",
"settings": {
"card_title": "Sour",
"link": "",
"background": "#3a3a3e",
"text_color": "#ffffff"
}
},
"card_UAfrCF": {
"type": "card",
"settings": {
"card_title": "Verano",
"link": "",
"background": "#3a3a3e",
"text_color": "#ffffff"
}
}
},
"block_order": [
"card_K9ikCq",
"card_CFF9N4",
"card_kPCjwr",
"card_UAfrCF"
],
"settings": {
"columns": 4,
"image_height": 100,
"font_size": 100,
"font_type": "heading-font",
"font_style": "all_caps",
"padding_top": 44,
"padding_bottom": 44
}
},
"main": {
"type": "main-blog",
"settings": {
"featured_article": "cocteles-mitre\/daboo",
"grid": 4,
"show_date": false,
"show_author": false
}
}
},
"order": [
"1712889441df56d420",
"multicolor_cards_ddYJCT",
"main"
]
}

[LuffyOnePiece]

Hi @MezcalMitre ,

We do need to do custom code.

Let me know if you need assistance.

Thank you

[MezcalMitre]

Yes please ! 😄

[MezcalMitre]

can you?

[LuffyOnePiece]

Hi @MezcalMitre ,

Please provide me a collab access in private message so that I can help you out.

Thank you

[itsanadean]

would you mind helping me with this issue as well? 

[LuffyOnePiece]

Hi @itsanadean ,

Can you please provide me the details and provide me collab access on the message so that I can help you out?

Thank you

[itsanadean]

Hi Luffy, 

I've been trying to options in order to create a block that filters my blog posts on a page based on tag. I do not want the user to have to filter through and click on tags. Ex: I want the Decor & Activities page to have the blog posts that contain the tag "decor" or "activities". 

I've tried using some code that i've found on here to build a custom liquid box, but I cannot get the style to match the rest of my theme with fonts and sizing. I've also tried building a new custom section and put the coding for a featured blog in it, but can't get the "if" coding with tags to work. 

Any help would be appreciated! It seems like so many people run into this problem, I wish Shopify would just add it as a feature. 

Please let me know how to provide collab access as I'm new here! 

Thanks!

[LuffyOnePiece]

Hi @itsanadean ,

We can use blog category instead of the tags so that you can categories each blogs.

Let me know if you have any other queries.

Thank you

[itsanadean]

Hi @LuffyOnePiece  - only thing is that I don't want the articles to be in separate blogs - because some articles may apply to more than one category. 

[LuffyOnePiece]

Hi @itsanadean ,

Have you tried using the blog url?

For example, if you want to show only articles from the main blog that are tagged with news, then you can use the following URL structure:

https://my-store.myshopify.com/blogs/main/tagged/news

You can also filter by multiple tags by combining the handleized tags with :
https://my-store.myshopify.com/blogs/main/tagged/news+breaking 

Let me know if this work.

Thank you

[itsanadean]

Hi @LuffyOnePiece - I saw that you can do this as an option too, but I don't know where to change the URL? Are you able to show me?

Thank you!