4 Design Tips for Search Results Pages Shopify Merchants Should Know

June 17, 2024

June 28, 2021

•

3 min read

Search is an important interaction in the context of online shopping. Customers not only perform a search on worldwide search engines like Google and Bing, but they also type their queries on the little site search box. While online merchants can't modify the design as well as their ranking on Google's SERPs, they can absolutely optimize the one on their own e-commerce website to stimulate site search experience and boost conversion rate. For more search UI/UX tips, check out this article. Today, let's keep the limelight on the Shoopify search results page, the end of the site search journey, and also the final bridge between the online shoppers and their desired products.

If you are starting with your online stores or you are experiencing low conversion on the results page, check out the following design tips to apply for your Shopify stores.

All successful pages in terms of conversion begin with an appropriate layout. To have a consistent experience through all website pages, the rule of thumb is to make the search results page similar to the collection page and more.

If you have the vertical filter on the left-hand side of the collection pages, then it should have the same position on the results page. List view in the collections, list view in the search results.

In case you are building everything from scratch, you may wonder what's the difference between a side filter and a top filter? Between list view and grid view? Here is the answer.

The right filters for Shopify search results pages

The left-hand vertical filter sidebar has been long applied in most e-commerce sites. However, the younger brother, horizontal filter toolbar, is gaining popularity recently. A Baymard study indicates that 24% of top 50 US E-commerce businesses favor a top filter tree combined with sorting options. Eye concentration is incredibly high in the center of the desktop viewport, which is usually the position of the first 3 products in the product listing and the horizontal filtering toolbar (if any).

This heat map was the result of an eye-tracking study carried out by Baymard. The top horizontal filters get far more attention than the left-side filters.

Still, the top filtering toolbar has one big shortcoming: there is not enough space to accommodate too many filter options. So how many is “too many"?. According to our observation, the perfect number is around 4-5 filters in Shopify stores for the top position. A custom drop-down is also an excellent idea to optimize the space for filter option values, but the chosen value shouldn't be hidden in the drop-down. Online shoppers need to be aware of the applied filters and be able to delete them in a quick and easy way.

Look at the way GAP designs the horizontal filtering toolbar on their search results page. The width of the filters doesn't exceed the width of the product listing. The filter option values are hidden in the drop-down so the overall filter tree doesn't take up too much space. However, the “refined by" values are displayed neatly right below the filter, on a slightly different background color. Shoppers can instantly remove applied filters by clicking the (x) button or CLEAR ALL.

List view or Grid view for search results

Next comes the concern about List view vs Grid view.

List view: suitable to show product details, useful for electronics devices with lots of specifications that are important for shoppers to make a purchasing decision.
Grid view: is the best option to enhance the product visuals. In some sectors where appearance is the prime factor such as fashion and household decorations, Grid view is a must.

If you have diverse categories, consider combining these two views and let customers choose how they want to see the product listing.

For products like cameras and lenses, both the specifications and the look are important. That's why Sony offers both List view and Grid view.

The best pagination style for Shopify search results pages

The final troublesome decision to make regarding the search results page design is about pagination styles. Whether a “Load more" button, infinite scrolling, or the standard pagination is the best is still an open question to specific web pages.

Pages in the search results make customers spend more time on the first page, so the downside is they are less likely to browse the next pages. In large-scale usability testing, Baymard points out that test subjects usually consider pagination as slow and discouraging for product discovery.

Endless scrolling brings an extremely smooth and seamless experience with the least interruption. As a result, customers can quickly browse through all the search results. They will view far more products when using infinite scrolling than when using the “Load more" button or standard pagination. However, because it's too easy to just scroll down and down, online shoppers are focusing less on individual products. They are just scanning and not paying attention, therefore, conversion is insignificant.

Although only 8% of the surveyed sites in the Baymard study are using it, the “Load more" button is well received by test subjects. It requires fewer interactions to show more results than classic pagination, so customers tend to browse more products. They also pay more attention to the displayed items than with infinite scrolling.

On the Shopify search results page, we would want the shoppers to keep their focus on the first set of results instead of quickly scanning all products. That’s why a “Load more" button or standard pagination works better than infinite loading.

A “Load more" button and classic pagination are usually used on search results pages to make online customers focus on the displayed items. (Source: Seven Friday, Red Dress)

What to showcase in the product listing info

Did you know that up to 46% of top US e-commerce websites display insufficient content in the product listing?

Lacking essential information can keep shoppers going back and forth between the product page and product list, such a big nuisance in UX. There are two criteria to define an optimized product list design:

It displays sufficient information so customers can adequately assess the product's fit.
It also enables shoppers to quickly compare and contrast between displayed items.

The second requirement can be easily satisfied by choosing the right view as we mention above. However, the first one is not that simple.

Searchers usually have a clear visualization of what they want. With appropriate information, they can come to the purchasing decision shortly. The thing is, e-commerce websites often fail to do it. It's easier to fall into the extreme of “too less" or “too much" than to stay within the sufficient limit when it comes to information displayed on the product list.

Don't worry, we are here to help. The list items should embrace 2 types of product attributes: the universal ones and the industry-specific ones.

The common information for all product lists is Thumbnail, Title, Price, Variation, and Average rating. The first three attributes are absolutely necessary, no question about it. What about product variations and the review rating? Why do you need to display them?

Different sizes, colors, materials, etc can make a huge difference to a product, but the thumbnail can't show this. Indication for various colors, for example, urges the searchers to view the product page if they like the dress's design but don't like the white color in the thumbnail.

Also, product reviews impact the purchasing decision of up to 93% of customers. When all other conditions are roughly the same, online shoppers consult reviews to choose the final product. A higher rating is associated with good quality and value for money. Keep in mind that both the average rating and the number of reviews should be included in the product list as consumers find the simple star rating system useless without the number of ratings.

Nine West is an excellent example of “sufficient" product information on search results pages.

In certain businesses, you may want to include other attributes that are uniquely important for that product category. For example, recommended age span is helpful for customers when searching on an online toy store. On the other hand, dropshipping businesses should display estimated shipping time, inventory location, or shopping availability.

Another great practice for the product listing is to use the hover effect or “Quick view” button to show more information.

Online shoppers can see size variants when they hover at the product thumbnails on Camilla's search results page.

Recap

Search results pages are where the conversion rate can double, so it's definitely worth spending time and effort to have an optimal UI/UX design. We hope that these above-mentioned tips have given you enough ideas and inspiration to rebuild or make effective changes to your Shopify search results' layout.

Catch up with the latest trends in e-commerce by following our social channels on Facebook, LinkedIn, Twitter, or Youtube. We'll be back in no time!

Ellie Ho

•

Content Marketing Specialist

June 28, 2021

•

3 min read

There's More

4 Design Tips for Search Results Pages Shopify Merchants Should Know

Shopping shouldn’t feel like a chore

Related Posts

How To Maximize Email Conversion Rates With AI Product Recommendations

What is semantic search? How AI captures more sales through your search bar

Checkbox, dropdown or swatch? How to choose the right filter UI pattern for your Shopify store