Add a Nivo Slider Image Slideshow to your Store

If you would like to add an Image Slider to your store, it can be done using a version of Nivo Slider. The files that power this system are directly integrated into Free Webstore.

You can find an example of how the resulting image slider will look, here;

http://demo.dev7studios.com/nivo-slider/

Please note that integrating a Nivo Slider requires some HTML knowledge.

To get started, please visit the Manage > Pages section of your control panel and create a new page for the Slider. Alternatively, you could edit an existing page.

While editing the page, click the "HTML" button at the bottom of the Text Editor to switch to the HTML view. Next, copy the following section of code and paste it into the Text Editor:



The images inserted by default are demo images included in the Nivo Slider pack. At this stage, feel free to save the page and take a look at it on your store.

Next, you will need to update the images as necessary. To do this, replace the "src" or Source of each image with the direct URL of the image you want to use. The method used to find the URL of an image on your store differs depending on the browser you use:

In Internet Explorer: Right-click on the image and select "Properties". The URL is shown next to the "Address (URL):" heading.

In Google Chrome: Right-click and select "Copy Image URL". The URL will be copied to your clipboard and can then be pasted wherever you want.

In Mozilla FireFox: Right-click and select "Copy Image Location". The URL will be copied to your clipboard and can then be pasted wherever you want.

Once you have the URLs of the images you want to use, return to the Manage > Pages section and edit the page that features the Nivo Slider. Take a look at the section that begins with the following code:



You'll see four "img" tags that have a "src" attribute associated with them. Replace the URL between the quotation marks in the "src" attribute with your own image URLs. Remember to keep the quotation marks around the URL, and don't modify any other part of the code. Feel free to enter additional "img" tags if you would like to include more images in your Slider, and update the "src" of each one as necessary. Once you're happy with your Nivo Slider, don't forget to save the changes.

By default, the Nivo Slider is responsive, meaning it will automatically resize itself depending on the browser width, container elements and image sizes. If you'd like it to have a fixed size, then you just need to make sure that all your images are the same size.

There are multiple themes available for Nivo Slider, as per this page. You just need to alter a couple of lines in the above code to switch between them.

As an example, to switch to the "Light" theme, we just modify the following two lines;



Becoming;



Take a look at this page for more details.

For additional help, please see the Nivo Slider jQuery Plugin Support website.