BlogOptimization

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

Written by Piotr Korsak
Max 2min read

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 layout 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 add the bar as code-less as possible, but some basic knowledge of CSS and WordPress is necessary. With the help of print screens, we’ll show you the design and describe it thoroughly. The code necessary to add the bar is a straightforward copy-paste PHP – we’ll describe it step-by-step in the “Preparation” section of this article.

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 layout nicely blends with your page and neatly corresponds to the mostly curved and smooth edges of today’s mobile devices. This layout also resembles its desktop bigger counterpart – we’ll soon go into that in more detail in the article. Let’s take a look:


What’s more, our goal is to make this article a starting point for a more elaborate series on search bars design. We’ll keep the articles organized the same way, so the agenda will be as follows:

  1. Preparation – prepare your backend
  2. Designer talk – what we created and how
  3. Downloads – all necessary files, snippets, etc.
  4. Feedback

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

Preparation

To begin with, and this is great information for you all – this tutorial is as code-free as possible. We’ll use premade PHP code, which you’ll only need to copy-paste to your page. All code will be downloadable in the Downloads section, as well. Please remember to always use a child theme, especially when making such changes — read more on that in this guide. Let’s move to the next section.

Here is a detailed step-by-step guide:

  • Make sure that your version of FiboSearch is at least v1.17.0 or higher
  • In the  FiboSearch dashboard → Search bar → Layout → Tick “Darkened background” Read our detail-rich article on this feature “Darkened background” checkbox
  • Proceed with the code:
    • Copy the code:
add_action('wp_head', function(){
	?>
<style>
.dgwt-wcas-sf-wrapp {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
}

.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp {
	padding-top: 0;
	padding-bottom: 0;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding: 13px 24px 13px 48px;
	line-height: 24px;
	font-size: 17px;
	border: none;
	border-radius: 30px;
	height: auto;
	font-family: Roboto, sans-serif;
	background-color: #eee;
	border: 2px solid transparent;
}
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input:focus {
    box-shadow: none;
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
	background-color: #dfdfdf;
}

.dgwt-wcas-search-wrapp.dgwt-wcas-search-focused input[type="search"].dgwt-wcas-search-input:hover {
	background-color: #fff;
}

.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	border-color: #333;
}

.dgwt-wcas-open .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	border-radius: 30px;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	background: transparent;
	border-radius: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
	padding: 0;
	margin: 0;
	position: absolute;
	min-height: 33px;
    min-width: 33px;
    height: 33px;
    width: 33px;
	left: 23px;
    top: 21px;
	pointer-events: none;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
	width: 18px;
	height: 18px;
}

.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	left: auto;
	right: 28px;
	pointer-events: auto;
}

.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-left: 24px;
	transition: 0.15s padding-left ease;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
	opacity: 1;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
	background: #e4e4e4;
	box-shadow: 0 0 0 2px #e4e4e4;
	border-radius: 100%;
}

.dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:before {
	display: none;
}

.dgwt-wcas-preloader {
	margin-right: 35px;
}

.dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) {
	width: 18px;
}

.dgwt-wcas-close:not(.dgwt-wcas-inner-preloader) path {
	fill: #111;
}
.dgwt-wcas-has-submit .dgwt-wcas-search-submit svg path {
	fill: #111;	
}

.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
	opacity: 1;
	font-style: normal;
	font-weight: 300;
	color: #555;
}


.dgwt-wcas-details-wrapp,
.dgwt-wcas-suggestions-wrapp {
	border-color: #fff;
	padding-top: 10px;
	padding-bottom: 10px;
}

.dgwt-wcas-details-inner,
.dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion {
	padding-left: 20px;
	padding-right: 20px;
}

.dgwt-wcas-full-width .dgwt-wcas-suggestions-wrapp > .dgwt-wcas-suggestion {
	border-right: 1px solid #ddd;
}
.dgwt-wcas-details-outside.dgwt-wcas-is-details .dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-outside .dgwt-wcas-details-wrapp {
    margin-top: 0;
    border-top: none;
}
.dgwt-wcas-details-outside.dgwt-wcas-is-details .dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-outside .dgwt-wcas-details-wrapp {
    margin-top: 0;
    border-top: none;
}

body.dgwt-wcas-details-right .dgwt-wcas-suggestions-wrapp {
	border-right: none;
}
body.dgwt-wcas-details-right .dgwt-wcas-details-wrapp {
	border-left: 1px solid #ddd;
}
body.dgwt-wcas-details-left .dgwt-wcas-suggestions-wrapp{
	border-left: none;
}
body.dgwt-wcas-details-left .dgwt-wcas-details-wrapp {
	border-right: 1px solid #ddd;
}	

