Blog in product page to show only articles tagged with product handle (Dawn Theme)

[snowsnowsnow]

Hi everyone,

Is there anyway to make the blog section in a product page to show only articles tagged with the product handle?

I'm using Dawn Theme.

For example, if a product url is:

mystore.myshopify.com/products/chair

the blog section added to the product page shows only articles with the "chair" tag.

I wouldn't mind editing the code for the whole site, if it's not possible to apply this function to the product page only.

I already tried some custom liquid code section, like this one:

{% assign product_handle = product.handle %}

{% for article in blogs['blog'].articles %}

{% if article.tags contains product_handle %}
<div > <a href="{{ article.url }}" title="{{ article.title | escape }}"> <div>{{ article.image.src | img_url: 'large' | img_tag: article.title }}</div> <div>{{ article.title }}</div> </a> </div>

{% endif %}
{% endfor %}

and while it works, it lacks all the proper formatting that comes with the proper blog section.

Thanks!

[PaulNewton]

With some inverse modification to continue(autoskip ) part of a loop,  you would take the logic you've put together and find the article loop in whatever the "blog section" is for your specific theme. And wrap that logic with your logic.

Do the tag check like your doing but when it's NOT a match use the {% continue%} tags to make the current article that doesn't have a tag match get skipped.

{% if article.tags contains product_handle %}
<div > <a href="{{ article.url }}" title="{{ article.title | escape }}"> <div>{{ article.image.src | img_url: 'large' | img_tag: article.title }}</div> <div>{{ article.title }}</div> </a> </div>
{% else %}
{% continue %}
{% comment %} The rest of the default article code goes here inside the else & endif {% endcomment %}
{% endif %}

💣Keeping in mind that contains makes matching tags fuzzy so trying to match "contains red" would also match any tag with those characters so a "credit"  tag would create a false positive.

https://shopify.dev/api/liquid/tags/continue 

If you need this customized for you then contact me , info in sig. Please provide context: store url, theme name, post url and detail.

[snowsnowsnow]

Thanks for your reply!

I'm wondering whether it's possible to use this alternative solution:

in product.json I found this code:

"bc5f8046-4abc-421d-a43b-3f7675c32a92": {
"type": "featured-blog",
"settings": {
"heading": "Blog posts",
"heading_size": "h2",
"blog": "news",
"post_limit": 3,
"columns_desktop": 3,
"color_scheme": "background-1",
"show_image": true,
"show_date": false,
"show_author": false,
"show_view_all": true,
"padding_top": 36,
"padding_bottom": 36
}
},

If I could change ["blog": "news"] to a dynamic data like ["blog": "{{ product.handle }}"] , then I could use a different blog for every product. That would work for me.

Bu I tried to use ["blog": "{{ product.handle }}"] and it doesn't work. The Shopify code editor says : can't include Liquid syntax ('{{', '}}', '{%' or '%}') "without valid dynamic sources"

Any advice?

Thanks!

[PaulNewton]

That's a JSON template you cannot use liquid templating syntax there.

Solve the initial problem in the simplest way first then explore unknowns before complicating it.

[jiane]

Hi, I'm looking for a solution like this. Where do you put the above code? I placed it in my "Custom Liquid" section for my Product Page but it's not working. Am I missing something?

[PaulNewton]

You have to modify the underlying code itself that shows the blog articles for your specific theme, it's not done by arbitrarily adding custom-liquid theme settings.

Custom-liquid setting would primarily be to design and make a completely custom blog/article display.

[Boki97]

Here is the code that I used on the Dawn theme. It works fine. 
So I'm pulling the collection handle and splitting it into multiple words and if the article title matches any of those words it will put that article on the collection page. Here is the code:

{% assign collection_handle = collection.handle | replace: '-', ' ' | split: ' ' %}
{% assign article_count = 0 %}

{% for article in blogs['your-blog-handle'].articles %}
{% if article.handle contains collection_handle.first or article.handle contains collection_handle[1] %}
{% if article_count < 3 %}

<a href="{{ article.url }}" class="article_link">
<div class="article_collection">
<img
srcset="{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
{%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
{%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w"
src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="{{ article.image.width }}"
height="{{ article.image.height }}"
>
<h2>{{ article.title }}</h2>
<div class="article-card__info caption-with-letter-spacing h5">

<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>


<span>{{ article.author }}</span>

</div>

<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>


</div>
{% assign article_count = article_count | plus: 1 %}
{% else %}
{% break %}
</a>
{% endif %}

{% endif %}

{% endfor %}