Fixing Shopify Horizon Search: Display Pages & Blogs on Your Results Page

Hey fellow store owners! Ever noticed something a little quirky with your Shopify store's search function, especially if you're rocking the Horizon theme? We recently had a great discussion pop up in the Shopify community that really hit home for a lot of folks. Our friend kevalt brought up a super common head-scratcher: why do pages and blog articles show up perfectly in the predictive search dropdown, but then vanish into thin air on the actual search results page?

It's a frustrating experience, right? You type something in, see the relevant page or blog post flash before your eyes, hit enter, and... poof! Only products. It makes you wonder if your content isn't being indexed, or if something's fundamentally broken. Good news: it's not broken, and your content is definitely indexed! It's actually a fascinating little nuance in how different Shopify themes are built, and the community really dug in to explain and solve it.

The Mystery Unraveled: Predictive vs. Full Search

So, what's really going on here? The brilliant minds in our community, like AnneLuo and Sajini from Identixweb, quickly pinpointed the core issue. It boils down to a fundamental difference in how themes like Dawn and Horizon approach search.

Think of it this way: the Dawn theme is often designed for a more "site-wide search" experience. When you search on Dawn, it's typically set up to display products, pages, and blog articles all together on the main search results page. It's comprehensive and aims to help customers find any relevant information across your entire store.

The Horizon theme, however, often takes a more "product-focused search" approach. While its predictive search (that handy dropdown that appears as you type) is usually robust enough to pull in suggestions from products, pages, and blog articles, the full search results page (the one you land on after hitting enter, typically at /search) is often intentionally limited to showing only products. This isn't a Shopify platform limitation; it's a design choice within the theme's Liquid code.

Why Horizon Behaves Differently: A Theme Design Philosophy

The core reason for this discrepancy lies in the theme's Liquid code implementation. Shopify's search functionality is powerful, indexing all your store's content by default. However, how that content is displayed on the search results page is entirely up to the theme's developers.

• Predictive Search: This feature often uses a separate Liquid file (e.g., predictive-search.liquid or a related snippet) and JavaScript to fetch and display a broader range of results quickly, including products, pages, and articles. It's designed for speed and suggestions.
• Full Search Results Page: The main /search page typically renders its results using files like search-results.liquid or main-search.liquid. In product-focused themes like Horizon, this template might include filters or conditions that explicitly limit the displayed results to only object_type == 'product'.

Essentially, while Shopify knows about all your content, the Horizon theme's default setup for the main search results page tells it, "Hey, only show me the products here!"

Diving into the Code: Where to Look and What to Find

To fix this, you'll need to venture into your theme's code. Don't worry, it's not as daunting as it sounds! Always remember to duplicate your theme before making any changes, so you have a safe backup.

Go to Online Store > Themes > Actions > Edit code.

1. The Search Form: Broadening the Query Type

The first place to check is the search input itself. Sometimes, a hidden input field within the search form explicitly tells Shopify what types of results to fetch. Look for files like search-input.liquid or snippets related to your search bar.

You might find a line similar to this:

This line restricts the search to only products. To include pages and articles, you need to modify the value attribute:

This tells Shopify to fetch results for products, pages, and articles when the search is submitted.

2. The Results Page: Updating Rendering Logic

Next, you need to ensure the search results page itself is configured to display these additional content types. Look for files in the "Sections" or "Snippets" folders, such as:

• search-results.liquid
• main-search.liquid
• Any other search-related snippets

Within these files, you'll be looking for Liquid code that iterates through search results. You might find a line that filters the results, like this:

{% assign products = search.results | where: 'object_type', 'product' %}

This line explicitly filters the search.results to include only items with an object_type of 'product'. To display all result types, you can simply remove this filter:

{% assign all_results = search.results %}

After this, you'll need to adjust the rendering loop. Instead of just looping through products, you'll loop through all_results and add conditional logic to display each type appropriately. For example:

{% for item in all_results %}
  {% if item.object_type == 'product' %}
    
    
{{ item.title }}
    
{{ item.description | strip_html | truncatewords: 30 }}
  {% elsif item.object_type == 'page' %}
    
    
{{ item.title }}
    
{{ item.content | strip_html | truncatewords: 30 }}
  {% elsif item.object_type == 'article' %}
    
    
{{ item.title }}
    
{{ item.excerpt_or_content | strip_html | truncatewords: 30 }}
  {% endif %}
{% endfor %}

You'll need to adapt the rendering logic to match your theme's existing styling and structure for products, pages, and articles. This might involve creating separate snippets for each type or integrating them directly into the loop.

Pro Tips & Best Practices

• Always Backup: Before making any code changes, duplicate your theme. This is your safety net!
• Test Thoroughly: After implementing changes, test your search functionality extensively. Search for products, pages, and blog articles to ensure everything appears as expected and links correctly.
• Consider User Experience: When displaying different content types, think about how to present them clearly to the user. You might want to categorize results (e.g., "Products," "Pages," "Blog Posts") or use clear visual cues.
• Seek Professional Help: If you're uncomfortable with code, don't hesitate to reach out to Shopify experts or a development agency. Services like Shopping Cart Mover can assist with theme customizations and ensure a smooth, error-free implementation.

Conclusion

While the Horizon theme's default search might initially seem limited, understanding its underlying design philosophy and knowing where to tweak the Liquid code empowers you to unlock its full potential. By expanding your search results to include pages and blog articles, you not only improve the user experience but also boost the discoverability of all your valuable content, leading to a more engaging and comprehensive online store. Happy customizing!