Knowledgebase

How to move the top search block within the header in PrestaShop

In this article we'll show you how to move the top search bar to the top, bottom, left or right within the header of your PrestaShop store. We'll concentrate on PrestaShop 1.5 and we'll use as an example the default theme that comes prepackaged with every installation. In the default theme the search box appears at the top of the page around the center of the header. There's blank space around it which allows you to move the search bar a bit in every direction without the need to move other header elements. So with a few simple CSS modifications you can move the search bar.

You need to edit the file blocksearch.css. If your store is installed directly in the public_html directory on your PrestaShop hosting account, the path to the file will be public_html/modules/blocksearch/blocksearch.css. The code that you have to modify to move the search block looks like this:

#search_block_top {
	position:absolute;
	top:44px;
	left:0;
}

To move the search box more to the top, bottom, left or right you need to edit the lines top:44px; and/or left:0px;. For example, if you want it to be closer to the top you have to decrease the number for top.

Let's say, for instance, that you want to move the the search block a little bit closer to the top and also move it more to the right. Then you can edit the code so that it looks something like this:

#search_block_top {
	position:absolute;
	top:30px;
	left:50px;
}

If you want to move the block to the left put a negative number for left (e.g. left:-50px;). You can edit the file from the Files section of the Pixie control panel. Alternatively, you can download it on you local computer with an FTP client (e.g. FileZilla), edit it with a text editor (e.g. Notepad) and then upload it in the same folder overwriting the old file.

After that clear your browser cache and refresh the frontend of your site to check the result.

When it comes to the search block you may also find useful the article on changing the width of the search box in PrestaShop.

In PrestaShop 1.4 moving the search block within the header of the default theme is a bit more complicated since you also have to move around other header blocks (e.g. currency block, language block, etc.).

Also Read