nopCommerce Tips: Creating a Custom Layout, Part 5 – Customizing the Nop AnyWhere Slider

Read Part 4 here!
Most designers/developers familiar with jQuery plugins have encountered, and most likely used, the fabulous Nivo Slider. It is absolutely possible to implement the Nivo Slider through a nopCommerce topic, to be incorporated in your nopCommerce solution – I’ve done it myself. However, that requires all sorts of manual manipulation of HTML, and can be incredibly tedious when multiple slides are included; it’s a pain for your users, and if you’re like me, the more they can do on their own, the more time there is to create even more wonderful things. Today, we’ll cover an alternative to the “roll-your-own” method: the Nop Anywhere Slider, and how to customize it to your design needs.

The Nop Anywhere Slider does contain two other slider styles: a standard 2D rotator, and a 3D rotator, but today we’ll focus on the Nivo Slider.

First, we’ll add the Anywhere Slider to our solution, in the “Plugins” folder under Nop.Web:

Adding Plugin

Start “F5″, and navigate to Admin=>Configuration=>Plugins.  Towards the top, you’ll see “Nop Anywhere Sliders” under the “Friendly Name” column. To the right, you’ll see an “Install” link – click it, and let nopCommerce install the plugin. After your install is complete, just select Plugins=>Anywhere Slider=>Manage Sliders in the menu above:

Manage Anywhere Sliders

This is where we’re going to configure our slider, and add it to the section of the site we’ve designed for it. In this instance, it’ll go on the front page of the site; we’ll set that under the “Widgets” tab, as seen below, and add our images under the “Pictures” tab. Since we’ve already done our design, we know how big the images should be, and so we’ll set our slider dimensions accordingly:

Configure Slider

After we’ve configured the slider, selected the WidgetZone (in this case, “home_page_top”), and added our images, we’ll take a look at how it looks with our default skin.

Default Nivo

Well, it looks all right, but a bit plain. Let’s kick it up a notch, and make it work with the design a bit better.  I decided to use the Orman skin for nivoSlider as an inspiration, and so I downloaded it into the themes folder for the plugin, as shown below.

Back to the Admin=>Plugins=>Anywhere Slider=>Manage Sliders section, and “Edit” the slider instance. There, I chose the “orman” skin, and bounced back to the front page to see how well it worked. Not a one-shot and done, I’m afraid. Back to Firebug for some tinkering, including some editing of the nivo-slider.css file.  A bit more editing of the image files to change them to the color scheme of the rest of the site, and we get this:

Finished Slider

Now in the future, my client can edit these images and captions directly from the admin section, and keep her site up to date quickly and easily, without having to tinker with any HTML or Javascript coding, which lets me provide better customer service for more clients, without the headache of the “technical debt” of keeping up with the back end coding. So very, very worth it!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

Leave a Reply

Your email address will not be published. Required fields are marked *


5 + 8 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>