Border7 Tutorial: How to Add A Featured Product Slider in Volusion
Your website is looking a little cluttered nowadays. You’ve got large lists of products and images on your homepage (or any page for that matter) that are all contributing to the “overwhelming” feeling that someone visiting your site is going to feel. What can you do about this? You don’t want to remove things off your homepage because each one is important. Is there a way to keep everything you want on your webpage without having a cluttered look? Well search no further because a Featured Product Carousel Slider is a great way to accomplish this!
How To:
There are many ways to design and implement a slider on your website. First, it is important to identify which items you want the slider to contain, be it products, images, or anything else that is cluttering your site. Here’s an example of a prime opportunity to implement a slider.
All these shoes could be listed and cycled through on one single line, without overwhelming users with so many choices to view at one time.
The second step is identifying which kind of carousel slider you wish to use on your website, and make sure that you have jQuery on your webpage. Some options for sliders are:
Once you’ve selected your carousel slider (for this tutorial we’re going to use Slick), then you need to implement it. First, set your HTML markup, meaning you have to identify where you’re your slider is going to be, and the elements it is going to contain. Then set the class of that div to “slider” or whatever name you see fit.
Following this, you need to download slick and move its contents into your project folder. Then go ahead and link these CSS files to your header. An example of this is:
Next, we need to make sure we add Slick into our webpage. To do this we must add these files right before closing our body tag, and make sure you do this AFTER the point where you initialize jQuery. This example below includes the jQuery initialization.
Finally, we need to create a script section and insert this code:
Note: this will create a slider with all the multiple item defaults set to it. If you would like to set your own settings to your slider, you can also edit, and add more attributes to change the behavior of the slider. Documentation of these can be found on the Slider Website.
Need More Help?
Our skilled Border 7 team can set a slider up on your website, and address any other problems you may have with your website. Contact us, and we’ll get right back to you!
