SAHARA KIDS1 RESPONSIVE MAGENTO THEME

Size: px

Start display at page:

Download "SAHARA KIDS1 RESPONSIVE MAGENTO THEME"

Meghan Griffin
5 years ago
Views:

1 SAHARA KIDS1 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_kids1 template Chapter II. Features and elements of the template Chapter III. List of extensions in this template 1

2 Table of Contents I. Install ma_sahara_kids1 template Install quickstart Install template II. Theme features and elements Home page Structure Menu Products grid page and products list page Details page Prozoom How to edit Static Blocks in this template Block header (text Call us : ) Banner Static (Texts Kid Toys, Smart Kid, Acessories ) Banner Static Modul Group (Titles Bestseller, New Arrivals, Hot Sale Items ) Footer Static 2 (Titles About Us, Contact Us, Latest Tweet, Newsletter ) Footer Static (Titles Information, Our Services, Why Buy From Us, My Account ) Payment Static Sub Menu Bottom Change Footer Copyright ( Text 2014 Magento Demo Store. All Rights Reserved ) III. Extensions in this template Custommenu Configuration Add CMS Block to popup of a specify category Add CMS Block to menu item How to identify category IDs in magento : Add links to menu item How to use Banner Sequence

3 2.1. Configuration How to add banner sequence Featured Products Slider ( Titles Featured products ) How to config this extension How to show Featured Products Slider extension in this template Brand slider ( Title Brand & Clients ) Configuration How to add logo Bestseller products ( Title Bestseller ) How to config How to show Bestseller Products extension in this template New products ( Title New Arrivals ) How to config How to show New Products extension in this template Onsale Products Slider ( Title Hot Sale Items ) Configuration How to show Onsale Products Slider extension in this template Blog ( Title Lastest Posts ) Configuration this extension How to creat categories How to add post How to manage posts How to manage comments Latesttweet ( Title Latest Tweet ) Configuration Set up Related Slider ( Title Related products ) Configuration How to set related products Upsell Slider ( Title Upsell products in details page) Configuration How to set upsell products

4 12. Prozoom Configuration Layered navigation ajax ( in products page) Configuration Ajaxcart Super Configuration Theme options Configuration

I. Install ma_sahara_kids1 template There are two ways to install a Magento Theme: Install quickstart: By using this package, you will set the theme exactly as our Demo with sample data.

5 I. Install ma_sahara_kids1 template There are two ways to install a Magento Theme: Install quickstart: By using this package, you will set the theme exactly as our Demo with sample data. Install only template: If you exist a magento website you can install only template. 1. Install quickstart Please following steps below: 1. Create new database and import database sample ( ma_sahara_kids1.sql or ma_sahara_kids1.sql.gz) in database folder. Open your Browse and type : localhost/phpmyadmin or yourdomain/phpmyadmin Then create database Click database you have created 5

6 2. Extract and Upload the whole Quickstart package (app, js, skin in ma_sahara_multi1 _quickstart folder ) to your server. ma_sahara_multi1_quickstart.zip is in ma_sahara_package_1.0 Extract ma_sahara_multi1_quickstart, we got: 6

7 Copy all of folder above to your Magento. 3. Open browser and navigate to your site (where the quickstart uploaded) to load default Magento installer with the database you just created and import database sample. As an example, name of magento is ma_sahara. 7

8 Click button Continue. 4. Step by step to follow the instructions. Click Continue. We got: 8

9 With database name : ma_sahara database name you have just created User name : root User password : No need to fill in. Click Continue button. 9

- Fill Personal information : First Name, Las Name, Email Login Information:

Finish installer. 6. You can Go to frontend to go to Home page.

10 - Fill Personal information : First Name, Las Name, Login Information: Username, Password, Confirm Password - Click Continue button 5. Finish installer. 6. You can Go to frontend to go to Home page. (Important note ( at step 3 of installation - Configuration page) ) 7. Disable cache Login your magento admin 10

Clear all cache ( System > Cache management > Disabled all cache ) After cache is disabled cache management screen might look like this: 8. Reindex data Go to System > Index Management.

