How to insert related blog posts on product pages?

Solved

How to insert related blog posts on product pages?

Bemestar
Excursionist
17 1 17

Hi!

 

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.

 

Thanks!

Accepted Solution (1)
Bemestar
Excursionist
17 1 17

This is an accepted solution.

Hey!

 

I found a solution for what i wanted to do.

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

Hope it helps!

View solution in original post

Replies 26 (26)

Bemestar
Excursionist
17 1 17

Anyone??

Thomas_Lang1
Shopify Partner
235 6 55

Hi!

 

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 🙂

 

you can check it out here:

 

https://shipping-demo.myshopify.com/blogs/news/linking-products-in-blog-posts

 

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.

 

Install it from here: http://blogproducts.checkmyapp.net

 

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.

 

 

Let me know what you think.

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

Bemestar
Excursionist
17 1 17

@Thomas_Lang1 wrote:

Hi!

 

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 🙂

 

you can check it out here:

 

https://shipping-demo.myshopify.com/blogs/news/linking-products-in-blog-posts

 

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.

 

Install it from here: http://blogproducts.checkmyapp.net

 

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.

 

 

Let me know what you think.




That looks like a nice thing, but if its an app it needs to be bringing functionality beyond what some simple lines of code can. Don't you think?

An app should always be something more. Not a way to get money from beginners.

 

To beginners and people that are not code savvy just teach them simple stuff like i am sharing here.

To build an app for shopify go above and beyond and build something that is worthwhile for everybody.

 

Thomas_Lang1
Shopify Partner
235 6 55

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.

 

 

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

Bemestar
Excursionist
17 1 17

Sorry i think i misunderstood the idea!

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.

web-text-wrap

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.

 

If you need more ideas im up for it.

 

thanks

Thomas_Lang1
Shopify Partner
235 6 55
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)
Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

Bemestar
Excursionist
17 1 17

You're welcome!

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.

 

Any way to keep it fixed while we scroll down?

I think everyone would appreciate this.

 

Thomas_Lang1
Shopify Partner
235 6 55

you can keep it fixed with the css style position:fixed;  🙂

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

Bemestar
Excursionist
17 1 17

@Thomas_Lang1 wrote:

you can keep it fixed with the css style position:fixed;  🙂


That doesn't work, neither fixed or sticky.

Im not really sure what is needed to make that happen i will start a new thread on that.

Thanks Thomas

hzp
Visitor
1 0 0

@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? 

Thomas_Lang1
Shopify Partner
235 6 55

Hi!

 

I'm happy to announce that my app is now listed in the app store! We added some nice new features:


Add to cart button in quick view
Now your customer will be able to add the product to their cart directly from the blog page


Analytics
See exactly which products have been clicked in your articles, and how many times they were added to your cart! 

 

 

Product quickview from blog articleProduct quickview from blog article

 

product performance on articlesproduct performance on articles

 

https://apps.shopify.com/blog-product-tagger

 

 

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?)

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

shpfyuser
Tourist
4 0 2

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. 

shpfyuser
Tourist
4 0 2

Hi @Thomas_Lang1 -- has your app added the functionality to place related blog posts on product pages? Would be interested in downloading if so. 

Thomas_Lang1
Shopify Partner
235 6 55

Hi there, Yes! you can now also show related blog posts on product pages 🙂

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

JRT2022
Shopify Partner
1 0 0

Hi Thomas
love the idea of the app and looks great with th product image roll overs. However, went to https://wildlyorganic.com/blogs/recipes/easy-chocolate-almond-nice-cream-vegan-paleo-gluten-free# and added a product but did not add to cart...
will use the free trial to see if it works.

keep up the good work

Jason

Thomas_Lang1
Shopify Partner
235 6 55

Thanks!

let me know if you need any help setting it up 🙂

 

add to cart seems to work for me on the wildly organic store.

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

hockey2112
Shopify Partner
12 1 1

I would like to try your app, but the store I am working on has not yet been handed off to the client. Therefore, I cannot add your app because it requires a paid plan. When I try to add it, Shopify tells me "The shop cannot accept the provided charge."

 

My intention is to have a "Products used in this Recipe (blog post)" area on each Recipe blog post page, and a "Recipes using this Product" area on each Product page. Will your app do this?

 

