Product Slider

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: //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.
  • Module 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.
  • Height of Item : define the height of product item displayed.
  • Width of Item : define the width of product item displayed.

2. Data settings

Parameters explanation:

  • Type of product display : choose the type of product displayed, including: Latest/Best Buy/Most Viewed/Most Reviewed/Top Rated/Featured Product.
  • # Number of Element : define the quantity of elements displayed.
  • Show Product Price? : select whether to display the product price or not.

3. Items settings

Parameters explanation:

  • # Number of Element : define the quantity of elements displayed.
  • Show Product Price? : select whether to display the product price or not.
  • Category ID : Defined categoryID to get products to display
  • # Qty of products : define the quantity of products displayed.
  • # Qty of products on tablet : define the quantity of products displayed on tablet.
  • # Qty of products on mobile : define the quantity of products displayed on mobile.
  • Show Description? : select whether to display “Description” or not.
  • Show Read more? : select whether to display “Read more” or not.
  • Show Add to cart? : select whether to display “Add to cart” or not.
  • Use scroller bar : select whether to display “scroller bar” or not.
  • Auto run slide : select to have the auto run slide.
  • Rolling delay time : define duration between two products displayed, in seconds.
  • Animation time : define duration of an animation, in mili-seconds.
  • Enable hover button : defined button displayed when hover button or not.
  • 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