11 Clear all cache ( System > Cache management > Disabled all cache ) After cache is disabled cache management screen might look like this: 8. Reindex data Go to System > Index Management. To rebuild your indexes, select all, select Reindex Data and click Submit button. 2. Install template 1. Please unzip package ma_sahara_kids1_template_1.0.zip and upload the folders ( app, skin, js, media...) from the theme package to the root directory ( www, public_html) of your magento software using an FTP client. ma_sahara_kids1_ template_1.0.zip in ma_sahara _package_1.0 Unzip ma_sahara_kids1_ template.zip, we got: 11

12 Copy all app, js, media, skin above to your Magento. 2. Please go to Magento Admin > Magentothem > Install template 3. If your magento has many store views : Choose All Store View -> then click submit button 12

13 If don t have many store views, choose Submit button : 4. Clear all cache ( System > Cache management > Disabled all cache ) After cache is disabled cache management screen might look like this: 13

14 II. Theme features and elements In this chapter you can find description and configuration details of selected elements of this theme, such as home page, built-in static blocks, CSS classes etc. 1. Home page 1.1. Structure <image is next page> 14

15 15

16 After the theme is installed, you can import sample versions of the home page. To manage pages in Magento, go to CMS > Pages section. By default in Magento a page with URL Key home is displayed as the store s home page. One of a few sample home pages which you can import, has the following URL key: sahara_kids1-home-page. So to display that page as a home page in your store, you need to change its URL key to simple home. Note: If the page with that URL key already exists(which is true in most of Magento installations) you will need to delete existing page or change its url key. Alternatively you can indicate which CMS page you want to use as your home page. To do that, go to System > Configuration > General > Web > Default Pages tab and select the desired page in the CMS Home Page field Menu 16

1.2.1. Home page layout For every CMS page in Magento you can select page layout - the number of columns: one, two, or three columns.

17 Home page layout For every CMS page in Magento you can select page layout - the number of columns: one, two, or three columns. To change the layout of the home page, go to CMS > Pages, select the page, select one of the options in the Layout field and click Save Page button Home page content To edit the content of the home page, go to CMS > Pages and open the active home page. Content can be found in the main field of the Content tab: Important Always turn off WYSIWYG editor when you want to edit HTML or Magento's CMS tags in the page/block content. Otherwise WYSIWYG editor will break the content. Refer to WYSIWYG editor for more details. 2. Products grid page and products list page <image is next page> 17

18 18

19 19

20 3. Details page <image is next page> 20

21 21

22 4. Prozoom 5. How to edit Static Blocks in this template Names of blocks and extensions in home image, grid, list, view Block header (text Call us : ) If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks 22

23 You will see : At Title column, choose block header 23

Click Show/Hide Editor to show code HTML of this block You can change content by editing code HTML Click Save Config when you finish. 5.2.

24 Click Show/Hide Editor to show code HTML of this block You can change content by editing code HTML Click Save Config when you finish Banner Static (Texts Kid Toys, Smart Kid, Acessories ) If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks 24

25 You will see : At Title column, choose Banner Static 25

26 Click Show/Hide Editor to show code HTML of this block You can change content by editing code HTML Click Save Config when you finish. 26

27 5.3. Banner Static 2 If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks You will see : At Title column, choose Banner Static 2 27

28 Click Show/Hide Editor to show code HTML of this block You can change content by editing code HTML Click Save Config when you finish. 28

29 You should cut image with size 371 x Modul Group (Titles Bestseller, New Arrivals, Hot Sale Items ) This block contains 3 modules : bestseller products, new products, onsale products slider. If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks You will see : 29

30 At Title column, choose Modul Group Click Show/Hide Editor to show code HTML of this block 30

31 You can change content by editing code HTML Click Save Config when you finish Footer Static 2 (Titles About Us, Contact Us, Latest Tweet, Newsletter ) If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks You will see : 31

32 At Title column, choose Footer Static 2 32

33 Click Show/Hide Editor to show code HTML of this block 33

34 You can change content by editing code HTML Click Save Config when you finish Footer Static (Titles Information, Our Services, Why Buy From Us, My Account ) If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks 34

35 You will see : At Title column, choose Footer Static 35

36 Click Show/Hide Editor to show code HTML of this block 36

37 You can change content by editing code HTML Click Save Config when you finish Payment If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks You will see : 37