I would also like for this to be automatically bi-directional... in other words, if I add a blog post to a product, will that product also automatically be shown on the blog post? Or do I need to add the product to the blog post and also add the blog post to the product?

Misfit_Code_Dev
Shopify Partner
289 22 57

Hey there.

 

Are you looking for it to just randomly pick and pull, or would you like to be able to assign them like using a section?

 

Best Regards,

Duncan.

Isle of Misfit Code and Development

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca
Bemestar
Excursionist
17 1 17

This is an accepted solution.

Hey!

 

I found a solution for what i wanted to do.

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

Hope it helps!

JG646
Visitor
1 0 0

Could you please show me a screenshot of how it looks on the front end of the shop?

Thomas_Lang1
Shopify Partner
235 6 55

Hi, Sure 🙂

 

check the product links on this blog for instance: 

https://wildlyorganic.com/blogs/recipes/easy-chocolate-almond-nice-cream-vegan-paleo-gluten-free

 

you can also add the products on the bottom of the article if you like.

Software Developer | Owner of Tom IT - We build shopify apps
Marketplace Order Connector | Amazon bol.com & Walmart DSV
Order Related Documents | Print documents, Email document &Autoprint
Blog Product Spotlight | Add products to your blog articles!

JCValerio
New Member
4 0 0

2020-10-09_12-02-39.png

JCValerio
New Member
4 0 0

BenjaminKnecht
Shopify Partner
9 0 1

You can add the Code as liquid snippet in the Code Editor or in the liquid file for the collection. The current collection can be always identified with its handle. Like in the docs described. So we can render for different collections different articles or more articles. articles are blog posts. 

 

You need to apply your styles for the shop you use..

{% assign article = articles['news/yu-gi-oh-legacy-of-destruction'] %}

{% if collection.handle == 'yugioh' %}
    <div>
        <img src="{{ article.image | img_url: 'medium' }}">
        <h3>{{ article.title }}</h3>
        <div>{{ article.excerpt }}</div>
    </div>
{% endif %}

 

 

Unser Shop für Inspirationen - wir freuen uns auf Deinen Besuch! fusaba.ch
BenjaminKnecht
Shopify Partner
9 0 1

Bildschirmfoto 2024-05-29 um 08.05.54.png

It looks like this, fits well with the dawn Theme.

 

liquid code..

blog-product.liquid

 

{{ 'blog-product-card.css' | asset_url | stylesheet_tag }}

<section class="blog-product-card-container">
  {% for tag in article.tags %}
    {% assign product = all_products[tag] %}
    {% if product and product != blank %}
      <a href="{{ product.url }}" class="blog-product-card">
        <div class="image">
          <img
            src="{{ product.featured_image | image_url }}"
            alt="{{ product.featured_image.alt | escape }}"
            height="{{ product.featured_image.height }}"
            width="{{ product.featured_image.width }}"
            loading="lazy">
        </div>
        <div class="about">
          <h2>{{ product.title }}</h2>
          <div class="description">
            {{ product.description }}
          </div>
          <p class="price">{{ product.price | money }}</p>
        </div>
      </a>
    {% endif %}
  {% endfor %}
</section>

<script src="{{ 'blog-product-card.js' | asset_url }}" defer="defer"></script>

 


@BenjaminKnecht wrote:

You can add the Code as liquid snippet in the Code Editor or in the liquid file for the collection. The current collection can be always identified with its handle. Like in the docs described. So we can render for different collections different articles or more articles. articles are blog posts. 

 

You need to apply your styles for the shop you use..

 

{% assign article = articles['news/yu-gi-oh-legacy-of-destruction'] %}

{% if collection.handle == 'yugioh' %}
    <div>
        <img src="{{ article.image | img_url: 'medium' }}">
        <h3>{{ article.title }}</h3>
        <div>{{ article.excerpt }}</div>
    </div>
{% endif %}

 

 

 


 

Unser Shop für Inspirationen - wir freuen uns auf Deinen Besuch! fusaba.ch

Arif_Shopidevs
Shopify Partner
141 18 14

Hi, Recently we have build a app which helps to show product in blog post. with nice product template . This is easy for merchant to show product in blog page easily.

 

After really the solution I found not good and flexible like this app, which help to show image gallery and video in product card. You can take a look https://apps.shopify.com/easydisplay-product-showcase

Thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers