Knowledgebase

The slideshow can be edited from the template page_welcome.html. In that template you will find the following code similaor to the code below:

Bigshop Responsive:

<div id="slideshow" class="nivoSlider">
        <a href="#"><img src="themes/$settings[theme]/images/slider/slider-1.jpg" alt="slideshow-1" /></a>
        <a href="#"><img src="themes/$settings[theme]/images/slider/slider-2.jpg" alt="slideshow-2" /></a>
        <a href="#"><img src="themes/$settings[theme]/images/slider/slider-3.jpg" alt="slideshow-3" /></a>
        <a href="#"><img src="themes/$settings[theme]/images/slider/slider-4.jpg" alt="slideshow-4" /></a>
</div>

Leisure Responsive:

<div id="banner_section">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="themes/$settings[theme]/images/slider/slider-1.jpg" />
                <div class="flex-caption"><h3>The Latest Gadgets!</h3></div>
            </li>
            <li>
                <img src="themes/$settings[theme]/images/slider/slider-2.jpg" />
                <div class="flex-caption"><h3>Shop Now!</h3></div>
            </li>
            <li>
                <img src="themes/$settings[theme]/images/slider/slider-3.jpg" />
                <div class="flex-caption"><h3>Shop Now!</h3></div>
            </li>
        </ul>
    </div>
    <div class="promo_banner">
        <div class="home_banner"><a href="#"><img src="themes/$settings[theme]/images/promo_hb_1.jpg"></a></div>
        <div class="home_banner"><a href="#"><img src="themes/$settings[theme]/images/promo_hb_2.jpg"></a></div>
        <div class="home_banner"><a href="#"><img src="themes/$settings[theme]/images/promo_hb_3.jpg"></a></div>
    </div>
</div>

You should notice that each section of code refers to 3 to 4 different images depensing on the theme.

Changing The Images:

To change the slider images, you can either simply replace the images called in the code with your own custom images, or you can change the code to point to your own images that you have uploaded to the server. For example, if you have a image called "my-slider-image.png" and you were using the Bigshop Responsive template, you would change the call to the first image:

<a href="#"><img src="themes/$settings[theme]/images/slider/slider-1.jpg" alt="slideshow-1" /></a>

To:

<a href="#"><img src="themes/$settings[theme]/images/slider/my-slider-image.png" alt="slideshow-1" /></a>

Using The Slider Template:

Please note that in each theme that has the slider functionality, you will find the PSD slider template source in the themes/YOURTHEMEHERE/images/slider/ folder. You can open it in photoshop to create your own slider images from the template.