Tabbed Native Search Experience

Online Store and Theme Development
, ,
1

Hi everyone,

I’m looking for advice or examples on implementing a ‘tabbed’ search experience without relying heavily on JavaScript or using an app like Boost PFS.

I’m building a lightweight boilerplate for my team, and design frequently opts for this type of UI (see example screenshot). A recurring challenge we face is paginating products, pages, and articles separately and accurately. We typically use a ‘load more’ feature but occasionally fall back on traditional pagination. Sort and filtering can also get funky at times, so we typically have to sacrifice certain rich features.

In the past, we’ve used alternate templates to make multiple search calls and pre-build product results on load. However, I feel this approach undermines the advantages of rendering search results with Liquid.

Any insights or suggestions would be greatly appreciated. Thanks in advance!

Screenshot 2024-12-12 at 3.01.50 PM
Screenshot 2024-12-12 at 3.01.50 PM1688×1325 210 KB

1 Like
2

A practical solution is to use the tab query parameter to switch between separate paginate blocks, each defined in its own snippet. For example:

  • snippets/search-products.liquid
  • snippets/search-articles.liquid
  • snippets/search-pages.liquid

Each snippet could contain a paginate block. Then in search.liquid:

{% if tab == 'products' %}
  {% include 'search-products' %}
{% elsif tab == 'articles' %}
  {% include 'search-articles' %}
{% elsif tab == 'pages' %}
  {% include 'search-pages' %}
{% endif %}

Since you only include one snippet at a time, you adhere to the single paginate block rule per request. Each snippet handles its own pagination, sorting, and rendering.

Link your tabbed navigation to these URLs so that a user clicking a tab triggers a full page load with the corresponding resource type:

<ul class="search-tabs">
  <li><a href="?q={{ search.terms }}&tab=products">Products</a></li>
  <li><a href="?q={{ search.terms }}&tab=articles">Articles</a></li>
  <li><a href="?q={{ search.terms }}&tab=pages">Pages</a></li>
</ul>

This multi-tab parameter approach is a good compromise:

  • It is SEO-friendly: each tab has its own URL to be indexed by search engines.
  • You get full control over pagination and sorting.

You do lose the single-page “SPA-like” feel, but you gain maintainability and performance, especially if the priority is a lightweight boilerplate.