"SM eStore Responsive Theme Userguide
Thursday, 15 November 2012 00:00
SM eStore Responsive Theme Userguide - 5.0 out of
5
based on
1 vote
|
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 eStore
Before you begin the SM eStore installation process, we recommend to back up your Magento installation and database for safety.
1.2.1 Unzip file sm_estore_theme_ m1.7.0.2_v1.0.zip to a folder such as estore (1.7.0.2 and 1.0 are just version numbers)
1.2.2 Using a FTP client, upload the unzipped files to the Magento root folder (merge, not replace)
1.2.3 Notice that SM eStore theme has 5 modules included. You can install as following 1.2.5
1.2.4 Unzip the downloaded sm_estore_extensions_m1.7.0.2_v1.0.zip file to a folder. There will be 5 zip files after extracting.
1.2.5 Extracting zip file of module you want to use, there will be two folder app and skin. Using a FTP client, upload the files to the Magento root folder (merge, not replace). Repeat this step for each module you want to use.
1.2.6 After that, log in to the Magento admin panel. Now you have to set SM eStore as your default theme
1.2.7 Go to 'System -> Configuration'. Click Design on the left-hand menu
1.2.8 Under HTML Head, find the Default field and type sm_estore
1.2.9 Scroll back to the top of the page and click the Save Config button
1.2.10 Clear the cache then you can see SM eStore as your new theme
1.2.11 About modules configuration, go to 'System -> Configuration'. Under the Tab SMARTADDONS.COM, you can choose to configure modules you want
1.2.12 OR using the Quickstart package
If you've just started building your Magento site from the scratch, we recommend following below to have a site with all sample data as our demo page.
1.2.12.1 Download sm_estore_quickstart_m1.7.0.2_v1.0.zip and extract all contents to your Web root folder, usually under public_html/ folder (1.7.0.2 and 1.0 are just version numbers)
1.2.12.2 Change permission of these 4 files and folders (including sub-folders) to 755, if they have not been: magento/var/.htaccess, magento/app/etc, magento/var and magento/media
1.2.12.3 Create a database for your Magento store, this can be done in your hosting control panel (Note: just create database, our script will automatically import demo content for you)
1.2.12.4 Now you access your domain from your web browser, go to Magento, the installer will start and you can install Magento step by step through wizard
1.2.12.5 After the installation is completed, your Magento site should look exactly as our SM eStore demo
2. Demo Layout
3. Layout - Modules
There are 5 modules developed in-house to work with SM eStore demo, used on homepage. You can configure those five under Magento admin panel as following.
3.1 SM Mega Menu
3.1.1 Position
In the default mega menu
3.1.2 Mega Menu Items
3.1.3 Configuration
3.2 SM Slick Slider
3.2.1 Position
slideshow
3.2.2 Configuration
3.3 SM Slider
3.3.1 Position
slider
3.3.2 Configuration
3.4 SM Block Tabs
3.4.1 Position
tab1
3.4.2 Configuration
3.5 SM Basic Products
3.5.1 Position
tab1, used along with module above
3.5.2 Configuration
4. Layout - Blocks
These are blocks that are pre-made within SM eStore theme. Here are some examples about how to use them, with positions as demo layout.
Under Magento admin panel, go to 'CMS -> Static Blocks'. Click Add New Block button.
4.1 Position -1, -2 and -3
4.1.1 Identifier
These are the same in layout, only different in some HTML code.
Let take position-1 as an example. The identifier should be position-1 for easily remembering.
Let take position-1 as an example. The identifier should be position-1 for easily remembering.
4.1.2 Code
Click Show/Hide Editor to add this code, classes are needed:
4.2 Position block-user7
4.2.1 Identifier
The identifier should be block-user7
4.2.2 Code
Click Show/Hide Editor to add this code, classes are needed:
Latest News
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque velit, blandit sed scelerisque quis, vulputate vel lorem. Sed luctus, sapien elementum viverra
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque
- Etiam neque velit, blandit sed velit, blandit sed
- Etiam neque velit, blandit sed velit, blandit sed scelerisque quis, vulputate vel lorem. Sed luctus, sapien
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
4.3 Position block-user8, block-user9
4.3.1 Identifier
These are the same in layout, only different in some HTML code.
Let take block-user8 as an example. The identifier should be block-user8 for easily remembering.
Let take block-user8 as an example. The identifier should be block-user8 for easily remembering.
4.3.2 Code
Click Show/Hide Editor to add this code, classes are needed:
Vip Membership
4.4 Position block-user4
4.4.1 Identifier
The identifier should be block-user4 for easily remembering.
4.4.2 Code
Click Show/Hide Editor to add this code, classes are needed:
Follow us!
4.5 Position block-contact-us
4.5.1 Identifier
The identifier should be block-contact-us for easily remembering.
4.5.2 Code
Click Show/Hide Editor to add this code, classes are needed:
Contact Us
- + 084 - 04 - 1234567
- Santiego Interpro Road - owando Madison District - East Englewood City
- contact@ytcvn.com
5. Configuration
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, remove the existing content then add the code as you want
940
940
Featured Products
0
New Products
catalog
87
price
12
12
200
135
1
1
1
1
1
4. Click the Save Page button.
Configure theme using admin back end
For easing the theme configuration, we has been created Cpanel in the front end, this is identical to what has in the Magento admin panel:
1. Under Magento admin panel, go to 'System -> Configuration'
2. Select SM eStore Theme on the left-hand menu
3. Tweak the theme as you want
Configure theme using Cpanel front end
For easing the theme configuration, we has been created Cpanel in the front end, this is identical to what has in the Magento admin panel:
1 Color Sample
5 preset to be chosen
2 Body
Background, Link and Text color
3 Footer
Background color and image
4 Menu Style
3 options to be chosen: Mega, CSS or Split
5 Typography
Google Font if needed, Body font-size and font-family
That's it. Now you are ready for sales!
For other configurations, please submit ticket OR purchase our installation services.