Set up related products for your articles

This article will guide you in setting up and assigning related products for your blog posts.

Setting up the metafield

Navigate to your store’s admin, and in the bottom left corner click on “Settings“. Then navigate to “Custom Data” from the left-hand side menu and then click on “Blog posts“. You should be seeing the following screen (you may or may not have any metafield definitions yet):

Click on the top right button “Add definition“, and in the screen that appears enter the following settings:

Name: Related products (or any name you wish)

Namespace and key: custom.related_products. This metafield key is important that it’s named exactly like this.

Select type: Select the “Product” type, and then click on “List of values” from the next set of toggles.

The details should be exactly as in the screenshot below:

Once done, click on the “Save” button.

Adding related products on a blog post

After you’ve set up your metafield, you can assign related products to any blog post.

In your store’s admin, navigate to “Online store” and then on “Blog posts“, create or edit an existing post, and scroll all the way down to the “Metafields” section. You should see the Related products field we created earlier. If you don’t, click on the “Show all” link on the top right corner of the Metafields section.

Click on the Related products field

and then click on the “Select products” button to select products:

You can scroll or search for products. Once you select the products you want to add (make sure they are checked), click “Done“.

You should now see a list of your selected products. You can re-arrange them by dragging them from the handle on their left, or remove them from the minus sign on their right.

Make sure to Save your product before navigating away from the page.

Displaying related products

To enable displaying of related products on your blog posts, you need to customize your blog posts template.

Under the “Blog post” section on the left, click on “Add block” and select the “Related products” block. Once the block is added, select it, and on the right hand side of the screen, customize its options. You can set a Heading and Sub-heading to be displayed right before the related products, and optionally customize the information the appears for each product.