Product Slider V2

So you are about to grab Magento extension Product Slider for your eCommerce Magento store. Product Slider is a handy Magento extension that allows you to show off the selected products in a slider to stack space for your site and help your items displayed vividly.

This documentation will guide you step by step to install and configure Product Slider. Let’s get started.

Download Product Slider and then extract the downloaded package . Especially if you are new to Magento, kindly follow the UberTheme Magento extension user guide to install the Magento extension Product Slider.

Provided that Product Slider module is installed properly, you can follow these steps to configure this Magento extension for your eCommerce website.

1. General settings

1. Log in to your Admin Panel on the stage localhost: http://localhost/magento/index.php/admin/.

2. Navigate to System >> Configuration >> Products Slider.

3. Add values for these following parameters as per screenshot:

  • Enabled : select to publish/unpublish Slider.
  • Block Title : fill in the title of the slider.
  • Height of Thumbnail : define the height of product thumbnails displayed.
  • Width of Thumbnail : define the width of product thumbnails displayed.

2. Data settings

Parameters explanation:

  • Select Data Source : choose the type of product displayed, including: Latest/Best Buy/Most Viewed/Most Reviewed/Top Rated/Featured Product.
  • Select Categories :  Select the categories
  • # Qty of Products : Amount of products  shown on product slider
  • Show Product Price? : Select whether to display the product price or not.
  • Show Description? : Show description of product
  • Show Add to cart? : Show Add to cart of product
  • Show Read more? : Show Read more of product

3. Items settings

3.1.Configure to display more than 1 item on slider

Parameters explanation:

    • Single Item? : Set No to display more than one item on slider
    • # Number Items Per Page (on large screen) : Amount of products will be show on one page
    • # Number Items Per Page (on desktop) : define the quantity of products displayed.
    • # Number Items Per Page (on desktop small) : define the quantity of products displayed on desktop small.
    • # Number Items Per Page (on Tablet) : define the quantity of products displayed on tablet.
    • # Number Items Per Page (on Mobile) : define the quantity of products displayed on mobile.
    • Show Description? : select whether to display “Description” or not.
    • Auto Play Slider : select whether to play slider automatic or not.
    • Slider Speed : define duration of an animation, in mili-seconds
    • Slider Stop On Hover? : select to stop slider when hover mouse on image or not
    • Show Slider Navigation? : show slider navigation or not
    • Show Slider Paging? : select to show slider paging or not
    • Enable Lazy Load? : lazy load is an effect in displaying product. select this field to enable effect

4. Featured Product settings

1. To use Featured Product mode, you need to create a new attribute named “featured” at first. Navigate to Catalog >> Attributes >> Manage Attributes >> Add New Attribute.

2. Create “featured” attribute.

3. Add the attribute to default feature set. Navigate to Catalog >> Attributes >> Manage Attributes Sets >> Product group and then enter “Edit attribute set of Product group”.

4. Drag and drop “featured” attribute to the attribute group you want.

5. Navigate to Catalog >> Manage Products >> select product >> set Latest Product as “Yes”.

You can repeat steps above to configure featured attribute for other products.

6. On Module configuration page, choose Mode = Featured Product, so products with “Featured” attribute will be displayed.

3. Push module to front-end

1. Navigate to CMS >> Manage page >> select page e.g. Homepage.

2. Fill in Content parameter with the following syntax.

{{block type="joomlart_jmproductsslider/list" name="home.jmproductsslider.list" }}

Front-end appearance then:

3. Tip : You can also directly declare parameters of Product Slider in Content parameter.

For example, to display latest products, you can declare mode and title parameters as follows:

{{block type="joomlart_jmproductsslider/list" title="What's New Here" name="home.jmproductsslider.list" mode="latest"}}

The parameters that are declared directly here will overwrite those pre-defined in the module configuration panel in your admin.

Note : Direct declaration will be helpful to create multi feeds.

For example, in order to display two product lists including latest products list and top rated products list, you can declare as below:

{{block type="joomlart_jmproductsslider/list" title="What's New Here" name="home.jmproductsslider.list" mode="latest"}}
{{block type="joomlart_jmproductsslider/list" name="home.jmproductsslider.list"}}

Mode : includes values such as latest, best_buy, most_viewed, most_reviewed, top_rated, attribute.

ProductSilder
{{block type="joomlart_jmproductsslider/list" name="cate.jmproductsslider1" template="joomlart/jmproductsslider/horizontallist.phtml" title="New products <span>Spring collection</span>" mode="latest" number_items="1" width="237" height="170" catsid="26"}}
    • Param [name] allows to set the block’s name which should be different from other block’s names
    • Param [template] allows to set the template (.phtml files which located on path app\design\frontend\default\{your theme name}\template\joomlart\jmproductsslider)
    • Param [show] allows to show or hide. Valid value : yes / no
    • Param [mode] allows to enable the products filter with the following values:
      • latest -- Latest Product was created
      • best_buy -- Best Seller Products
      • most_viewed -- Most Viewed Products
      • top_rated -- Top Rated Products
      • featured -- Featured Products
    • Param [catsid] allows to set Category ID. The Category ID must exist under the Categories of yourstore
#
  • Param [title] allows to set the module’s title. Valid value : text
  • Param [width] allows to set the the product image width. Valid value : number
  • Param [height] allows to set the product image height. Valid value : number
  • Param [itemheight] allows to set the extension block height. Valid value : number
  • Param [itemwidth] allows to set the extension block width. Valid value : number
  • Param [quanlity] allows to set the number of products will be displayed in the list. Valid value : number
  • Param [show_price] allows to show or hide the product price. Valid value : yes / no
  • Param [show_cart] allows to show or hide “Add to cart” button of the product. Valid value : yes / no
  • Param [show_desc] allows to show or hide the product description. Valid value : yes / no
  • Param [max] allows to set Max Length of Product Description. Valid value : number
  • Param [autorun] allows to set the slider in order to run automatically or not. Valid value : yes / no
  • Param [show_readmore] allows to show or hide the read more link. Valid value : yes / no