Creating a Related Products Section

Overview

This tutorial covers the coding and setup create a static list of related products when viewing a product on the front-end of the store. Any code is copy/paste.

This tutorial will walk through:

1. Creating a Product Reference field & customizing the template code. 
2. Updating your theme to print the template.

Create a Product Reference Field

From the left sidebar, click on Products, then +Field. Create a Product Reference field. You can name it anything you like but make sure the key (at the end) remains "related_products" otherwise the rest of the tutorial will not work.

Paste In The Code

Copy this code to your clipboard. CSS, HTML & Liquid code are included in one file for simplicity. Feel free to edit the CSS to match your store's look and feel, or move the contents into your theme's CSS file.

From the left sidebar, click on Products, then Configure Fields. Locate your new field and click on the Code icon. Generate the template and paste in the code copied earlier. Save the code.

Add Test Content

From the left sidebar, click on Products. Locate a test product from the list. Reference a few products in the new field. Save the product.

Place the Field for Display

From the left sidebar choose Products then Display Fields. Enable the field for display in the Inner Area.

Test

View your test product in your store and confirm it displays as expected.