How do I show blog posts on Shopify product pages and products in blog posts

Overview

Educational content can lift conversion when it appears where purchase intent is highest. On Shopify, you can surface relevant blog posts on product pages and embed products with add to cart options inside blog articles. This connects research to shopping and reduces friction.

In this tutorial, you will use Online Store 2.0 sections, metafields, and dynamic sources to curate or automate the connections. You will create metafields to store links between products and articles, render them in your theme templates, and add simple fallbacks and performance tips.

Everything here uses standard theme capabilities. No custom apps are required. You can always extend it later with custom Liquid or a section app if you need more control.

Content

Prerequisites and key concepts

You will work with three core features: blogs and articles, metafields, and dynamic sources. Articles live inside a blog. Metafields let you attach custom data to products and articles. Dynamic sources let sections and blocks bind to those metafields without code changes.

  • Blogs and articles are managed in your admin under Online Store and then Blog posts. Each article can have a featured image, tags, and rich content.
  • Metafields can store references to other resources, for example a list of articles on a product, or a list of products on an article.
  • Dynamic sources allow section settings to pull values from metafields so content updates do not require editing the theme code.

What you need enabled

  • Online Store 2.0 theme with JSON templates and sections everywhere.
  • Permissions to edit products, blog posts, and metafields in Shopify admin.
  • Theme editor access to add or configure sections on product and article templates.

See the official docs for blogs, metafields, and dynamic sources.

You will create a product metafield that references articles, then render those articles on the product template. This gives you curated control per product with a simple fallback to recent posts if no curation exists.

Step 1 - Create a product metafield for articles

  1. In Shopify admin, go to Settings and then Custom data and then Products.
  2. Click Add definition and set Name to Related articles and Namespace and key to custom.related_articles.
  3. For Type, choose Reference and then Articles, and enable List of values so you can attach multiple posts.
  4. Save the metafield definition.

Step 2 - Curate articles on each product

  1. Open a product in admin and scroll to the Metafields section.
  2. Click the Related articles metafield and select one or more articles that educate or answer common questions for this product.
  3. Save the product.

Step 3 - Render articles on the product template

  1. From Online Store and then Themes, click Customize to open the theme editor on your product template.
  2. Add a section that supports dynamic content, for example a Custom liquid section or a Rich text section configured for a list.
  3. Bind the section setting to the product metafield via dynamic sources. If your theme does not natively list articles, use a Custom liquid block and loop through product.metafields.custom.related_articles.

Tip - Show the article title, published date, and a short excerpt. Limit the list to three or four items for scannability.

How can I insert products into blog posts with add to cart options?

You will create an article metafield that references products, then render product cards or a product form in the article template. This lets readers add to cart without leaving the content.

Step 1 - Create an article metafield for products

  1. In Shopify admin, go to Settings and then Custom data and then Blog posts.
  2. Click Add definition and set Name to Featured products and Namespace and key to custom.featured_products.
  3. For Type, choose Reference and then Products, and enable List of values.
  4. Save the metafield definition.

Step 2 - Curate products on each article

  1. Open an article in admin and scroll to the Metafields section.
  2. Select one or more products that are relevant to the content.
  3. Save the article.

Step 3 - Render products in the article template

  1. Open the theme editor on your article template.
  2. Add a section or block that can render product cards. Many themes include a Product recommendations or Featured products section you can point to dynamic sources. Alternatively, use a Custom liquid block to render each selected product with price, availability, and an add to cart form.
  3. Test with a draft article and confirm products can be added to cart from the article page.

Side note - Keep purchase actions above the fold where possible. If articles are long, repeat the product block after major sections.

How do I automate content matching via tags or search?

When you cannot curate every page, use predictable tags or keywords on products and articles, then filter dynamically. Provide a manual override metafield so you can pin specific items when needed.

Step 1 - Choose a shared taxonomy

  • Pick one system, for example product tags like how-to, guide, or by ingredient, or a product metafield keyword string aligned with article tags.
  • Document the rules so authors and merchandisers apply tags consistently.

Step 2 - Implement a fallback query in Liquid

  • On product pages, if product.metafields.custom.related_articles is empty, list recent articles from a specific blog or filter by a shared tag that appears in product.tags.
  • On articles, if article metafield featured products is empty, display a collection of best sellers or filter products by a shared tag or keyword metafield.

Step 3 - Watch performance and relevance

  • Limit automated lists to a small number of items to reduce liquid loops on large catalogs.
  • Review click through and add to cart rates for each section and adjust curation or filters. You may need to set up custom tracking in Google Tag Manager or using another method.

Examples - Liquid snippets for templates

These examples show minimal Liquid you can place in a Custom liquid section or a small theme snippet. Adjust markup to match your theme components.


{% if product.metafields.custom.related_articles != blank %}
  
    
    {% for article in product.metafields.custom.related_articles %}
      
  • 
        {{ article.title }} ({{ article.url }})
        {{ article.published_at | date: "%b %d, %Y" }}
        {% if article.excerpt != blank %}
    {{ article.excerpt }}
    {% endif %}
      
    • 
    {% endfor %}
  

{% else %}
  {%- assign blog_handle = "news" -%}
  
    
    {% for a in blogs[blog_handle].articles limit: 3 %}
      
  • {{ a.title }} ({{ a.url }})
    • 
    {% endfor %}
  

{% endif %}

Loop featured products on article


{% if article.metafields.custom.featured_products != blank %}
  

    {% for product in article.metafields.custom.featured_products %}
      

        
{{ product.title }}

        
{{ product.url }}

        

          {% if product.available %}
            {{ product.price | money }}
          {% else %}
            Sold out
          {% endif %}
        

        

          
          
        

      

    {% endfor %}
  

{% endif %}

Tip - Prefer using your theme's product card and product form snippets if available so styling and accessibility are consistent.

FAQ and troubleshooting

Can I do this without editing code?

Yes. Many themes let you bind a dynamic source to a section for lists or rich content. When you need a custom layout, a small Custom liquid block works well.

Will this affect SEO?

It can help. Linking related articles to products increases internal linking and time on page. Keep content concise and avoid rendering very large lists that slow the page.

How do I keep content fresh?

Use curation for top products and a fallback that shows the latest articles for everything else. Review analytics monthly and retune curations.

Create beautiful bundles.

Bundles and kits on Shopify

Maximise your average order value with mix-and-match bundles and kits.

 View on app store

+ 7 day free trial