customize shopify search results page

How to Customize the Search Results Page in Shopify

Rate this article

Share this article

In the fast-paced world of e-commerce, a seamless and efficient search experience is paramount for online store success. Shopify, being a popular e-commerce platform, offers a robust search functionality, but optimizing it further can significantly enhance user satisfaction and boost conversions. In this guide, we’ll explore the importance of optimizing Shopify search results and provide actionable tips to elevate the overall user experience.

The Importance of Optimizing Search Results on Shopify:

1. User Engagement and Retention:

A well-optimized search function encourages users to explore your website, find products easily, and stay engaged. By providing relevant and accurate search results, you increase the likelihood of users finding what they’re looking for, leading to improved user retention.

2. Conversion Rates:

Efficient search results directly impact conversion rates. When users can quickly locate and purchase their desired products, it reduces friction in the buying process, ultimately contributing to higher conversion rates.

3. Customer Satisfaction:

Customer satisfaction is a key metric for the success of any online store. A positive search experience ensures that customers can easily navigate your site, find products effortlessly, and have an overall enjoyable shopping experience.

Tips for Optimizing Shopify Search Results:

1. Implement Autocomplete Suggestions:

Enhance the search bar with autocomplete suggestions to assist users in finding products faster. Utilize algorithms that consider popular searches, previous user interactions, and trending items to provide relevant suggestions.

2. Integrate Visual Search:

Visual search functionality allows users to search for products using images. This feature can be particularly beneficial for fashion and home decor stores where customers may have a specific visual preference in mind.

3. Utilize Synonyms and Misspelling Corrections:

Account for user errors by incorporating synonym recognition and misspelling corrections. This ensures that even if a user makes a typing mistake or uses different terms, the search results remain accurate and helpful.

4. Prioritize Relevant Results:

Implement algorithms that prioritize products based on popularity, relevance, and user behavior. This ensures that the most relevant items appear at the top of the search results, increasing the likelihood of conversions.

5. Optimize Product Descriptions and Metadata:

Ensure that product descriptions and metadata are well-crafted and contain relevant keywords. This not only helps search engines index your products effectively but also improves the accuracy of search results.

6. Regularly Analyze Search Analytics:

Leverage Shopify’s analytics tools to understand user search patterns and behaviours. Regularly analyze search queries to identify trends, popular products, and areas for improvement in the search experience.

Customizing Shopify Search Results for Enhanced Performance:

Shopify is a great platform to launch your e-commerce store. Unfortunately, the default search function is not so great. So it would need some customization to make it perform better. In this article, we will check out how to create a Shopify search results page in the easiest way possible. 

customize shopify search results page

 

Install Expertrec smart search bar to your shopify store 

Manual Customization Using Theme Code:

If you prefer a more hands-on approach, you can customize your storefront search by editing the theme code. Here are some customization options:

Searching only for certain types

You can restrict the type of objects that are returned by the online store search. For example, you can choose to return products, but not pages or articles. To control the objects that are returned, you need to use the type parameter.

The options are:

  • product – Search results contain matching products only.
  • article – Search results contain matching blog articles only.
  • page – Search results contain matching pages only.

The type parameter can include any combination of productpage, and article separated by commas. For example, if you only want to search for product and article results, then the type can be specified as article,product.

The default type is article,page,product, which means that search results will contain matching blog articles, pages, and products.

You can set the type parameter by using a hidden field in the search form within search.liquid.

<form method=“get” action=“/search”> <input type=“hidden” name=“type” value=“product” /></form>

Sorting search results based on product availability

You can use the unavailable_products option in your theme code to change the order in which search results are returned based on product availability. The options are:

  • show – Search results are sorted by relevance.
  • hide – Search results are sorted by relevance, and unavailable products will not appear in the search results.
  • last – Search results are sorted by availability and then by relevance. This means that unavailable products are pushed below other matching search results.

The default value is last.

If you want to sort unavailable products by another value than the default, then you can add a hidden field in the search form within search.liquid.

<form method=“get” action=“/search”> <input type=“hidden” name=“options[unavailable_products]” value=“show” /></form>

Enabling partial word matches

You can specify whether a partial word match should be applied to the last term in a search query. This means that the search will attempt to complete the last word of the search query. For example, if a query is made on winter snow, then a search will be made on all resources that contain the term winter and a term that starts with snow such as snowsnowboard, or snowshoe.

Partial word matches can be enabled by setting an prefix option in your theme code. The options are:

  • last – Partial word matches are enabled for the last search term.
  • none – No partial word matches are performed.

The default value is none.

If you want to enable partial word matches on the last term, then you can add a hidden field in the search form within search.liquid.

<form method=“get” action=“/search”> <input type=“hidden” name=“options[prefix]” value=“last” /></form>

Easy Way- Customizing Using an App

