How can I display blog posts with a specific tag?

I’m using Refresh version 15.3.0 and I’d like the Blog Posts component to display all posts on the homepage, but only show posts tagged with Halieween in the Games > Halieween section.
Is this possible to achieve? Thanks!

Website: https://tucanogames.com/
Password: TuC4n0G4m32!

Hey! @Tucano_Games ,

Add a “Custom liquid” section, say, at the top of the template and paste this code:

{% if article.tags.size > 0 %}
  
    {% for t in article.tags %}
      
          {{ t | capitalize }}
      
    {% endfor %}
  

{% endif %}

I don’t know if I did well, like that?

@Tucano_Games Step 1 — Add a Custom Liquid section
In your Games > Halloween page template (or in a Custom Liquid section in the theme editor for that page), paste this code:


  {% assign blog_handle = 'your-blog-handle' %}
  {% assign halloween_posts = blogs[blog_handle].articles | where: "tags", "Halloween" %}

  {% if halloween_posts.size > 0 %}
    

      {% for article in halloween_posts %}
        - {{ article.title }}
          

  {{ article.excerpt | truncate: 100 }}

        
      {% endfor %}
    

  {% else %}
    

No Halloween posts found.

  {% endif %}

Step 2 — Replace your-blog-handle
Replace your-blog-handle with the handle of your blog.
For example, if your blog URL is /blogs/news then the handle is news.

{% assign blog_handle = 'news' %}

Still not working :disappointed_face:

I replaced ‘your-blog-handle’ for ‘news’ since my blog URL is /blogs/news. And tagged with “tags”, “halloween” and “halieween” for just in case.

Hi @Tucano_Games ,

Please go to Actions > Edit code > sections > featured-blog.liquid file.

Please send me the code of the file, I will add the option for you

I think I never edited this code:

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-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 -%}

{%- liquid
  assign posts_displayed = section.settings.blog.articles_count
  if section.settings.post_limit <= section.settings.blog.articles_count or section.settings.post_limit <= 4
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}

  

    {%- unless section.settings.heading == blank -%}
      

        ## 
          {{ section.settings.heading }}
        

        {%- if section.settings.blog != blank
          and section.settings.show_view_all
          and section.settings.post_limit < section.settings.blog.articles_count
        -%}
          
            {{ 'sections.featured_blog.view_all' | t }}
          
        {%- endif -%}
      

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
      

        
          {{ 'sections.featured_blog.view_all' | t }}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.text_header.content"
    },            
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "t:sections.featured-blog.settings.heading.default",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.layout_header.content"
    },        
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label",
      "info": "t:sections.featured-blog.settings.show_view_all.info"
    },    
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },    
    {
      "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
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name"
    }
  ]
}
{% endschema %}

Try this code.

Just make sure your blog posts actually have the Halloween tag, and the blog handle (like news or whatever yours is) is correctly selected using section.settings.blog.

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-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 -%}

{%- liquid
  assign tagged_articles = section.settings.blog.articles | where: "tags", "Halloween"
  assign posts_displayed = tagged_articles.size
  if section.settings.post_limit <= tagged_articles.size or section.settings.post_limit <= 4
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}

  

    {%- unless section.settings.heading == blank -%}
      

        ## 
          {{ section.settings.heading }}
        

        {%- if section.settings.blog != blank
          and section.settings.show_view_all
          and section.settings.post_limit < tagged_articles.size
        -%}
          
            {{ 'sections.featured_blog.view_all' | t }}
          
        {%- endif -%}
      

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.settings.post_limit < tagged_articles.size -%}
      

        
          {{ 'sections.featured_blog.view_all' | t }}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.text_header.content"
    },            
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "t:sections.featured-blog.settings.heading.default",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "t:sections.all.heading_size.options__1.label" },
        { "value": "h1", "label": "t:sections.all.heading_size.options__2.label" },
        { "value": "h0", "label": "t:sections.all.heading_size.options__3.label" },
        { "value": "hxl", "label": "t:sections.all.heading_size.options__4.label" },
        { "value": "hxxl", "label": "t:sections.all.heading_size.options__5.label" }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.layout_header.content"
    },        
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label",
      "info": "t:sections.featured-blog.settings.show_view_all.info"
    },    
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },    
    {
      "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
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name"
    }
  ]
}
{% endschema %}

Hi @Tucano_Games ,

Please change all code:

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-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 -%}

{%- liquid
  assign posts_displayed = section.settings.blog.articles_count
  if section.settings.post_limit <= section.settings.blog.articles_count or section.settings.post_limit <= 4
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}

  

    {%- unless section.settings.heading == blank -%}
      

        ## 
          {{ section.settings.heading }}
        

        {%- if section.settings.blog != blank
          and section.settings.show_view_all
          and section.settings.post_limit < section.settings.blog.articles_count
        -%}
          
            {{ 'sections.featured_blog.view_all' | t }}
          
        {%- endif -%}
      

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
      

        
          {{ 'sections.featured_blog.view_all' | t }}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "checkbox",
      "id": "enable_tag",
      "label": "Enable tag",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.text_header.content"
    },            
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "t:sections.featured-blog.settings.heading.default",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        },
        {
          "value": "hxxl",
          "label": "t:sections.all.heading_size.options__5.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-blog.settings.layout_header.content"
    },        
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label",
      "info": "t:sections.featured-blog.settings.show_view_all.info"
    },    
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },    
    {
      "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
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name"
    }
  ]
}
{% endschema %}

You just need to turn on ‘Enable tag’ option, it will display fine.

Hi @Tucano_Games :waving_hand: This is an advanced theme customization to have varying behavior per collection especially to avoid hardcoding values increasing maintenance burdens.

If you need this customization properly taken care of then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

This is where the @CodingFifty has taken his first code from – https://community.shopify.com/c/shopify-design/displaying-blog-tags-on-blog-posts/m-p/3072683/highlight/true#M801283

The task was quite different though.

Filtering blog articles in liquid code would not be very reliable because of pagination – the platform does not provide access to all articles at once, the code will see a limited portion of them, so when you will have many posts, it would not see the ones you want.

So, basically, when you will have more than 50 blog posts, the code will only see the 50 top ones and may never see your halloween posts.

Instead of creating a page with “Featured blog” section at the bottom, I’d suggest you to to create an alternate template for “blogs” (in “Customizer”), then add the same sections you have on your Page and keep the “Blog posts” section at the bottom. Say, this template will have name “special”.

Then, you change your menu link from /pages/halieween to /blogs/news/tagged/halieween?view=special – this will be a link to your blog page which will show only articles with tag halieween and it will be shown using your new special template.

You’d need to type this link in menu editor by hand or paste.

And no need to edit code, which will make your theme update problematic.

Here is the proof of concept in my test store:

https://1xohz84dpbd3ebh6-23104437.shopifypreview.com/blogs/news/tagged/test?view=special

Further reading on pagination:

https://shopify.dev/docs/api/liquid/tags/paginate#paginate

https://www.shopify.com/au/partners/blog/shopify-pagination