Responsive Product Slider

Increase Sales with Animated Responsive Product Slider with Ajax!

Animated Responsive Product Slider with Ajax is a must-have for every modern store. Works with every theme, just install the extension and use Magento Admin to configure it. You have completely independent configuration options for category, cms, home, and product pages. Supports mobile/touch devices. It is smart and recalculates itself depending on device resolution/orientation. SEO Friendly.

See Responsive Product Slider in action on our site.

Features

General Settings

- Easy way to enable or disable extension.
- Easy and proper way to include jQuery library if you did not included it already.
- Easy and proper way to include jQuery Mobile library if you did not included it already.
- Easy and proper way to include jQuery UI library if you did not included it already.

Category/CMS/Home/Product Page Settings

- Easy way to enable or disable Responsive Product Slider on category/cms/home/product pages.
- Animation Duration [ms] (Set how long transition between two slides will last.)
- Autoslide Interval [ms] (If you type 0 autoslide will be disabled.)
- Parent Block where product slider will reside. Options are:
-- Page Top (after_body_start)
-- Header (top.container)
-- Top Menu (top.menu)
-- Content (content)
-- Left (left)
-- Right (right)
-- Footer (footer)
-- Footer (bottom.container)
-- Page Bottom (before_body_end)
- Position inside parent block. (Can be "Bottom (after)" and "Top (before)")
- Page Size is number of products returned per server call (Server calls are done via Ajax).
- Sort Products (Options are: Date, Name, and Price)
- Sort Direction (Options are: Ascending and Descending)
- Info Sort Order (Order of info elements. 1=name, 2=description, 3=image, 4=sku, 5=price, 6=rating, 7=cart, 8=compare, 9=wishlist)
- Description Source (What database field to use for product description text. Options are: "Description", "Meta Description", and "Short Description")
- Description Limit (Maximum number of characters allowed for description. (0 means no limit.) If description text is longer, it will be truncated and ellipsis will be added at the end.)
- Image Resize Width [px] (This value is used for server-side resize. Actual dimension of the image can be set in CSS file.)
- Image Resize Height [px] (This value is used for server-side resize. Actual dimension of the image can be set in CSS file.)
- Use Custom Rating Style (If set to "Yes" custom rating styles will be used. See tooltip for more information. If this option is set to "Yes" custom rating styles will be used and if you want you can easily change rating stars .png image to whatever you desire as long as your .png image has same dimensions and filename. If this option is set to "No" default Magento rating styles will be used. In this case requirement is that your theme is using same CSS class names for rating.)
- Scroll By Item will move slider by one product on any slider interaction. If this option is set to "No" slider will move by visible area.
- Enable Scrollbar (Show horizontal scrollbar or not.)
- Specific IDs (type in comma separated list of product IDs you want to show in the slider. Example: 431,430,874,875 If you leave this field empty, all products will be shown in the slider which is a default behavior. There is no limit on number of IDs in this comma separated list.
- Show All Products (option is applicable only for Product Slider on category pages.) On category pages default behavior is to show only products that belong to particular category. If this option is enabled all products will be shown in the slider.

Installation Instructions

- Log in to Magento Admin
- (Optional) Disable Magento Compiler if you are using it (System > Tools > Compilation)
- Go to System > Magento Connect > Magento Connect Manager
- Use "Direct package file upload" section and "Upload package file"
- Browse to the .tgz file
- Click "Upload" button
- Go back to Magento Admin
- Refresh Magento cache (System > Cache Management), then log out from Magento Admin and log back in
- (Optional) Enable Magento Compiler by clicking "Run Compilation Process" button (System > Tools > Compilation)
- If you do not have jQuery included in your theme, set (System > Configuration > Apptrian Extensions > Responsive Product Slider > General > Include jQuery) option to "Yes".
- Refresh Magento cache (System > Cache Management)

If you do not know how to install extension or you wish a professional to do it for you, we offer additional Installation service for a small fee.

Customization Instructions

If you want to style Responsive Product Slider further, copy
./skin/frontend/base/default/css/apptrian_productslider.css
to
./skin/frontend/your_design_package/your_theme/css/apptrian_productslider.css
and add your CSS styles.

Read comments in the CSS file and you will be able to make most of the changes in a very succinct way.

You can change Responsive Product Slider ajax loader animated gif by creating directory
./skin/frontend/your_design_package/your_theme/images/apptrian/productslider/
and than copy your ajax loader gif inside it. The filename must be ajax-loader.gif.
Controls and rating stars can be substituted the same way just make sure they have same filenames (controls.png and rating.png) and dimensions.

If you do not know how to style with CSS or you wish a professional to do it for you, we offer additional CSS Custom Style service for a small fee.