A Shopify store owner seeks to automatically display related blog posts on product pages. They found a 2015 code snippet that no longer works and are troubleshooting why.
Initial Solutions Offered:
One developer promotes their app for embedding products in blog posts, with plans to add reverse functionality (showing blog posts on product pages)
Another developer asks whether random selection or manual assignment via sections is preferred
Working Solution Shared:
The original poster found a method to display specific blog posts on product collection pages by:
Editing product-template.liquid
Using collection handles to target specific collections
Manually inserting blog post content (title, snippet, image, link)
App Development Discussion:
A developer’s app (now in Shopify App Store) offers:
Bidirectional linking between products and blog posts
Auto-linking when products are mentioned in articles
Add-to-cart functionality from blog pages
Analytics tracking for product clicks and cart additions
Design Considerations:
Concerns raised about displaying too many blog posts causing excessive scrolling
Suggestions for floating product previews while reading
Discussion of product image positioning (fixed/sticky) during scroll
Current Status:
Multiple solutions exist—from manual liquid code implementation to paid apps—with ongoing interest in bidirectional, automated linking between products and blog content.
Summarized with AI on November 9.
AI used: claude-sonnet-4-5-20250929.
I’m trying to add related blog posts relevant to product pages so that you can automate it and have good information linking to the blog when checking out a product.
I found this piece of code:
{% assign related_posts = "" %}
{% for article in blogs.blog.articles %}
{% if article.tags contains product.handle %}
{% capture post %}
<li><a href="{{ article.url }}"><p>{{ article.title }}</p></a></li>
{% endcapture %}
{% assign related_posts = related_posts | append:post %}
{% endif %}
{% endfor %}
{% if related_posts.size > 0 %}
<ul> {{ related_posts }} </ul>
{% else %}
No related posts!
{% endif %}
But for some reason i cannot get it to work, i’ve been reading all about it and tried different things but to no avail.
Anyone can help?
This code snippet that i found was written in 2015 maybe something major has changed and thats why it doesn’t work.
This functionality sounds very useful, I’m currently working on a new app for embedding products in a blog page, and am thinking of also allowing it the other way around now
It’s pending review at the moment, but you can already install it as a non listed app if you want, there is currently a 30 free trial, and I’m looking for some more feedback on the app.
At this point when you insert links to your blog and click ‘tag products’ the products will get linked and you will get hover product information / lightbox.
I could expand the functionality to also allow tagging product’s that were not mentioned / linked in the blog page, and then display blog articles on the product page.
So within a collection of products i wanted to show a specific blog post, one that would show always, like say for example you sell mountain bikes, and you have a blog post about “First beginner mistakes when buying mountain bikes”, on your collection of mountain bikes choose to always show this blog post on your product page.
To do this: Go to product-template.liquid and insert this wherever you want it to appear:
{% assign in_hats_collection = false %}
{% for collection in product.collections %}
{% if in_hats_collection == false and collection.handle == 'YOUR COLLECTION HANDLE' %}
{% assign in_hats_collection = true %}
{% endif %}
{% endfor %}
{% if in_hats_collection %}
<div>
<h3 style="color: #674ea7">Blog Title</h3>
<img style="padding-right: 10px; width: 50%; float: left;" width="100%" src="YOUR IMAGE" alt"ALT TAG">
<p>SNIPPET of blog post</p>
<div align="right"><a class="CLASS OF BUTTON" href="LINK TO YOUR BLOG POST">Read More</a></div>
<center><hr class="hr-artigos"></center>
</div>
{% endif %}
I think you are missing the point of my app. The code you produced is one way to link 1 blog to your product page. My app is to be able to automatically link all products to your blog post and blog posts to your products. This is a usefull feature and saves a lot of time for merchants.
To be honest I am a bit disappointed with the tone in your reply “taking money from beginners”
I try to make my apps as user friendly as possible, and my premise is always to create value for store owners with functionalities they would otherwise not be able to have easily. I’m a store owner myself, and have 2 apps currently listed in the app store, this will be my third. I made these apps because I needed certain functionalities that were unavailable out of the box or in the app store, and thought it would be great to share with other merchants looking for similar, yes my apps are paid, I put in a lot of effort to create and improve them with every feedback I’m getting, and my infrastructure hosting the apps and backing up everything hourly to ensure availabilty isn’t free either.
So my suggestion would be to mainly focus on how to present these results and design.
Because i have one or two blog posts on a product page, and thats already a lot! If you can add 4 or 5 then thats a massive scroll specially if you’re using Debut Theme with that split width that makes one column have an image and another one a bunch of text.
About the blog:
Showing results on the blog should be like this, where is written float left and right have the ability, if one wants to insert a product instead, just like it would happen with an image.
Because if every product is at the bottom of the post, the moment of pressing and getting to know these products kind of passed. Its different to have a preview of the product while reading.
Thanks for the suggestion, I’m currently working on inplementing something similar.
for now the readers will see the product pop up when they hover a product link in the article (tap hold on mobile), optionally the merchant can also add the products in the bottom of the page (this is what you probably saw on the demo, allthough I agree with you, the moment for the product information being useful has passed at the bottom of the page)
By the way any chance you know how to make the product image stay visible, when we scroll down to read the product description?
Cause an average product description should have between 300/400 words, and while reading, specially on Debut theme but other themes as well, as we scroll to read the description the product image goes out of view.
@Thomas_Lang1 so I’m trying out the app, because your description suggested it was bidirectional, but it doesn’t seem to be in action. I want to place related blog posts on product pages, but it only seems to work in the other direction (products on blog pages). Am i missing part of this?
Although it currently only is one direction as you mentioned, we are looking at adding related blog posts to products as well.> > Would it be enough if they get auto linked (if a link to a product is in a certain article that article will get shown on the product page?)
Yes! Auto-linking would be great as you mentioned. It would also be nice to be able to select specific blogs manually, but auto-linking is better than no linking in my book.
