How to Customize the Search Results Page in Shopify

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. 

 

Install Expertrec smart search bar to your shopify store 

Customization by editing the search.liquid

You can edit your storefront search to customize the kinds of results that are displayed. This can be done by editing your theme code. There are a few different ways that you can customize your storefront search:

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 product, page, 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 snow, snowboard, 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. 

 

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.

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. 

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 -> Pages
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.
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.

 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.

2. 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.

3. 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

4. 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.

5. 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.