Once again I’ve left it a while without writing a new blog on OpenCart, I’ve worked with a lot of new people and received some fantastic feedback so far. In this blog post I am going to be looking at the OpenCart Nivo Slider which shows up on the home page by default and isn’t set quite right for most online stores so I will be showing you how to customise the speed it shows slides and the effects/transitions between them. I will be working on OpenCart version 1.5.2.1.
Changing The Speed Of The OpenCart Home Slider
So you can define your slides through the admin panel (default width is 980px I believe for those who asked) and set up your Slideshow through the Modules tab but the slides go way to fast for the average customer to read through, interpret and then act upon. Trust me, if it is going too fast then you will lose customer conversions because people need a reasonable amount of time to decide on something. The slides, by default, only stay up for about 2-3 seconds before fizzing away. In a few minutes however, you will know how to adjust the slideshow to make the slides stay as long as you like.
OK, so there is very little coding involved in these two guides so don’t worry. I will warn you be careful though as it can be easy to look at the wrong thing, just follow the steps exactly and you will be OK. So the file you will need is:
- catalog/view/javascript/jquery/nivo-slider/jquery.nivo.slider.pack.js
Open this file and you will be presented with a horrifying amount of JavaScript for one slider but you can just ignore most of it. I think it is best to do a Quick Find (usually by pressing CTRL+F or CMD+F in your editor) as its quicker than scanning through, just enter “a.fn.nivoSlider.defaults” and it will take you to where you need to be.
There will be an equals sign just after followed by a list of variables and you are looking for the one called “pauseTime”. It will have a comma following it which should be followed by a number (although I had the strange “3e3″ as a value…). Simply change this number to something like 9000 or 12000 to increase the amount of time each slide stays on the screen and upload then check if it is long enough for your customers. Rinse and repeat until it is perfect!
Changing The Transition Effects Of The OpenCart Home Slider
Right, that was easy enough to change the speed, now we are going to be looking at changing the effects shown as the slides change. By default it is random and can look a bit messy, I won’t go into what each individual effect is like (you’ll have to experiment a bit!) but I will show you what to change.
Luckily, it is almost the same process as before except this time we are performing our Quick Find for “a.fn.nivoSlider.defaults” and looking for the variable “effects” which should be just before the “pauseTime” one from earlier. The effects value will be “random” which you can change to any of those listed below:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
Remember, if you want to put it back to normal, just put the word “random” in there instead of an effect name to have the random transitions again!
So, that’s it for today. I hope you enjoy this guide and feel free to get in touch with any questions and leave comments! Don’t forget I’m for hire as an OpenCart freelancer!