Linking products and articles in Shopify

Have you ever seen a ‘Related Articles’ section on a product page or ‘Related Products’ on an article on an ecommerce site? Blog posts are a great way to drive traffic to your site, and having the related products appear with in the article can help close a sale right from the blog. Likewise, related articles that appear in a product listing can build interest in products and help customers make their decision. The e-commerce platform Shopify supports both customizable product listings and blogs, so it’s a great candidate for implementing this kind of future. Unfortunately, doing so isn’t completely straightforward, but it can still be done with custom theme code. This blog post explains how to link blog articles and products both on the blog and on the product listing, along with the trade-offs involved.

How To Link Products to an Article

Metafields seem like the ideal solution to this problem—they’re a way of attaching custom data to both articles and products. For adding products to articles, this does work well: there’s a built-in product_reference metafield type. You just need to add a metafield with this type to blog posts in the standard Shopify settings. Be careful to apply this data to ‘Blog post’ not ‘Blog’, which refers to all the articles. After that, in every blog post editor, there will be a metafields section where you can add related products. Then, for rendering data, you can access it with article.metafields.custom.related_products and render it the way you want.

However, there’s a problem when you try to add related articles to a product. There’s no article_reference metafield type! That means there’s no way to link articles to a product, unless you want to manually type in ids or handles—an error-prone and unergonomic process. So, what else could you do? You could just link a list of metaobjects consisting of the information you need to render the article (title, date, image, etc.), but then you have the work of manually copying over that information and then maintaining it in two places—a recipe for frustration. Fortunately, there is a workaround.

How To Link Articles to a Product

While there is no way to directly link articles to a product, you can search articles for linked products. Using the related_products metafield from the previous section, when rendering a product listing you can go through every blog post and search the related products to see if the current product is in there. Then, you can add that article to your list of related articles and then you can render them. How would that work? Due the limitations of Liquid, it’s awkward to write, but this works:

{%- assign blog = blogs[section.settings.blog] -%}
{%- assign limit = section.settings.post_limit -%}

{% liquid
  assign articles_to_display = 0
  assign articles = ''
  assign index = 0
  for _ in (1..50)
    for _ in (1..50)
      if blog.articles[index] and articles_to_display < limit
        for related_product in blog.articles[index].metafields.custom.related_products.value
          if related_product.id == product.id
            assign articles = articles | append: '-' | append: index
            assign articles_to_display = articles_to_display | plus: 1
            break
          endif
        endfor
        assign index = index | plus: 1
      else
        break
      endif
    endfor
    unless blog.articles[index] and articles_to_display < limit
      break
    endunless
  endfor
  assign articles = articles | remove_first: '-'
%}

This code loops through all the articles in a blog and then loops through all the related products for that article. If the current product’s id matches the id of a related product, the index of that article is added to the articles list. Due to limitations of the Liquid array type, the articles list is just a string of hyphen-separated indices. Then, when the time comes to render them, split the string on hyphens and do <text index> | plus: 0 to coerce the text index into a number that can be used to index blogs[blog].articles.

This code does have the performance hit of having to cycle through all the articles in a blog, but it is still the most ergonomic way to display linked articles with a product. When I reached out to Shopify support about this issue, they explained there wasn’t a standard way of implementing this at the moment, but what I had was good (they also suggested adding linked articles to a product just by putting the ids in a text metafield, but that has the issues mentioned above).

Adding ‘Related Products’ and ‘Related Articles’ sections can be a powerful way to improve the cohesion of your online store and ultimately drive recognition and sales. This blog post explained how to do that, working around the limitations of Shopify and Liquid. And, if you’re looking for a Shopify developer to implement this or another feature, please reach out and we’ll see how we can help you.