How To: Add Related Articles To Products

  • Go to Metafield Configuration and click "Add Metafield" under product.

  • Enter "related-article-1" for metafield handle, then select "string" from the dropdown menu. Repeat this process but change the name of the metafield handle to "related-article-#" for each additional related article that you want to add. For this example we will use 3 related articles. Your configuration should look similar to the screenshot below:

    Click Save Configuration and click Go Back to Homepage.

  • Find the product you want to add metafields to. You can do this in 2 different ways.

    One way is through the metafields app. Click on Add Metafields. Then select product from the dropdown menu and click Search.

    The other way is through the Shopify dashboard. Navigate the product as you normally would through the shopify dashboard (click product find the products you want to edit and click the link.). Once you're on the product page in the Shopify dashboard, click the "..." button on the top right and select Add Metafields to product.

    Use the shortcut through the Shopify dashboard to make editing product metafields a snap
  • Once you've navigated to the product that you want to add metafields to, you simply need to add the handle of the related article. You can get the handle by viewing the article's public page and taking the last parameter of the url.

    For example, if you click on "View" from the Shopify admin product page, you will go to a url that looks something like https://mm-tutorials-store.myshopify.com/blogs/news/first-post the last part of the URL first-post is the article handle.

    Enter the article handles into the metafield slots as pictured below and click Save Metafields.

    You now have three related articles associated with that particular product. If you scroll down, you can see how they can be accessed within a .liquid template.

  • Now that you have the data set up. You can create the .liquid snippet that will display the related articles. You can download the .liquid code snippet here. Be sure to include the snippet on your product.liquid template by adding this line:

    {% include "mm-related-articles" %}

    Or view the snippet below:

    When it's all finished. Your should have related articles that look similar to the image below.