Shopify themes can sometimes limit how you showcase product recommendations. If you want more flexibility in displaying related products, modifying your theme code can be the solution.

This guide will give you a step-by-step approach to adding custom product recommendations, allowing you to tailor product suggestions to specific pages or sections, enhancing product discovery, and boosting your sales potential.

Let’s go!

Table of content

• What the theme code to recommend products is
• How to modify the theme code to recommend products in sectioned theme
• How to modify the theme code to recommend products in non-sectioned them

What the theme code to recommend products is

Theme code is the code that shows customers’ current product and other relevant items. For instance, you are opening an online fashion shop. Your customer choose a maxi dress in summer collection, then after the dress is put into a shopping cart, other items in the summer collection are also suggested for buyers.

Attention: These steps below are at advanced level and require knowledge about web design languages namely HTML, CSS, JavaScript, and Liquid. Therefore, if you encounter any difficulties, you should hire a technology expert to help you. Besides, you should know which theme you are using in order to follow the right process.

Let’s move to the next part to modify the theme code.

How to modify the theme code to recommend products in sectioned theme

• 
  

  Step 1: You access Shopify admin, click Online Store and go to Themes.

  
  
• 
  

  Step 2: Find the themes that you want to edit, then press Actions then Edit Code.

  
  
• 
  

  Step 3: Open Templates directory, click product.liquid.

  
  
• 
  

  Step 4: Find the line of the liquid code:

  
  

{% section 'product-template' %}

Then, generate a new line below the one that you find and paste this code:

{% section 'related-products' %}

• Step 5: In the Section, open Add a new section:

• 
  

  Step 6: Create a new section: first, put the name of the section related-products. Then, tab Create section, your new file will appear in the code editor. Next, remove all of the default code in the new section file in order to empty the file.

  
  
• 
  

  Step 7: Paste the code into your file name related-products.liquid file. Remember each pasted code is different from each other.

  
  

Boundless

Copy and paste this code hosted on GitHub in related-products.liquid file.

Debut

Copy and paste this code hosted on GitHub in related-products.liquid file.

Jumpstart

Copy and paste this code hosted on GitHub in related-products.liquid file.

Venture

Copy and paste this code hosted on GitHub in related-products.liquid file.

Other Shopify themes

Copy and paste this code hosted on GitHub in related-products.liquid file.

• Step 8: Remember to Save.

To modify the theme code to recommend products in sectioned theme for iPhone/Android (Click here)

Step 1: You access the Shopify app, click Store.

Step 2: Open Online Store in the Sales Channels section.

Step 3: Tap Manage themes.

Step 4: Find the themes that you want to edit, then press Actions then Edit Code.

Step 5: Find the line of the liquid code:

{% section 'product-template' %}

Then, generate a new line below the one that you find and paste this code:

{% section 'related-products' %}

Step 6: In the Section, open Add a new section:

Step 7: Create a new section: first, put the name of the section related-products. Then, tab Create section, your new file will appear in the code editor. Next, remove all of the default code in the new section file in order to empty the file.

Step 8: Paste the code into your file named related-products.liquid file. Remember each pasted code is different from each other.

Next, with each sectioned theme that you are using, you paste the different code (Look at the previous case and paste the code into the related-products.liquidfile).

Step 9: Save.

How to modify the theme code to recommend products in non-sectioned theme

• 
  

  Step 1: You access Shopify admin, click Online Store and go to Themes.

  
  
• 
  

  Step 2: Find the themes that you want to edit, then press Actions then Edit Code.

  
  
• 
  

  Step 3: Look at Snippets directory and click to open Add a new snippet.

  
  
• 
  

  Step 4: Create a new snippet: first, put the name of the new snippet related-products, then click to create a new file which will appear in the code editor.

  
  
• 
  

  Step 5: Paste this code hosted on GitHub into related-products.liquid file.
  
  Each file has different pasted codes so, you look at the code on step 7 of case 1, sectioned theme.

  
  
• 
  

  Step 6: Remember to click Save.

  
  
• 
  

  Step 7: Open product.liquid in Template directory.

  
  
• 
  

  Step 8: At the end of the file, paste the code below:

  
  

{% include 'related-products' %}

• Step 9: Click Save.

{% include 'related-products' %}

Bottom Line

While it may seem technical at first, the process of modifying the theme code for recommended products on Shopify is manageable with the simple steps above and a bit of patience. Take your time, follow our guide, and remember to test your changes.