Product Slider

Product Slider

Product Slider lets you display your products in a new ‘fancy sliding product window’ on your website. The new Product Slider 2010 allows you to place the Product Slider on your site using either a WordPress friendly ShortCode or via a Template Tag. Either way you look at it this new version is going to add some visual appeal to your web shop.

Features

2 themes — apple and wordpress (apple uses a slider and wordpress uses next and previous buttons)

For WordPress theme:

  • Ability to choose how many products visible on the slider.
  • Ability to choose how many products to slide by.
  • Ability to display price.

For Apple theme:

  • Ability to display price.

Both themes can display categories or products within a category

Requirements

  • Gold Cart
  • A little knowledge with CSS (if you want to customize your slider or use the apple theme)

Installing and Activating Product Slider

To install the Product Slider simply unzip the files into your plugin directory, ensure that the product slider and gold cart are now activated (from the plugin menu) and that your Gold Cart API Key has been activated (see the Gold Cart section on how to do this). As soon as the plugins are active and your Gold API key confirmed you should see the product slider menu – your now ready to customize!

Using your Product Slider

There are two ways to use this plugin. Shortcode and Template tag. Shortcode is used within your WordPress pages and Template Tag is used within your page templates. Here are examples of the usage for both ways.

Shortcode:

[wpec_product_slider]

If you don’t enter a category id, the slider will adjust to the page you’re on. For example, if you’re on the homepage of your site, it will list every product in all categories and if you’re in a category specific page, it will list the products within that category.

[wpec_product_slider category_id="1"]

This tells the plugin to display the category items with the id of “1”. So it will list all products within category id of “1”.

Template Tag:

‘example-category’)); ?>

This tells the plugin to display the category items named “example-category”. So it will list all products within this category.

*NOTE: If you are listing categories (as your product page display option), the arguments have no affect. It will always display all of your categories and sub categories.

Tips for using you Product Slider

For the WordPress theme, the slider will adapt to the amount of products you enable as well as the size of the image.

For the Apple theme, it is a set width of 960px for the container. This is not resizeable. The “visible” and “product scroll by” settings do not affect this theme.

Using Template Tag gives you much more control of the placement for the plugin.

The CSS styling is designed around the default image size of 96 x 96 pixels for product thumbnails therefore if you change the thumbnail image size, you will also need to change the CSS styling to accommodate for perfect alignment.

When using the WordPress Theme make sure the setting “Visible” is equal or less than the items you actually have or adverse effects may be seen.

Choosing your Product Slider Settings

The product slider menu (found in the main product menu of WP-e-Commerce) Is where you choose your theme and set up your product slider options.

Select a theme: Simply choose which theme you want to use – It is recommended that you use the WordPress theme as it has more options and you can always change the CSS to adjust the colours / style.

Visible (WP theme only): This is how many products you want to have visible at a time

Product Scroll By (WP Theme only): This is how many products will scroll at a time when the next button is clicked.

Type: Display products or categories?

Display Price: do you want to display the price with your products – this will not work for categories.

Once you have choosen your settings just click save and go and view your product slider to test.

Trouble shooting Product Slider

How do I find out the category ID for a chosen category?

Go to your categories and hover over the name or group of categories you want to display, if you look down in your browser you will see the category ID in the link.

My products are not displaying in the Slider HELP!

First thing to check for is are you using the right template tag or short code? Do you have products in your category? Also if you set the product “visible” to be more than the number of products you have in that category (or products) you will get errors.

My product Slider is to big for my page, how do I resize it?

If your using the Apple theme this can be a common problem, if your using the WordPress theme is it recommended that your just change the number of products being displayed (‘visible’) to reduce your slider width.

However you can also change a little bit of CSS here is how. You will need to find the class .gallery_slider (on / around line 40) and add in this line width: 400px !important; (Change the width to whatever you need, include the !important so the CSS is not over written)

My images are bigger than the default 96px how do I re-size my slider to suit?

Look for .gallery_slider ul li (in whichever theme style.css your using) and adjust the width and heights to suit your new image thumbnail size.

Support

Looking for support? here are your options. However please note that we wil do our best to help you but if your question relating to the product slider is a feature request or customization question we can’t help all the time!

Visit the public or premium forums.

Demo / Screen shoots

IconDock Have taken full advantage of customizing their product slider and It looks Wikid! – This goes to show with a bit of CSS knowledge you can do anything with your product slider!

Below are screen shots of the different (out of the box – no customization) Product Sliders

WordPress Theme – Price display yes

Apple Theme