"SM HiTech Userguide
Tuesday, 02 April 2013 08:23
SM HiTech Userguide - 5.0 out of
5
based on
1 vote
|
Introduction
SM HiTech - Responsive Magento Theme has released for Magento Community Edition 1.7.x. This theme is designed specifically for technology with an eye-catchy design. Layout and decoration colors bring a bright and professional view for the website. Moreover, flexible arrangement guarantees the highest efficiency. SM HiTech will be a great solution for online Camera store, Computer store and Mobile store...
It comes with 6 amazing theme colors, three types of menu: Mega Menu, CSS Menu, Split Menu and other features will give you more choice. With Cpanel, you can easy change color, header, menu style, typography… with CSS3 allows to show many animated effects, and Cloud Zoom help to display products.
This theme is easy to customize even if you are new to Magento; let view our Demo to feel more!
Demo
Document
Main Features
General Features
- Cross-browser: IE 8+, Safari, Mozilla Firefox, Opera 9+
- 100% tableless design, based on new CSS3
- W3C XHTML 1.0 Transitional Valid
- Powerful admin and front Cpanel
- Social networks intergation
- Alternative Google Fonts
- Labels for products
- Cloud Zoom supported
- Magento CE version 1.7.x
- Full PSD files supplied, easily edit
- Custom wishlist page, cart page and 404
- Tablet and Mobile ready by Responsive layout
- Support SEO, pre- and post- text with each instance of modules
Main Menu
- Menus with drop-down submenus
- Mega Menu supports all types of content
- Css Menu
- Split Menu
More
- SM Extra Slider
- SM Categories
- SM Mega menu
- SM Basic Products
1. Installation
1.1 System Requirements
1.1.1 Magento Community Edition 1.7.x
Download: http://www.magentocommerce.com/download
1.2 Installing SM HiTech
Before you begin the SM HiTech installation process, we recommend to back up your current live Magento files and database.
1.2.1. Step by step
1.2.1.1 Unzip file sm_hitech_theme_ m1.7.0.2_v1.0.zip. Using a FTP client, upload all unzipped files and folders to your Magento root folder (merge, not replace)
1.2.1.2 SM Hitech theme has 1 module for theme configuration and 4 other modules for theme enhancement. You can install them as following 1.2.3
1.2.1.3 Unzip file sm_hitech_extensions_m1.7.0.2_v1.0.zip. There will be 5 zip files after extracting. Again, extract zip file of module you want to use. Using a FTP client, upload unzipped files to Magento root folder (merge, not replace).
Repeat uploading step for module(s) you want to use
Repeat uploading step for module(s) you want to use
1.2.1.4 Now log in to Magento admin panel. You have to set SM Hitech as your default theme
1.2.1.5 Go to 'System -> Configuration'. Click Design on the left-hand menu. Under HTML Head, find the Default field and type sm_hitech. Scroll back to the top of the page and click the Save Config button. Clear cache and you can see SM HiTech as your new theme
1.2.1.6 How about theme and modules configuration? Go to 'System -> Configuration'. Under the Tab MAGENTECH.COM, you can configure theme and modules as you want
1.2.2 OR using Quickstart package
If you've just started building your Magento site from the scratch, we recommend following these steps to have a site with all sample data as our demo page.
1.2.2.1 Download sm_hitech_quickstart_m1.7.0.2_v1.0.zip and extract all contents to your Web root folder, usually under public_html/ folder.
1.2.2.2 Change permission of these 4 files and folders (including theirs sub-folders) to 755, if they have not been: magento/var/.htaccess, magento/app/etc, magento/var and magento/media
1.2.2.3 Create a database for your Magento store, this can be done in your hosting control panel, remember database name, user and password to be used in the next step (Note: just create a database, our script will automatically import demo content for you)
1.2.2.4 Now you access your domain from web browser, go to Magento location, the installer will start and you can go through steps of wizard
1.2.2.5 After the installtion is completed, your Magento would look exactly as our SM HiTech demo
2. SM HiTech Layout
3. SM HiTech Modules
There are 4 modules developed in-house to work with SM HiTech homepage. You can configure those as following.
3.1 SM Mega Menu
3.1.1 Position
To replace default main menu
3.1.2 Mega Menu Items
3.1.3 Configuration
3.2 SM Basic Products
3.2.1 Position
Topsl5
3.2.2 Configuration (some parameters will be override for each position, check Homepage configuration below)
3.3 SM Categories
3.3.1 Position
Content-bottom
3.3.2 Configuration (some parameters will be override for each position, check Homepage configuration below)
3.4 SM Extra Slider
3.4.1 Position
Content-top, botproduct, topsl5
3.4.2 Configuration (some parameters will be override for each position, check Homepage configuration below)
4. SM HiTech Static Blocks
These are blocks that are pre-made within SM HiTech theme. Here is some examples how to use them with positions as demo layout above.
Go to 'CMS -> Static Blocks'. Click Add New Block button.
4.1 Position header
4.1.1 Identifier
The identifier should be block-notice.
4.1.2 Code
Click Show/Hide Editor to add this code, classes are essential:
Promotions
Forem ipsum dolor sit amet consectetur adipiscing elit
4.2 Position block-ads
4.2.1 Identifier
The identifier should be block-ads.
4.2.2 Code
Click Show/Hide Editor to add this code, classes are essential:
4.3 Position topsl4
4.3.1 Identifier
The identifier should be block-brands
4.3.2 Code
Click Show/Hide Editor to add this code, classes are essential:
brands
4.4. Position Topsl5
4.4.1 Identifier
block-video
4.4.2 Code
Click Show/Hide Editor to add this code, classes are essential:
Video
4.5 Position block-user2, block-user3, block-user4, block-popular
4.5.1 Identifier
These are the same in layout, only different in some HTML code.
Let take block-user4 as an example. The identifier should be block-user4.
4.5.2 Code
Click Show/Hide Editor to add this code, classes are essential:
Find us18(033)234-5678
4.6 Position block-info-footer
4.6.1 Identifier
The identifier should be block-info-footer.
4.6.2 Code
Click Show/Hide Editor to add this code, classes are essential:
5. Configuration
5.1 Configure homepage
1. Select the homepage from 'CMS -> Pages'.
2. Select Design on the left-hand menu. Select “1 column” from the Layout drop-down menu.
3. In the Layout Update XML box, add the code as you want, this is our demo homepage: download here
4. Click the Save Page button.
5.2 Configure theme using admin back end
For easing the theme configuration, we has been created Cpanel in both backend and frontend, this is sm hitech configuration in backend:
1. Under Magento admin panel, go to 'System -> Configuration'
2. Select SM Hitech Theme on the left-hand menu
3. Tweak the theme as you want
5.3 Configure theme using Cpanel front end
Here is fontend, identical to what has in backend:
Color Sample
6 presets to be chosen
1 Body
Background, Link and Text color
2 Header
Background image and color
3 Footer
Background image and color
4 Menu Style
3 options to be chosen: Mega, CSS or Split
5 Typography
Google Font, various font-size and font-family
Now you are ready for sales!
For other advanced configuration, please submit ticket OR purchase our installation service.