I’m trying to create a custom search feature for my Shopify store that can look through both collection names and product titles at the same time. Right now I’m stuck because I can’t figure out the right approach.
I’ve been going through the official documentation but it’s not clear to me how to set this up properly. The default search seems limited and I need something more specific.
Has anyone implemented something like this before? I’m looking for guidance on which APIs or liquid filters would work best for this kind of dual search functionality. Any code examples or step-by-step instructions would be really helpful.
I’m comfortable with basic liquid templating but this search customization is more complex than what I usually work with.
Built this exact thing six months ago for an electronics store client. Skip pure Liquid templating - combine the Storefront API with custom JavaScript instead. I created an AJAX endpoint that hits both collections and products at once using GraphQL. You can search collections by handle and title, then merge those with product results from the same query. The tricky bit is relevance scoring. You’ll need to decide if exact matches get priority and whether collections should rank above products. Debounce the search input and cap initial results at 10-15 items to keep things fast. Watch out for the different object structures between collections and products when you’re displaying results. If you’re decent with JavaScript, this approach beats forcing Liquid to do the heavy work.
Been there with Shopify’s search - it’s pretty limited. Manual coding works but becomes a nightmare to maintain.
Had the same issue last year. Instead of fighting with Liquid templates, I automated the entire search process. Built a workflow that grabs data from collections and products, processes queries, and spits out unified results.
Best part? You can add fuzzy matching, weighted results, even hook up Algolia - all without touching Shopify code. Everything syncs in real-time when products or collections change.
Just set triggers for product updates, collection changes, and search requests. The automation handles API calls and data processing behind the scenes.
Scales way better than custom Liquid and you can add search analytics or personalized results later.
Check out Latenode for this kind of search automation: https://latenode.com
Had this exact issue with a fashion retailer’s search setup. I went with a hybrid approach - hit Liquid’s predictive_search endpoint while also filtering collections using {% assign matching_collections = collections | where: 'title' contains search.terms %}. Run both requests in parallel, then merge the results in your template with unified display logic. Performance was actually pretty solid since predictive search is already optimized. Watch out for collection names that match product titles though - you’ll need deduplication logic. I’d also add search result categories so users can tell collection matches from product matches.
I encountered a similar challenge recently while working on a Shopify store. To achieve a custom search, you will need to utilize the search API alongside custom liquid logic in your template. Begin by adjusting the search.liquid file to execute two distinct queries: one for collections with the collections object and the other for products via search.results. For matching collection names, you can use the condition collection.title contains search.terms. Processing the results for both collections and products can be tricky, so ensure they display harmoniously. For real-time updates, consider the Ajax API, but be aware that performance issues may arise with larger inventories, so implementing some form of caching or limiting the number of results is advisable.
Honestly, search.liquid with custom filtering is your best bet. Loop through search.results and check if each result’s a collection or product, then display accordingly. For collections, use {% for collection in collections %} with collection.title contains search.terms. It’s hacky but beats dealing with APIs or JavaScript.