An easy way to add the search results page in Shopify is to install the Expertrec smart search bar app from the Shopify app store. This by default creates a Shopify search engine that has an auto-complete and search results page that you can make changes to suit your website’s needs. 

YouTube video

 

Once you install this app, you will see a search engine similar to the image below that hooks to the existing search box similar to the image below. You can see the voice search icon as well which lets your site visitors search by voice.

It also installs a search results page similar to the image below. It has the following features-

  1. Sort by popularity.
  2. Sort by price: low to high, high to low.
  3. Price slider.
  4. Filters for categories, product types, and more.

Once you install this app, you can customize your search results page inside your control panel.

search results page shopify

Manually customizing the default Shopify search results page

By default, Expertrec App creates a page with the handle “expertrec-search” which will be accessible with URL yourstore.myshopify.com/pages/expertrec-search .To customize this page, follow these steps:

  1. Navigate to your dashboard https://cse.expertrec.com/ecom/home  
  2. Under UI-Customization there are a lot of options like layout, custom CSS editor, pagination, filters, etc. 

Install Expertrec smart search bar to your shopify store

Creating a new search results page in Shopify

Shopify allows you to create custom pages, but it does not allow easy customization on top of it. Here are steps to create a new search results page in Shopify

  1. Install ExpertRec’s Smart Search bar plugin.
  2. Login to your shopify admin panel.
  3. Go to your admin page at yourStore.myshopify.com/admin
  4. Using the left menu pane, navigate to Online Store -> Pagesshopify custom search results page
  5. Click on Add Page to open up the page editor. 
  6. Use the <> icon to toggle to HTML mode. You can write HTML code here if you are coder.
  7. I suggest that you add the <ci-search-results></ci-search-results> tag that comes with ExpertRec’s Smart Search bar plugin here and does the customization without any coding from the plugins dashboard.shopify custom search results pageshopify custom search results page
  8. In your ExpertRec dashboard, make sure that you have switched to search results on a different page mode and that you have to set the path to the search results page as page/your-page-path.shopify custom search results page

Conclusion:

Investing time and effort into optimizing your Shopify search results is a strategic move that can yield significant benefits. By prioritizing user experience and implementing advanced search functionalities, you not only enhance customer satisfaction but also contribute to increased engagement and conversions. Keep refining your search strategy, stay attuned to customer feedback, and watch your Shopify store thrive in the competitive e-commerce landscape.

 FAQs

How to hide sold-out products from search results on Expertrec.

Searching for a product to see the out-of-stock sign or symbol on it can be depressing for both the business owner and the user. So most e-commerce stores hide the sold-out products from appearing on the search results page to prevent customers from adding such products to their cart. However, replacing the sold product with a similar one that might interest the customer is advisable. 

These tactics ensure you don’t lose a customer due to being out of stock. And to find out how to hide sold products from appearing in search results, follow the steps below.

  1. Go to the Expertrec control panel and navigate to the Store-preference section.
  2. Choose Exclude or Demote option to hide/demote the out-of-stock products.
  3. Click on Update to save the changes.

The out-of-stock product will not be displayed or demoted in the search results accordingly.

How do I edit a product page on Shopify?

Your product page is your most significant selling point as an e-commerce store owner. Therefore, your product page should be designed in a way that captivates the attention of your visitors. Image quality, description, and arrangements are essential factors in a product page. 

Shopify winning the top 3 best e-commerce platforms, comes with a customizable product page service. You can edit your product page to look exactly how you want it. You can add or remove products and also be able to edit product descriptions. Follow the steps below to learn how to implement changes on your Shopify product page.

  1. Add a new product. 
  • Go to products and all products on the Shopify app.
  • Click the plus icon and then enter a title and description for your product. 
  • Then tap save.
  1. Edit a product.
  • Go to products from your Shopify admin account.
  • Select the product you want to effect changes.
  • Make the changes you want and click save.
  1. Add or remove tags.

 Add tags

  • Go to products from your Shopify admin account.
  • Select the product you want to tag or create a new product.
  • Scroll to the organization section, and select a tag for your product. Tags can contain up to 255 characters and are separated with the help of a comma.
  • Click save when you are done.

Remove tags

  • Follow the same steps written above.
  • Click the x close to the tag instead of writing a new one.
  • Then save
  1. Delete a product. 
  • Follow step one as written above.
  • On the products section, click on the product details you want to delete.
  • Select delete product, and it’s gone.
  1. To Archive a product.
  • Follow the procedures as written above for numbers one and two.
  • Then Click on archive product instead of delete product.

Please Note that to delete products on Shopify means you want them gone permanently. If you do not wish to display a product or want to remove a product from the page temporarily, then you should archive the product instead. It will be sent to your archive tab, where you can restore it if you want.

 

Install Expertrec smart search bar to your shopify store

 

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like