Creating a Related Products Section

Overview

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.

finish.PNG

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 are 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. 

Getting Started

1.) Create a Product Reference field 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.

Tip: 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. Be sure to check the boxes for Allow Multiple Selections and Exclude from display. This will make sure that you can have multiple products showing at the same time, and also that they don't just appear in plain text!

perfect.png

2.) Create a new Product Liquid Template field.

This field is used to carry our liquid coding. Don't Exclude this one from display. Click on Save New Field when you have finished creating it.

RelProd.png

This will bring you to the Edit Custom Fields screen. From here you can change the Label name, edit code, and Hide things from display (Under additional settings). Copy and paste this code into the editor, replacing what was previously there. Then Click on Update Settings.

Code.png

Theme Configuration

3.) Locate Your Template

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

Prodliq.png

This will take you to product.liquid in your theme code. The sidebar includes all your Sections, Assets, Templates, etc.

Sidebar.png

If you open the assets folder in this viewer you will see a link that says Add a new asset.

3.) Click on Add a new asset in the Assets folder

Add_a_new_asset.png

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

newblank.PNG

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

Tip: This is the CSS styling for the Related Products. If you wanted to change how it looks itself, this is where you would edit the code for that.

factsforlife.PNG

4.) Reference the new stylesheet in "theme.liquid"

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

pastedmofo.PNG

That's It!!

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

finish.PNG

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

Additional Information

Shopify Documentation: Theme Liquid Coding Guide

Custom Fields: Theming Tips & Tricks