How can i dynamically add a blog article to my product page

Store Design
1

Hello

I have a few blog articles that are related to my products - i would like these articles to appear at the bottom of my product page dynamically

I cannot find a way for the article to appear and not the blog itself.

Thanks in advance

Regards

2

@TBS2023

I understand you’d like related blog articles to appear dynamically at the bottom of your product pages, instead of displaying the entire blog itself. This is achievable by using Shopify’s metafields or custom Liquid code.

Here’s how we can do it:

  1. Link Articles to Products:

    • We can use metafields to associate specific articles with each product.
    • Alternatively, we can dynamically pull articles based on product tags or categories.

  2. Customize Product Template:

    • I’ll modify the product page template to fetch and display only the selected articles.

This approach will ensure the related articles are displayed cleanly and dynamically on each product page.

3

can you please help me out on this

4

@TBS2023 Yes, of course! I’d be happy to help you out with this.

5

In case you are still interested in how to add a blog article to the product page dynamically, the following guide explains how to make it happen https://magefan.com/shopify/apps/blog/add-posts-to-product-pages

6

Hi @TBS2023

This is the cleanest and most flexible solution.

Go to Settings → Custom data → Products.
Create a new metafield:
Name: Related Articles
Namespace and key: custom.related_articles
Type: List of Articles

Open each product and select the relevant blog article(s).
In your product template or custom section, render the articles:

{% if product.metafields.custom.related_articles.value != blank %}

Related Articles

<div class="articles-grid">
  {% for article in product.metafields.custom.related_articles.value %}
    <article class="article-card">
      {% if article.image %}
        <a href="{{ article.url }}">
          {{ article.image | image_url: width: 600 | image_tag }}
        </a>
      {% endif %}

      <h3>
        <a href="{{ article.url }}">{{ article.title }}</a>
      </h3>

      <p>{{ article.excerpt | strip_html }}</p>

      <a href="{{ article.url }}">Read More</a>
    </article>
  {% endfor %}
</div>
{% endif %}