How to Fix Product Recommendations Not Showing on Shopify

If you run a Shopify store, you might use product recommendations to help customers find more items they will like. But sometimes, this feature can break. Your recommendations might flash on the screen for a second and then vanish. This guide will show you how to find the problem and fix it for good

Why are my product recommendations not showing?

The most common reason product recommendations disappear is a coding error in your theme. When a web browser loads your page and finds a mistake in the code, it can get confused. This often causes parts of the page, like the recommendations section, to not display properly. It is like a typo in a recipe that ruins the whole dish.

How to check your theme for errors

The first step is to look for simple mistakes in your theme’s code. These errors are often easy to fix once you find them. Here is what to look for:

Nested script tags: You should never have one <script> tag inside another. This is a common error that breaks page elements.
Incorrect Facebook Pixel code: Sometimes, added tracking code can be formatted wrong and cause conflicts.
Duplicate body tags: Your theme should only have one set of <body> and </body> tags. Having two pairs will confuse the browser.

Here is an example of problematic code that could cause issues. Notice the script tags are nested incorrectly:

<script><script>
  fbq('track', 'AddToCart', {
    contents: [
        {
            quantity: 1
        }
    ],
  });
</script>;<script>

The correct way to write this code is without the extra script tags:

<script>
  fbq('track', 'AddToCart', {
    contents: [
        {
            quantity: 1
        }
    ],
  });
</script>

Step-by-step guide to fix the problem

Follow these steps to find and correct the errors in your Shopify theme:

Back up your theme.
Before you change anything, go to your Shopify admin, click Online Store > Themes, and then select Actions > Duplicate. This creates a safe copy to work on. If anything goes wrong, your live store is not affected.
Edit the code.
On your duplicated theme, click Actions > Edit code. This opens the theme editor where you can see all the template files.
Search for errors.
Look through the files, especially the theme.liquid file in the Layout folder. Search for the common mistakes we listed above:
- Look for <script><script>.
- Look for <body> and see if it appears twice.
- Check for any recent code you added, like tracking pixels, that might have a typo.
Fix the errors.
When you find a problem, correct it. Remove the extra script tags or delete the duplicate body tags. Save the file after each change.
Test your store.
Open your live website in a new browser tab and check a product page. See if the product recommendations now load and stay visible. If they do, you have fixed the issue.

What to do if you are not comfortable editing code

If you do not want to edit the code yourself, you have two good options:

Restore a previous theme version.
Shopify saves your past theme changes. In the Themes section, click Actions > Edit code and then find the Version history button in the top right. You can preview and restore a version of your theme from before the problem started.
Contact a Shopify expert.
If the problem seems too complex, it is best to get help. You can hire a certified Shopify expert to diagnose and fix the issue for you quickly.

Final thoughts

Fixing product recommendations that will not show is usually about cleaning up the code. By checking for nested scripts, duplicate tags, and incorrect tracking code, you can often solve the problem yourself. Always remember to back up your theme before making changes. With a clean theme, your product recommendations will work smoothly, helping you boost sales and improve the customer experience.