Pirx – a bean-shaped search bar design you’ll love

Sometimes “the best looking” feature just isn’t good enough for your shop. That’s why we’ve taken up the challenge and designed a brand new design of FiboSearch search bar. We want it to look the exact opposite to our straight and angular Solaris, our default bar – to give it a soft, curvy and rounded feel that blends smoothly into the front of the store. We called it Pirx.

The front page of your store is obviously the first thing your clients see when they visit. And the search bar is (in most cases) the pivotal point of your design. It’s often bold and visually distinctive from its surroundings. The main purpose is to grab the customers’ attention and pull them in naturally to search for products. However, the biggest players in e-commerce are not equivocal about the exact placement of the search bar nor its overall design. 

We decided to take up the challenge and design a brand new style for FiboSearch search bar. We called it Pirx. We wanted to achieve a softer, more curvy look. We started out with the best of intentions to let you select the bar code-less, by simply picking the suitable one from a drop-down list. With the help of GIFs, we’ll show you the design and describe it thoroughly.

A quick comparison of our first design, Solaris (default), and Pirx:

It’s worth noting here that Pirx works just as well on mobile devices as it does on desktops. The bean-shaped style nicely blends with your page and neatly corresponds to the mostly curved and smooth edges of today’s mobile devices. This style also resembles its desktop bigger counterpart – we’ll soon go into that in more detail in the article. Let’s take a look:

Table of Contents

• Selecting a style
• Designer talk
• Feedback

Ok, let’s see how to get this done!

Selecting a style

You can easily switch back and forth between both styles by picking the right one from a drop-down list. Please, from your dashboard go to WooCommerce → FiboSearch → Search bar tab → Appearance → select the style → save your settings at the bottom of the page

That’s it! Let’s see this on the front end:

Designer talk

All set and good! Now let’s see how this has changed the search bar design. Here is Solaris, the FiboSearch default, which we use in our internal testing shop, The Bookstore Online:

And here it’s the same store with Pirx:

As you can see, these two styles are really distinctive visually. First, we have Solaris, a slight variation of the most popular WooCommerce theme – Storefront. In our opinion, Solaris is much more streamlined and aesthetically pleasing. Moreover, we wanted to put function over form, as we find Storefront’s default too in-your-face and, obviously, with their brand’s go-to purplish color scheme. So, we aimed for a minimalistic and ready out-of-the-box style.

However, Pirx, the second one, is our first step towards more challenging and characteristic styles. We went for a bean-like shape, because it’s very often used across the web, and rightfully so. It’s also almost a perfect contrast to a rectangular shape offered by our Solaris style.

Moreover, the styles also differ in terms of how they behave once customers start typing their queries. Let’s have a look:

VS.

The main differences are:

• Upon hover, Pirx becomes distinguishably darker than Solaris 
• When customers click on the search bar:
  • Pirx’s immediate vicinity becomes a slightly rounded rectangle with solid white background
  • Additionally, Pirx uses the Darkened background feature and darkens all of the bar’s box background – read about it in detail in our blog post
  • The previously transparent border becomes a thin, solid black border, adding to the distinction between the search bar and its background
• Upon typing the very first character, the magnifier goes to the far right and switches from passive to a clickable submit button
• If three or more characters are typed, there is an “x” icon presented to the left of the magnifier – it is clickable and serves as a “clear all” button (however, the search bar is still active and allows customer to type another query; on such occasion, the magnifier returns to its default position, that is to the far left of the bar)
• Upon hitting the three-characters mark (or copy-pasting a longer phrase), autosuggestions are presented – within the same white box that separates Pirx from the darken background
• Customers can quit the search simply by clicking anywhere other than the search bar itself or the white container

Ok! We hope that you like this style and find it useful across your site.

Feedback

Great! We hope that you’re as excited as we are with our latest style. Please feel free to give it a try and share your thoughts – in the comments section or by  contacting our amazing support team Fill in the contact form here! . Drop us a line if you find any bugs or functionalities that make this style hard to use – we’ll be very glad to find out about that and we’ll do our best to improve too!

Keep in mind that this is the very first in a series of designs that we’re crafting. We’ll be sharing more designs in the up-coming months of 2022, so please subscribe to our newsletter and follow news on this topic.

Kind regards

FiboSearch Team

Newsletter

Tips and tricks for your top notch WooCommerce store. Find out how to use FiboSearch effectively.

1. How will FiboSearch help you sell more?
2. How to make your store’s search experience more gratifying?
3. How can subtle refinements set your store apart from the competition?

Subscribe

Monthly basis | No spamming | Selected content

By entering your email, you agree to our Terms of Service and Privacy Policy. Protected by reCAPTCHA | Privacy - Terms

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    background-color: transparent;
}