Creating a Related Products Section

In this advanced tutorial, we'll show you how to create a related products section on your product pages. You will be able to choose exactly which products will be displayed in the section on any of your product pages.

In this example, we will walk you through how to set up a product reference field and configure it to display a few related products on any given product page. We will provide the code necessary and explain where it all needs to go. The coding is generic, you just need to copy and paste it in the right places and it will work. No changes necessary.

*Please note, this tutorial is provided as a starting place for experienced coders. We cannot provide support for your custom development efforts. If you're not comfortable coding, we suggest hiring a professional to build this for you. 

STEP 1: Create a product_reference fields in the app. In this example related products will look best when there are between three and four products total. For this example, we used four. Your theme may look better with more or less.

This field type will reference any number of products on a product page.

Please also note that in order for the rest of the tutorial to work, the field must be called Product Reference and the machine name, product_reference. 

STEP 2: Locate Your Template

Next, open your product.liquid template by clicking the link in the Theme Info section of the app. You can also access this template by navigating through your store to the active theme. The link in the app is a helpful shortcut.

Tip: Depending on your Shopify theme, all the product info would be either displayed in this template, or in the product-template.liquid section. Check your product.liquid template. If it looks like the screenshot below, open the section template instead.

2.2 Ctrl+F (CMD+F for Mac) and search the file for "product.description" below this is where our HTML/liquid coding will go.

2.3 Update product-template.liquid to include the code

Copy and paste this code where it is specified in the above image and click save at the top right. 

STEP 3: Click on Add a new asset in the Assets folder

3.1 Add a new blank file and call it "custom-fields-related-products.css"

3.2   Then, copy and paste this code into the new file

STEP 4: Reference the new stylesheet in "theme.liquid"

Search "theme.liquid" for "</head>" paste this code right above it.

STEP 5: Fill in the Custom Field values on a test product and check your work!

You should now have four related products lined up underneath the product description!