38 At Title column, choose Payment Click Show/Hide Editor to show code HTML of this block 38

You can change image by editing code HTML Click Save Config when you finish. 5.8.

39 You can change image by editing code HTML Click Save Config when you finish Static Sub Menu Bottom If you want to change content in this block, please do these steps below : Login your Magento Admin area Navigate to CMS > Static Blocks You will see : 39

40 At Title column, choose Static Sub Menu Bottom Click Show/Hide Editor to show code HTML of this block 40

You can change image by editing code HTML Click Save Config when you finish. You should cut image with size 425 x 123. 5.9. Change Footer Copyright ( Text 2014 Magento Demo Store.

41 You can change image by editing code HTML Click Save Config when you finish. You should cut image with size 425 x Change Footer Copyright ( Text 2014 Magento Demo Store. All Rights Reserved ) If you can change in Footer Copyright, please do these steps below : Login your Magento Admin Navigate to System > Configuration Choose tab Design and then click tab Footer : 41

42 You can edit HTML in this place. Click Save Config when you finish. 42

III. Extensions in this template 1. Custommenu 1.1. Configuration Log in to the admin panel, and we will show you how to configure the extension step by step.

43 III. Extensions in this template 1. Custommenu 1.1. Configuration Log in to the admin panel, and we will show you how to configure the extension step by step. To enable the extension, go to System -> Configuration -> Custom Menu -> General on your Dashboard. Also in General tab you can configure next three fields. 43

44 After that you can customize number of columns. Config how to show popup 44

45 1.2. Add CMS Block to popup of a specify category. In order to display a custom block with images or other html content in the popup, use the Static Block (CMS->Static Blocks section) with the ID like "pt_menu_idcat_10", where "10" is the Category ID of this category. Default the custom block will be show at the bottom of the popup. But if you want to show it on the right of the popup, just use the ID like pt_menu_idcat_10_right. 45

46 1.3. Add CMS Block to menu item. Just use the static block with the ID has prefix is "pt_item_menu". Ex: pt_item_menu_first, pt_item_menu_second 46

47 1.4. How to identify category IDs in magento : Login your magento admin Navigate to Catalog > Manage Categories 47

$The content of this static block like this: <ul> <li><a href="{{store direct_url="about-magento-demostore"}}">about Us</a></li> <li><a href="{{store direct_url="contacts"}}">contact Us</a></li> </ul>$

48 1.5. Add links to menu item. In order to add links to menu item we use only static block with the ID is pt_menu_links. The content of this static block like this: <ul> <li><a href="{{store direct_url="about-magento-demostore"}}">about Us</a></li> <li><a href="{{store direct_url="contacts"}}">contact Us</a></li> </ul> 1.6. How to use Go to frontend and just hover mouse on the menu items to see how it work. Below are some demo images 48

49 49

50 50

51 2. Banner Sequence You should cut image with size 600 x Configuration Login your magento admin Navigate to Magentothem > Banner Sequence > Configuration : We got : 51

- Enable : Enable this module or not - Auto slide : Defines whether slideshow auto play or not - Delay : Time between transition of 2 slides when enable auto slide.

52 - Enable : Enable this module or not - Auto slide : Defines whether slideshow auto play or not - Delay : Time between transition of 2 slides when enable auto slide. - Pause on hover : Defines whether slide will be paused or not when you hover image if enable auto slide. - Show Next/Back control : Defines whether next/back button will be shown or not - Show navigation control : Defines whether navigation control will be shown or not 2.2. How to add banner sequence Login your magento admin Navigate to Magentothem > Banner Sequence > Manage Banner 52

53 Click Add Item - Store View : Store view which banner will be displayed. Default is All Stores Views. 53

54 - Title : Title of banner - Animation : Animation between titles and image - Title 2 : Title of banner - Link : Link of banner - Background Image : Click Browse to choose one image as background of banner - Image : Click Browse to choose one image of banner. - Description : Description of banner - Kinds of effect : Effects of image. - Status : Enable or disable banner - Order : Order of banner. Example : With this item : 54

55 You got: 3. Featured Products Slider ( Titles Featured products ) This module shows featured products in slider How to config this extension Login Magento Admin area Navigate to Magentothem > Featured Products Slider > Configuration and configure default criteria as per screenshort below: 55

56 Below is paramenters explanation: Enabled: Include yes/no module paramenter Auto slide : Defines whether items auto play or not Title: Title of module Slidshow Speed : Duration (in milliseconds) of slide transition animation. Defines how fast the current slide is replaced with the next slide. Pause : Timeout between 2 slides when enbale auto slide Show Price : Defines whether the Price is displayed or not Show Add to Cart: Defines whether the Add to Cart is displayed or not Show Add to Wishlist: Defines whether the Add to Wishlist is displayed or not Show Add to Compare: Defines whether the Add to Compare is displayed or not Show Review Rating: Defines whether Review Rating is displayed 56

or not Show Short desciption: Defines whether the short description is displayed or not Short description max length: Max length of short description is displayed.

Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed. Show Next/Back control : Defines whether display next/back control.

57 or not Show Short desciption: Defines whether the short description is displayed or not Short description max length: Max length of short description is displayed. Qty of Product: Product quantity will be displayed on product Slider. Number Product Show : Number of products will be shown. Width of Item : The width of item. Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed. Show Next/Back control : Defines whether display next/back control. Show navigation control : Defines whether display navigation control 3.2. How to show Featured Products Slider extension in this template Login your magento admin Navigate CMS > Pages At Title, Choose your Home page Choose tab Content : Click Show/Hide Editor : 57

58 This code : {{block type="featuredproductslider/featuredproductslider" after="banner_static_center" name="featuredproductslider" template="magentothem/featuredproductslider/featuredproductslider.pht ml" }} Shows Featured products slider extension in this template. 4. Brand slider ( Title Brand & Clients ) 4.1. Configuration Login Magento Admin area Navigate to Magentothem > Brandslider > Configuration and configure default criteria as per screenshort below: Below is paramenters explanation: Enabled : Include yes/no module paramenters Auto slide: Defines whether images autoplay or not Slideshows Speed:Duration (in milliseconds) of slide transition animation. Defines how fast the current slide is replaced with 58

59 the next slide. Animation Speed: The speed of animations, in milliseconds Show Short Description: Defines whether display short description or not Qty of items: Number item display Number Items Show: Number of product is displayed. Width of Item: The width of items Show Next/Back control: Defines whether display next/back button or not Show navigation control: Defines whether display navigation or not 4.2. How to add logo Navigate to Magento > Brandslider > Manage Items. Then : Click Add Item: Below is explanation: Title: Title of item Link: URL 59

60 Image: Image of item Status : Define whether display images or not Decription: Description about item Upload images of item : Click Browse button, you can choose image from your computer You can repeat Add Items above to configure new attribute for other Items. When finished, click Save Item button to save your brand slider. Log out Magento Admin, then Reindex data 5. Bestseller products ( Title Bestseller ) This modules shows best selling products. 60

61 5.1. How to config Login your Magento Admin area Navigate to Magentothem > Bestseller Products > Configuration And configure default criteria as per screenshort below: Below is paramenters explanation: Enabled: Include yes/no module paramenteres Title : Title of module Product Listing Sort By : Sort products list by name, price Direction : Sort products list according to ascending or descending direction Show Add To Cart: Defines whether the Add to cart is displayed or not Show Add To Wishlist: Defines whether the Add to wishlist is displayed or not Show Add To Compare: Defines whether the Add to compare is displayed or not Show Review Rating: Defines whether the Review rating is displayed or not Show Short Description: Defines whether the short description is displayed or not Show Description Max Length: Max length of short description is 61

62 displayed. Qty of Products: Product quantity will be shown in module Products per row : Number of products will be shown per row. Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed How to show Bestseller Products extension in this template Login your Magento Admin area Navigate to CMS > Static Blocks You will see : At Title column, choose Modul Group 62

63 Click Show/Hide Editor to show code HTML of this block This code : {{block type="bestsellerproduct/bestsellerproduct" name="bestsellerproduct" template="magentothem/bestsellerproduct/bestsellerproduct.phtml"}} - Shows Bestseller Products extension in this template 63

64 6. New products ( Title New Arrivals ) 6.1. How to config Login your Magento Admin area Navigate to Magentothem > New Products > Configuration And configure default criteria as per screenshort below: 64

65 Below is paramenters explanation: Enabled: Include yes/no module paramenteres Title : Title of module Product Listing Sort By : Sort products list by name, price Direction : Sort products list according to ascending or descending direction Show Add To Cart: Defines whether the Add to cart is displayed or not Show Add To Wishlist: Defines whether the Add to wishlist is displayed or not Show Add To Compare: Defines whether the Add to compare is displayed or not Show Review Rating: Defines whether the Review rating is displayed or not Show Short Description: Defines whether the short description is displayed or not Show Description Max Length: Max length of short description is displayed. Qty of Products: Product quantity will be shown in module Products per row : Number of products will be shown per row. 65

66 Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed How to show New Products extension in this template Login your Magento Admin area Navigate to CMS > Static Blocks You will see : At Title column, choose Modul Group 66

67 Click Show/Hide Editor to show code HTML of this block This code : {{block type="newproduct/newproduct" name="newproduct" template="magentothem/newproduct/newproduct.phtml"}} - Shows New Products extension in this template 67

68 7. Onsale Products Slider ( Title Hot Sale Items ) This module shows discount products in slider Configuration Login Magento Admin area Navigate to Magentothem > Onsale Products Slider > Configuration and configure default criteria as per screenshort below: 68

69 Below is paramenters explanation: Enabled: Include yes/no module paramenter Auto slide : Defines whether items auto play or not Title: Title of module Slidshow Speed : Duration (in milliseconds) of slide transition animation. Defines how fast the current slide is replaced with the next slide. Pause : Timeout between 2 slides when enbale auto slide Show Price : Defines whether the Price is displayed or not Show Add to Cart: Defines whether the Add to Cart is displayed or not Show Add to Wishlist: Defines whether the Add to Wishlist is displayed or not Show Add to Compare: Defines whether the Add to Compare is displayed or not Show Review Rating: Defines whether Review Rating is displayed 69

70 or not Show Short desciption: Defines whether the short description is displayed or not Short description max length: Max length of short description is displayed. Qty of Product: Product quantity will be displayed on product Slider. Number Product Show : Number of products will be shown. Width of Item : The width of item. Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed. Show Next/Back control : Defines whether display next/back control. Show navigation control : Defines whether display navigation control 7.2. How to show Onsale Products Slider extension in this template Login your magento admin Navigate CMS > Static Blocks You will see : 70

71 At Title column, choose Modul Group Click Show/Hide Editor to show code HTML of this block 71

72 This code : {{block type="onsaleslider/onsaleslider" name="ma.onsaleslider" template="magentothem/onsaleslider/onsaleslider.phtml"}} shows Onsale Products Slider extension. 8. Blog ( Title Lastest Posts ) 8.1. Configuration this extension Login your Magento Admin Navigate to Magentothem > Blog > Configuration 72

73 73

74 Some explanations : At Blog Setting : Enable : Defines whether enable module or not Route to Blog : Example URL : blog is Route to Blog. Blog Title : Title of blog Page layout : Choose layout for blog page. Date Format : Format of date Summary Character Count : Number of characters in a post to be displayed before it is truncated and the Read More link is added. 0 for unlimited. Use Short Content Field : If enabled, additional "Short Content Field" is taken instead of truncated main post. At Slide Setting : Example : Enable Slide : Defines whether enable slide or not Width one column (PX) : The width slide Number of columns : Number of columns will be shown in slide Number of rows : Number of rows will be shown in slide Speed of slide : The speed of slide Auto Slide : Defines whether slide will be auto played or not Max Slide Show : Maximum number of slideshow will be shown Include Jquery : Defines whether include jquery or not At Menus and Links : Enable Left Menu : Show posts in left sidebar Enable Right Menu : Show posts in right sidebar 74

75 Recent Posts : The number of recent post to be displayed in the menu. 0 to disable How to creat categories Login your magento admin Navigate to Magentothem > Blog > Categories Click Add New - Title : Title of category - Identifier : ID of category - Sort Order - Store View : Choose store view you want to show categories - Keywords - Description : Description of category 75

76 Click Save Category to save your config How to add post Login your magento admin Navigate to Magentothem > Blog > Add Post 76

77 77

78 - Title : Title of post - Identifier : Id of post - Store view : Choose store view for this post - Category : Choose category for this post. Default category is News - Status : Hidden pages won't be shown in blog but still can be accessed directly - Enable Comments : Disabling will close the post to new comments - Tag : Type tag - Short Content : Click Show/Hide Editor to type short content - Content : Click Show/Hide Editor to type content 8.4. How to manage posts Login your magento admin Navigate to Magentothem > Blog > Posts Choose post you want to edit Edit or dublicate, delete post. Click Save Post to save your changes How to manage comments Login your magento admin Navigate to Magentothem > Blog > Comments 78

- User : User name - Email Address - Status : Choose Approved to show comment, choose Unapproved to don t show

79 - User : User name - Address - Status : Choose Approved to show comment, choose Unapproved to don t show comment. - Comment : Content of comment Click Save Comment to save your change Or Delete Comment if you want to delete it. 79

screenshort below: Below is explanation: Enabled: Include yes/no module paramenters Heading Title : Title of module Number of Tweets

80 9. Latesttweet ( Title Latest Tweet ) 9.1. Configuration Login Magento Admin area Navigate to Magentothem > Latesttweet > Configuration and configure default criteria as per screenshort below: Below is explanation: Enabled: Include yes/no module paramenters Heading Title : Title of module Number of Tweets show : Number of tweets will be displayed Show Time Stamp : Defines whether show time stamp or not 9.2. Set up Step 1 - Setup a Twitter Application This process is straightforward and you should have a set of keys within a few minutes. 80

81 1. Visit and sign in using your Twitter username and password. This doesn't have to be the username or password of the stream you need access to, just a Twitter account you control. 2. Select "Create new application" and enter the application details. 1. The name and description can be anything you like really, but you can't use "Twitter" in the name. 2. The website field can be your main website and doesn't have to be the site where your Twitter feed or feeds are located. 3. Callback URL can be left blank 4. Enter the CAPTCHA info and click create 5. On the next details screen, click "create my access token". You may need to refresh the page after a few seconds if it doesn't appear automatically. 6. Make a note of the Consumer key, Consumer secret, Access token and Access token secret as highlighted below. 81

82 Step 2 - Authenticate the Twitter Feed You go to your Website folder ( www, public_html ) -> "twitter" folder then open "get-tweets.php" file and change $twitteruser = "twitter_username"; $consumerkey = AubOwFFQ9r35FIEZNTrTsg $consumersecret = Rfdmx8MYYILJvQ8tz7265MEs9sTLOoFKHnLfMjrpwpY $accesstoken = "doohvgjr8lqbaxzvxa5rbgng1mvmsipgebvbt9usw $accesstokensecret = "doohvgjr8lqbaxzvxa5rbgng1mvmsipgebvbt9usw"; 82

83 10. Related Slider ( Title Related products ) Configuration Login Magento Admin area Navigate to Magentothem > Related Slider > Configuration and configure default criteria as per screenshort below: 83

84 Below is paramenters explanation: Enabled: Include yes/no module paramenters Auto slide: Defines whether images autoplay or not Slideshow Speed:Duration (in milliseconds) of slide transition animation. Defines how fast the current slide is replaced with the next slide. Animation Speed: The speed of animations, in milliseconds Show Price: Defines whether price of product is displayed or not Show Wishlist: Defines whether the wishlist is displayed or not Number Product Show: Number product will be display in a row Width of item: The width of the item. Width of Thumbnail: Width of thumbnail image will be displayed. Height of Thumbnail: Height of thumbnail image will be displayed Show Next/Back control: Defines whether next/back control is displayed or not Show navigation control: Defines whether navigation button is displayed or not How to set related products Go to Catalog > Manage Products Select any product Select Related Products 84

image above Click Save or Save and Continue Edit You can

85 Select Any like the image below: Click Search button. And we get the image above Select related products like the image above Click Save or Save and Continue Edit You can repeat steps above to configure new attribute for other products 85

11. Upsell Slider ( Title Upsell products in details page) 11.1. Configuration Login Magento Admin area Navigate to Magentothem > UpsellSlider > Configuration and configure default criteria as per

86 11. Upsell Slider ( Title Upsell products in details page) Configuration Login Magento Admin area Navigate to Magentothem > UpsellSlider > Configuration and configure default criteria as per screenshort below: Below is paramenters explanation: Enabled: Include yes/no module paramenters Auto slide: Enable auto scroller product Title : Title of module Slideshow Speed:Duration(in milliseconds) of slide transition 86

87 animation. Defines how fast the current slide is replaced with the next slide. Animation Speed: The speed of animations, in milliseconds Show Price: Defines whether price of product is displayed or not Show Review Rating: Defines whether the review rating is displayed or not Qty of Products: Product quantity will be displayed on product scroller. Number Product Show: Number product will be displayed in a row Width of Thumbnail:The width of thumbnail image will be displayed. Height of Thumbnail: The height of thumbnail image will be displayed Show Next/Back control: Defines whether the next/back control is displayed or not Show navigation control: Defines whether the navigation control button is displayed or not How to set upsell products Go to Catalog > Manage Products Select any product Select tab Up-sells. Then select Any like image below: 87

88 Click Search button. We get the following picture: Select upsell products like the image above Click Save or Save and Continue Edit You can repeat steps above to configure new attribute for other products 88

12. Prozoom 12.1. Configuration Login Magento Admin area Navigate to Magentothem >

89 12. Prozoom Configuration Login Magento Admin area Navigate to Magentothem > Prozoom > Configuration and configure default criteria as per screenshort below: 89

90 Below is paramenters explanation: Enabled Module: Include yes/no module paramenters Width of Zoom Panel: The width of zoom panel Height of Zoom Panel: The height of zoom panel Border Width of Zoom Panel: The border width of zoom panel Border Color of Zoom Panel: The border color of zoom panel Width of Lightbox Image: The width of lightbox image Height of Lightbox Image: The height of lightbox image Enabled Thumbnail Scroller: Defines whether thumbnail scroller is displayed or not Auto Thumbnail Scroller: Defines whether thumbnail scroller is autoplayed or not Scroll Style: Number Thumbnail Display: Number thumbnail is displayed Width of Thumbnail: The width of thumbnail Height of Thumbnail: The height of thumbnail 13. Layered navigation ajax ( in products page) Configuration Login your Magento Admin area 90

Navigate to Magentothem > Layered navigation ajax> Configuration Click General Configuration And configure default criteria as per screenshort below: Below is paramenters

91 Navigate to Magentothem > Layered navigation ajax> Configuration Click General Configuration And configure default criteria as per screenshort below: Below is paramenters explanation: Enabled Module : Include yes/no module paramenters. Enable Toolbar Ajax : Defines whether enabled Toolbar ajax or not. Enable Slider : Defines whether show price slider 91

Click Browse to image you want to add. Background Opacity : Opacity of background image. 14.

92 Enable Tag Product Ajax : Defines whether Product tag uses ajax or not Loading Image : Image when loading ajax. Click Browse to image you want to insert. Transparent Image : Background image when loading ajax. Click Browse to image you want to add. Background Opacity : Opacity of background image. 14. Ajaxcart Super Configuration Login your Magento Admin area Navigate to Magentothem > Ajaxcart Super> Configuration 92

93 Click General Configuration And configure default criteria as per screenshort below: Below is paramenters explanation: Enabled Module : Include yes/no module paramenters. Show or hide Effect to cart : Defines whether show effect to cart or not. Example : 93

94 Using SSL : Enable if you use https. Show or hide confirm box : Defines whether show confirm box or not. Example : This is confirm box Loading Background Color : Color of loading background. - You can type color code at input box 94

95 - or choose color from pallete Loading Image : Image when loading ajax cart. Click Browse to choose image you want Background Opacity : Opacity of background. 15. Theme options Configuration Login your Magento Admin area Navigate to Magentothem > Theme Options> Configuration 95

96 Click Theme Options Config New label : Defines whether show label New or not Sale label : Defines whether show label Sale or not 96

SAHARA GIFT1 RESPONSIVE MAGENTO THEME

SAHARA GIFT1 RESPONSIVE MAGENTO THEME This document is organized as follows: Chater I. Install ma_sahara_gift1 template Chapter II. Features and elements of the template Chapter III. List of extensions