How To Configure SM Category Slider Module

This guide will help you how to configure SM Category Slider Module.

We used SM Megashop Template to illustrate. Please View Demo

Frontend:

Backend:

STEP 1: Please go to System >> Configuration >> find SM Category Slider (in the left of column) to configure.
The parameters are divided into the following groups:

General settings
Source Options
Product Options
Image Product Options
Effect Options
Advanced Options

Let’s look at the parameters in detail:

General settings

Enable/Disable - Allow to enable/disable the module.
Link target - Target to open links:
- New window - Open the link in the new window/tab
- Same window - Open the link in the same window/tab
- Popup window - Open links in new pop-up window
Position Tabs - Allow to select position of tabs
Show Control - Allow to show control OR not

Source Options

Select Category - Allow to select Category Or not.
Display image Category - Allow to display image category Or not
Category Image Width - Allow to set Category Image Width
Category Image Height - Allow to set Category Image Height
Display Sub Category - Allow to display sub-category Or not.
Sub category Limitation - Allow to display limitation of sub-category
Child Category Products - Allow to set Include/Exclude products from child category
Category Depth - The number of child category levels to return.
Featured Products - Allow to Show/Hide/Only Featured Products.
Product Field to Order By - Set Product Field to Order By
Ordering Direction - Allow to order ascending/descending direction
Product Limitation - Allow to set product limitation

Products Options
Product Title

Display - Allow to display title of product OR not
Max Length - Allow to set the max length of title

Product Description

Display - Allow to display title of description OR not
Max Length - Allow to set the max length of description

Others

Display Price - Allow to display price OR not.
Display Reviews Summary - Allow to display reviews summary OR not.
Display Add To Cart - Allow to display Add To Cart OR not
Display Add Wishlist - Allow to display Wishlist OR not.
Display Add Compare - Allow to display Add Compare OR not
Display Readmore Link - Allow to display Readmore link not.
Display Readmore Text - Allow to input name of Readmore text. For example: Details
#Column - Allow to set #column:
- For devices have screen width from 1200px up to greater.
- For devices have screen width from 768px up to 1199px.
- For devices have screen width from 480px up to 767px.
- For devices have screen width less than or equal 479px.

Image Options
Get Image from Product Image

Product Description - Allow to display description of product OR not
Order to Get - Allow to order to get image with options such as product_image, product_description
Resize - Allow you resize product image OR not
Image Width - Allow to set image width
Image Height - Allow to set image height
Constrain Only -f the “constrainOnly” parameter is set to true, in this case the images which are smaller than specified value will be not enlarged by Magento. Only border of such images will increase.
Keep Aspect Ratio: Allow to keep aspect ratio. If the “keepAspectRatio” parameter is set to true, in this case the proportions of the image will not be modified.
Keep Transparency: The “keepTransparency” parameter keep the transparent background of the images.
Keep Frame: The “keepFrame” parameter guarantees that the image will be not cropped. When “keepAspectRatio” is false the “keepFrame” will not work
Background Color: Allow to set background color
Placeholder: If items do not have image, it will get image nophoto

Effect Options
Get Image from Product Image

Auto Play - Allow to Enable/Disable autoplay mode
Start - Allow to set page that is displayed at first when you run slideshow
Step - Allow to set step of items
Speed - Allow to set speed of slide
Interval - Allow to set interval timer
Stop on Hover - Allow to stop effects when users hover
Effect: Allow to select effect type

Advanced Options

Include jQuery - Use jQuery from this module or not
Pre-text - The content to show at the top of module
Post-text - The content to show at the end of module

STEP 2: After that, Please go to Catalog >> Manage Categories. See image details as below:

General Information

Display Settings

Custom Design

Category Products

STEP 3: In the Administrator Panel, please go to CMS >> Pages >> Design tab (in the left hands) and paste the Layout Update XML Code as following:

<reference name="content-bottom-7">		
       <block type="categoryslider/list" name="categoryslider.list.default" as="block-livingroom" template="sm/categoryslider/default.phtml"/>
</reference>

</reference>

Note: If you want to display more Category, please follow our instruction:

For example: You want to display more Dinner Category & Bedroom Category as image below:

Frontend

Backend

In The Administrator, please go to CMS >> Pages >> Design tab (in the left hands) and paste the Layout Update XML Code as following:

<reference name="content-bottom-7">	
<block type="categoryslider/list" name="categoryslider.list.dining" as="block-dining" template="sm/categoryslider/default-dining-cate.phtml">
		<action method="_setConfig">
			<values>
				<product_category>209</product_category>
                                <child_category_products>0</child_category_products>                                 
			</values>					
		</action>
	</block>
<block type="categoryslider/list" name="categoryslider.list.bedroom" as="block-bedroom" template="sm/categoryslider/default-bedroom-cate.phtml">
		<action method="_setConfig">
			<values>
				<product_category>10</product_category>
                                <child_category_products>0</child_category_products>  
			</values>					
		</action>
	</block>
</reference>

<product_category>209</product_category>

<child_category_products>0</child_category_products>

</values>

</action>

</block>

<product_category>10</product_category>

<child_category_products>0</child_category_products>

</values>

</action>

</block>

</reference>

Please Custom values that you want. For example: you want to display 3 Subcategory. You only need to add value: (“<sub_cat_limitation>3</sub_cat_limitation>“)