Jump to content

[TUTORIAL] full width homepage image slider in prestashop 1.6


vekia
 Share

Recommended Posts

In this guide i want to show you how easily you can change your the way of how default homeslider module appears. By default it appear near two small banners, in this guide i want to show you how to create full width slider (full width of container box) without touching the files! You can achieve everything in back office with actually available features.


 


full-width-slider.jpg


 


tutorial here: how to create full width slider


  • Like 12

Share this post


Link to post
Share on other sites

you're welcome :) glad to hear that i could help with this

new ps 1.6 is amazing, at the beginning I was a little skeptical - now i see that it is (prestashop) the most flexible version of this platform that has ever been released

 

still discovering capabilities of this version, 
I am positively surprised :)

Share this post


Link to post
Share on other sites

Me too, I haven't used it on a live site yet, but on my testing website it is working fine and still getting my self used to the admin area more:)

this reminds me of my first days with HTML:) where you needed to change all the site pages if you had just changed a logo for example:)

Share this post


Link to post
Share on other sites

  • 3 weeks later...
Hello, I followed all the steps in the guide How to create full width slider homeslider but the option is not active at 1170 wide zoom. 1.6 in my prestashop 

If I purchase the module slider pays pro can install it instead? 

Sorry for my English by google 

Thank you! 

regards 

Share this post


Link to post
Share on other sites

 

In this guide i want to show you how easily you can change your the way of how default homeslider module appears. By default it appear near two small banners, in this guide i want to show you how to create full width slider (full width of container box) without touching the files! You can achieve everything in back office with actually available features.

 

 

 

Hi vekia,

 

Thanks for your tutorial, all is ok, but I have some questions and It's possible you will have the answer:

 

Do you know why don't work the HomeSlider module with iExplorer 8? It's a problem of compatibility?

 

Do you have any solution for this?

 

Regards.

Share this post


Link to post
Share on other sites

unfortuantely i don't use IE8, i can't check it :(

but i see, that bxSlider should work with IE7+

 
Thanks vekia,
 
I will continue the search, at first I was thinking the problem was the width and height of images but this is wrong, I changed this configuration in homeslider.php file.
 
If you have other idea, please don't hesitate to contact me. The website is www.agetro.com/psdelcami.
 
Regards.

Share this post


Link to post
Share on other sites

  • 4 weeks later...

 

In this guide i want to show you how easily you can change your the way of how default homeslider module appears. By default it appear near two small banners, 

 

tutorial here: how to create full width slider

 

 

hi Vekia,

 

how can I move the slider banner on the right side, I will unhook theme configurator from displayTopColumn, and would like to hook a flyout menu on displayTopColumn to show on homepage on left side of the slider banner

 

Thank you, your help would be greatly appreciated

Edited by rajlaskar (see edit history)

Share this post


Link to post
Share on other sites

hi

 

to achieve this http://www.estyle.in/prestashop/index.php

 

i have first unhook "themeconfigurator" from "displayTopColumn" , then hook my vertical megamenu on  "displayTopColumn" , 

to get the small banners on right side of the "home slider" I have fetch the small banners added through "themeconfogurator" in "homeslider.php" then put the banner tpl code in "homeslider.tpl" after the slider code

 

i have added the class "col-xs-2" in my menu , "col-xs-8" in homeslider and "col-xs-2" for small banners

 

complete module with vertical slidedown and slideup mega menu can be found here

 

http://codecanyon.net/item/prestashop-module-vertical-megamenu/7820884 

  • Like 1

Share this post


Link to post
Share on other sites

Hi ileon,

 

Do u want Theme configator images between featured/new product and homeslider?

 

Theme configurator "home" images are for that section only, u can move them up by moving module position from your backoffice

Share this post


Link to post
Share on other sites

Hello Vekia,

 

Yes that's exactly what I'm looking for, If i place an image in the theme configurator "home" it goes to the end of the home page.

 

How can I place them Where I want?

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 1 month later...

This was very helpful. Thank you!

 

 

In this guide i want to show you how easily you can change your the way of how default homeslider module appears. By default it appear near two small banners, in this guide i want to show you how to create full width slider (full width of container box) without touching the files! You can achieve everything in back office with actually available features.

 

full-width-slider.jpg

 

tutorial here: how to create full width slider

 

Share this post


Link to post
Share on other sites

Thanks for the tutorial, but i have a little question ^^

 

when you do this you have a slider full width 1170px but you still have 2 blank space on the right and the left

 

how can i do a real full width slider without those blank space?

 

 

i tried a lot of things, like 2000px but didnt work

Share this post


Link to post
Share on other sites

  • 3 weeks later...

Hello Vekia, I have been trying to set the front page in order to look as the image you place above but with my knowledge I'm unable to achieve it.

 

Where you able to review this so you can give me a suggestion to do it?

Share this post


Link to post
Share on other sites

Hello Vekia, yes your tutorial works perfectly. Maybe you misunderstood me since it's been a while since my question.

 

What I want to achieve is to place 3 or 4 hooks just below the image slider just like the image you place a few comments ago.

ZIHI4Ha.png

Share this post


Link to post
Share on other sites

so put your modules below the slider on modules list under modules > modules tab in your back office

you can use module like html box free or any other module to place custom contents

<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More