How to move image slider module from home to top in PrestaShop

In this tutorial you will read about PrestaShop image slider default module and you will know how to move it from home section to top section of your shop. By default, this module can't be transplanted to this part of your store. But it is possible to modify the module, it's simple and easy. 

As we say above, this module can't be transplanted to the top section of your shop, when you trying to do that in your back office you probably see this error:

How to modify the homeslider module?

In first step you must open the homeslider.php file localized in modules/homeslider directory. 

copy code attached below

public function hookdisplayTop(){
 if(!$this->_prepareHook())
 return;
 
 if ($this->context->getMobileDevice() != false)
 return false;
 
 $this->context->controller->addJS($this->_path.'js/jquery.bxSlider.min.js');
 $this->context->controller->addCSS($this->_path.'bx_styles.css');
 $this->context->controller->addJS($this->_path.'js/homeslider.js');
 return $this->display(__FILE__, 'homeslider.tpl');
}

and paste it into homeslider.php file just before the code: public function hookDisplayHome(). Save the file and go to the PrestaShop back office and try to transplant module homeslider to "Top of pages" known as "displayTop" position. Now everything works fine. You must also delete homeslider module from old position.

You transplanted homeslider module properly to new position, but as you probably see, there is something wrong like on image attached below. 



How to fix this issue?
So what to do? Go to homeslider module configuration and change the width parameter value to: 979

next you must open bx_styles.css file localized in modules/homeslider directory, edit the .bx_wrapper section exactly as above:

.bx-wrapper {
 margin-bottom:20px;
 height:300px;
 clear:both;
}

save changes and refresh your website. Now slider works properly.

Friends, If you like this post, please share with your friends on Facebook and Google+ and recommend us on Google using the g+1 button on the top right hand corner.