Like all popular Content Management Systems, Shopify has also made it difficult to edit the source code of a website directly. The scope of this article is limited to creating/customizing a search results page but it can still shed some light on creating and editing pages in Shopify. I will try to go over two things in this article.
- Customizing the default search results page that comes along with the Shopify theme
- Creating a brand new page and redirecting the search results there using ExpertRec’s Smart Search bar plugin.
How to customize the default Shopify search results page?
By default, Shopify search redirects you to a /search page. To customize this page, follow these steps:
- Navigate to your admin page at yourStore.myshopify.com/admin
- Using the left menu pane, navigate to Online Store -> Themes
- For the current theme, click on Actions -> Edit Code
- This will open up the code editor. Search for the file search.liquid and open it
- You can modify this file using HTML/CSS to any extent you wish to get the desired customization. If you are not the tech-savvy then you can add the <ci-search-results></ci-search-results> tag that comes with ExpertRec’s Smart Search bar plugin here and do the customization without any coding from the plugins dashboard. In the latter case, no other code is generally required. Of course, if you know what you are doing, then you can add your own code as well!
How to create a new search results page in Shopify
Now, this one is a little more tricky. Shopify allows you to create custom pages, but it does not allow a ton of customization on top of it. While using this method, I strictly recommend using the plugin I mentioned in the start to make the search results page.
- Make sure that you have installed ExpertRec’s Smart Search bar plugin
- Here’s how you can make a new page. Go to your admin page at yourStore.myshopify.com/admin
- Using the left menu pane, navigate to Online Store -> Pages
- Click on Add Page to open up the page editor. The settings are pretty self-explanatory. But it doesn’t give a lot of options to customize the appearance of the page.
- Use the <> icon to toggle HTML mode. You can write minimal HTML code here. I suggest that you add the <ci-search-results></ci-search-results> tag that comes with ExpertRec’s Smart Search bar plugin here and do the customization without any coding from the plugins dashboard.
- 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.
And that’s it! These are two easy ways to set up a custom search results page in Shopify.