Dear OpenCart Users,
Along with the Thank You notes that we have received in regards to the "PC Store" template, we also got a few emails from users with basic technical skills mentioning that they are not able to setup the image Slider.
Basically, the slider is not included in the theme files, because it is not a default OpenCart functionality.
Our designers have included the slider in the demo installation of the template just to show you how cool your store could look like.
In our opinion everyone (not only the advanced users) should take advantage of that cool gadget, so we have decided to provide you with a step-by-step tutorial on how to easily set up your Slider.
I'm sure there are many ways to do this and here is one of them:
In order to set it up, you need some basic knowledge in html and JavaScript, though.
- - - - - - - - - - - - - - - - - - - - - - -
1. Design your slide images. All of them should be the exact same width and height. In our case they are 748x312. It is recommended to use good naming for your images too. In our case they are: slide1, slide2, slide3 etc.
2. Upload all slide images to [your_opencart_root_directory]/image/data/. This can be done via FTP Client or using the administration area of your OpenCart Shop. If you are using the admin area, go to System >> SETTINGS >> IMAGE tab. Click your logo and this will trigger the Opencart Image Manager. Click the Upload button at the top navigation of this image manager. Select your image slide you want to upload and click open. This will upload it in the proper directory of your shopping cart. Do that for all images that you want to include in your slider.
Once you are done, just close the image manager.
3. Login to your opencart administration area and go to SYSTEM >> SETTINGS >> STORE tab.
At the bottom of this page there is a little text editor where you can place your "Welcome message" of your store. This is where you can place your image slider. All you have to do is click on the first button of this editor - "Source". It will display the html code of your current welcome message. Delete everything and paste this code :
<!-- Image slider start -->
<p style="display:none">
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="
http://cloud.github.com/downloads/malsu ... "></script>
<script type="text/javascript">$(document).ready(function() {$('.slideshow').cycle({fx: 'fade'});});</script>
</p>
<div class="slideshow" style="width:748px;height:312px;">
<a href="http://your_link.com"><img width="748" height="312" src="./image/data/slide1.jpg" /></a>
<a href="http://your_link.com"><img width="748" height="312" src="./image/data/slide2.jpg" /></a>
<a href="http://your_link.com"><img width="748" height="312" src="./image/data/slide3.jpg" /></a>
<a href="http://your_link.com"><img width="748" height="312" src="./image/data/slide4.jpg" /></a>
</div>
<!-- / Image slider end -->
4. Now you need to modify it according to your own online store.
4.1 First requirement is to change the width and height values. Replace the numbers in [width:748px;height:312px;] and [width="748" height="312"] with your own images size.
4.2 Second requirement is to change the links of your slides. Each slide has a separate link but you can put the same one on all slides if you want. So you need to replace [http://your_link.com] with the link you want to be loaded when users click on the displayed slide. Do that for all slides.
Of course you may not want to have the slider clickable. In that case remove the link markups - [<a href="http://your_link.com">] and [</a>].
Each line should look like this: [<img width="748" height="312" src="./image/data/slide1.jpg" />] Where "slide1.jpg" is replaced with the name of your image.
4.3 In our case we are using 5 images for our slider, but you are not limited to this number of slides. Just don't forget to place all of them in the code, just changing the name of your new image you want to add.
5. Once you are done with modifying this code, go to the top of the page and click on the "SAVE" button. Now check you store home page. You will have your new slider there
- - - - - - - - - - - - - - - - - - - - - - -
I hope this tutorials was helpful to you!