.dgwt-wcas-open.dgwt-wcas-nores.dgwt-wcas-full-width .dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-open.dgwt-wcas-nores.dgwt-wcas-full-width .dgwt-wcas-details-wrapp {
	min-height: 70px !important;
}

.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	border-radius: 0;
	background: transparent;
	padding: 0 10px;
}

.dgwt-wcas-search-wrapp-mobile.dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	border-color: transparent;
}

.dgwt-wcas-search-wrapp-mobile.dgwt-wcas-search-filled .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	padding-left: 10px;
}

.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover {
	background-color: transparent;
}

.dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp {
	border-top: 1px solid #e0e2e5;
}

.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return {
	background: #fff;
}

.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return svg {
	left: 17px;
	top: 16px;
	width: 17px;
	height: 17px;
}

.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return path {
	fill: #111;
}
</style>

<?php
});

// Replace the search icon
add_filter('dgwt/wcas/icon', function($svg, $name){
			// https://github.com/tabler/tabler-icons (MIT-licensed)
			if ( $name === 'magnifier-thin' ) {
				$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
    <path fill="#111111" d="M 16.722523,17.901412 C 16.572585,17.825208 15.36088,16.670476 14.029846,15.33534 L 11.609782,12.907819 11.01926,13.29667 C 8.7613237,14.783493 5.6172703,14.768302 3.332423,13.259528 -0.07366363,11.010358 -1.0146502,6.5989684 1.1898146,3.2148776 1.5505179,2.6611594 2.4056498,1.7447266 2.9644271,1.3130497 3.4423015,0.94387379 4.3921825,0.48568469 5.1732652,0.2475835 5.886299,0.03022609 6.1341883,0 7.2037391,0 8.2732897,0 8.521179,0.03022609 9.234213,0.2475835 c 0.781083,0.23810119 1.730962,0.69629029 2.208837,1.0654662 0.532501,0.4113763 1.39922,1.3400096 1.760153,1.8858877 1.520655,2.2998531 1.599025,5.3023778 0.199549,7.6451086 -0.208076,0.348322 -0.393306,0.668209 -0.411622,0.710863 -0.01831,0.04265 1.065556,1.18264 2.408603,2.533307 1.343046,1.350666 2.486621,2.574792 2.541278,2.720279 0.282475,0.7519 -0.503089,1.456506 -1.218488,1.092917 z M 8.4027892,12.475062 C 9.434946,12.25579 10.131043,11.855461 10.99416,10.984753 11.554519,10.419467 11.842507,10.042366 12.062078,9.5863882 12.794223,8.0659672 12.793657,6.2652398 12.060578,4.756293 11.680383,3.9737304 10.453587,2.7178427 9.730569,2.3710306 8.6921295,1.8729196 8.3992147,1.807606 7.2037567,1.807606 6.0082984,1.807606 5.7153841,1.87292 4.6769446,2.3710306 3.9539263,2.7178427 2.7271301,3.9737304 2.3469352,4.756293 1.6138384,6.2652398 1.6132726,8.0659672 2.3454252,9.5863882 c 0.4167354,0.8654208 1.5978784,2.0575608 2.4443766,2.4671358 1.0971012,0.530827 2.3890403,0.681561 3.6130134,0.421538 z" />
</svg>';
			}

			return $svg;
		}, 10, 2 );


// Overwrite the option "Show submit button" to "on"
add_filter( 'dgwt/wcas/settings/load_value/key=show_submit_button', function () {
    return 'on';
} );

// Overwrite the option "Submit label" to empty text
add_filter( 'dgwt/wcas/settings/load_value/key=search_submit_text', function () {
    return '';
} );
  • There are two separate ways to add the code to your website – please follow the one you’re more familiar with:
    • Open the functions.php in your Child Theme and add the code at the end
    • Install the Code Snippets plugin and then Add New → Add your title (Pirx or something distinctive that you’ll find useful) → copy-paste the code → Save changes and activate

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 layouts 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 layout.

However, Pirx, the second one, is our first step towards more challenging and characteristic layouts. 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 layout.

Moreover, the layouts 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
    • 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 layout and find it useful across your site.

Downloads

Feedback

Great! We hope that you’re as excited as we are with our latest layout. Please feel free to give it a try and share your thoughts – in the comments section or by contacting our amazing support team. Drop us a line if you find any bugs or functionalities that make this layout hard to use – we’ll be very glad to find out about that and we’ll do our best to improve too! If Pirx gets a positive reception, we’ll consider adding it as an alternative to FiboSearch’s Solaris.
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

Leave a Reply

Please keep in mind that your email address will NOT be published