ArrowHiTech Jsc has achieved more than 6 years of experience working on Magento commerce and completed 2000+ Magento projects so far. Thanks to our rich experience in the realm, our proficient team of Magento developers and managers have designed and developed a lot of useful extensions exploiting great features of Magento.
If you haven't got a Magento website yet, you will have to install a copy of Magento Community Edition open source e-commerce web application before using Ethan Responsive Magento theme.
If you already have installed Magento you can skip this section
When your Magento installation is completed successfully you can start theme installation procedure.
1. Install Theme
1.1 Disable compiler
Go to System -> Tools -> Compilation then disable compiler if it is already enabled, if not, you can skip this step.
1.2 Upload Pack
Using a FTP client to upload content of upload folder to the root folder on your Web Server (usually named public_html). Attention: when you copy content of upload folder to the root folder, it will overwrite some files. Please accept it.
You need to upload all content files in folder Theme/step_1 first
Then upload content in folder Theme/step_2
- If you are using magento version 1.9.1.x or later, please upload (upload overwrite) all content files from folder Theme/patch_1.9.1.x to your magento root folder.
- If you are using magento version 1.9.2.x or later, please upload (upload overwrite) all content files from folder Theme/patch_1.9.1.x and Theme/patch_1.9.2.x to your magento root folder.
- If you are using magento version 1.9.3.x or later, please upload (upload overwrite) all content files from folder Theme/patch_1.9.1.x, Theme/patch_1.9.2.x and Theme/patch_1.9.3.x to your magento root folder.
1.3 Refresh Cache
Go to System -> Cache management. Select all, choose refresh action and submit. After that you will see new menu item Mage Solutions. Now log out and login again to refresh access control system
1.4 Install Theme
Go to Mage Solutions -> Theme Settings to install theme you want
- Click button "Install Ethan Theme" to install theme.
- Click button "Restore Config" to setup all default setting of theme (this action just apply to default store config).
1.5 Install Demo Homepage
If you want to install homepage demo, please go to Mage Solutions -> Theme Settings [Import Demo Data]
Click to Theme name you want to import homepage to expand homepages of this theme
- Click to "Import this homepage" button to install. If you install from "default config", this homepage will install to all store view. If you want install to a store view, please change store view first
2. Install Full Demo
To import full demo, first, you need install Magento, install theme (Please read Install Magento and Install Theme) then download database and media of the theme:
After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:
Go to Cpanel -> My SQL Database
Create new database
Create new account of database
Assign database to user
Set permissions for user
Go back to cpanel and go to phpmyadmin
Click to database you have created
Click Import
Click "Browse..." button and choose the database you have downloaded
Click "Go" button to import database
After import database, please find and go to database table name core_config_data
Find 2 records with path are web/unsecure/base_url and web/secure/base_url
Edit value of them to your site url, eg:
Open the file: app/etc/local.xml on your host:
Edit user, password, database name of the database you have created:
Save this file and upload to your host again
Unzip media.zip file you have downloaded then you will get an folder name media
Upload this folder to your magento root folder on your host
Done, now the full demo data of the theme have installed on your site
3. Magento Panel
3.1 What is MGS Frontend Builder?
Very easy to answer, It is a front-end Magento pages builder. It allows you to build and configure Homepage, Category page, Product page, CMS page, Shopping cart page... at frontend visually without having to log in the admin back-end.
Wow, so what are the advantages of MGS Frontend Builder? Visually: You can see directly which you want to build and change Build Web pages by yourself: You can build or configure the pages on your own basing on available layouts and available components Drag & Drop: Simple for you to drap & drop the blocks on the page Grid configuration: It allows you to setup width of blocks with Grid standard (12 columns) Website configuration: It's easy for you to setup all features for your website such as layouts, background, colors, fonts, extensions, catalog... at Frontend Enable/disable Inline translation: Flexible and convenient to directly translate the site content into target languages at frontend.
and much more...
3.2 Create Panel Account
To use panel, you need create an account for frontend, you can create account from admin panel (Customers -> Manage Customers) or register from frontend
After create frontend account, go to admin panel -> Mage Solutions -> MGS Panel
Enabled: Yes
Email Accounts to use panel: Email of frontend account
Save config.
Go to frontend, login frontend account
Now you can see "Active Builder" button at bottom right of page.
3.3 General Page Setting
Width: Width of the page (1024px, 1200px, 1366px, full width)
Right to left layout: Yes/No
Layout: Choose style of page is wide or boxed
Layout Style: Choose style of page is light or dark
Sticky menu: Anchor menu by mouse scroll
Display back to top icon: Visible back to top icon on frontend
Active Preloader: Active preloader icon on page load
Custom CSS: If you want to custom css by yourself, please choose "Yes", to custom css, please edit the file: skin/frontend/mgstheme/[theme_name]/css/custom.css
Default Layout for Category Page: default layout for all category page
Default Layout for Product Page: default layout for all product page
Number of products per row: from 1 to 8
Featured Product Attribute: attribute to set featured products
Best Selling Product Attribute: attribute to set best selling products
Product Picture Ratio: set ratio for all product picture
New Label: label for New products
Sale Label: label for Sale products
Active Price Slider: active price slider filter on category page
Active Load more products: replace pager by ajax load more on category page
3.4 Change Page Layout
You can change layout for:
Category Page
Catalog Search Page
Product Page
My account Page
Blog Page
3.5 Change Header
At frontend, after active builder, click to setting icon at top left of the header to change header
3.7 Edit Logo and Static Block
- At frontend, after active builder, mouse hover to the logo, you can see edit icon
- Click to edit icon, you can upload logo
- Mouse hover to any static block at header and footer, you can see edit icon
- Click to edit icon, you can edit static block
3.8 Change Category Setting
At frontend, after active builder, go to any category, you can change setting and seo content of the category
3.9 Edit Category Information
- At frontend, after active builder, go to any category
- Mouse hover to image or description of category, you can see edit icon
- Click to edit icon, you can upload image and edit description of the category
3.10 Change Product Setting
At frontend, after active builder, go to any product, you can change setting and seo content of the product
3.11 Edit CMS Page Content
- At frontend, after active builder, go to any cms page
- You can see edit icon at top right of content
- Click to edit icon, you can edit content of the page
3.12 Edit Contact Us Information
- At frontend, after active builder, go to contact us page
- Click edit icon at top left of map to edit map information
- Hover to text content and click edit icon to edit map information
3.14 Manage Left block, Right block
At frontend, after active builder, you can add or remove:
- Static block
- Category Navigation
- Sub Category (just for category page)
- Layered Navigation (just for category page)
- Cart Sidebar
- Compare Sidebar
- Reorder Sidebar
- Poll
- Viewed Products
- Wishlist Sidebar
- Tag Popular
- NewsLetter
- Promo Banner
- Menu
- Featured Products
- Bestselling Products
- New Products
- Top Rate Products
- Sale Products
- Facebook Like box
- Tweeter Feed
From left sidebar and right sidebar of:
- Category page
- Catalog Search page
- Product page
- Cms page
- My account page
3.15 Copy Homepage content
4. Homepage Builder
4.1 Homepage Layout
At frontend, after active builder, you can change homepage layout
Check "Use Builder", choose a layout and click "Update" button to use homepage builder, uncheck "Use Builder" to use default cms page
You can add, remove, edit setting, change position of a section
You can add, remove, edit, change column of block
Drag and drop to sort block on each section
Change appear animation for each block
Custom block title, class…
Change settings for the section, add background, padding top, padding bottom, choose parallax section, custom class
4.2 Manage Sections
Mouse hover to any section, you can see setting icon, click setting icon to edit setting for the section
Fullwidth: set fullwidth for section or not
Class name: custom class for section
Background color: background color for section
Background Image: background image for section
Background Repeat: repeat for background image or not
Parallax: Use parallax or not
Background Cover: Set full with for background image or not
Padding top: padding top of section
Padding bottom: padding bottom of section
Divide Columns: Divide this section to multiple columns
4.3 Add Block for Section
At home page, for any section, you can see button:
Click to the button to add new block
Multiple block types can be added (22 blocks):
Static Block
Revolution Slider
New products
Featured Products
Best selling Products
Sale Products
Top Rate Products
Daily Deals
Product Tabs
Category Product
Single Product
Featured Brands
Promo Banner
Latest Posts
Separator
Category Navigation
Testimonial
Events
Profiles
Megamenu
Facebook Like Box
Twitter Feed
Each block will have different setting, but there are some similarities setting:
- Block col (12 to full):
- Custom Class: custom class of the block
- Block Animation: animation effect of the block when page load
- Animation Delay: delay of animation effect
Number of Product: limit number of new product to show
View mode: Grid/List
Number of product per row: Number of product visible per row
Product picture ratio: ratio of the product image
Use slider: Use slider or not
Visible load more button: (apply for grid mode)
4.7 Featured Products Block
If you haven't got an attribute to set featured products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step
Go to Catalog -> Attributes -> Manage Attributes
Click Add New Attribute button
Attribute Code: Your featured products attribute code (eg. featured)
Catalog Input Type for Store Owner: Choose Yes/No
Click tab Manage Label/Options
Fill out your attribute label (eg. Featured Product)
Click Save Attribute button
Go to Catalog -> Attribute ->Manage Attribute Sets
Click your attribute set (eg. Default)
Drag and drop the attribute to a group
Click Save Attribute Set button
Go to Catalog -> Manage Products
Check products you want to show as featured ones on homepage
Action: Choose Update Attributes
Click Submit button
Find Featured Product attribute and change value to yes as follows:
Click Save button
At frontend, choose attribute for featured products and update config:
Number of Product: limit number of new product to show
View mode: Grid/List
Number of product per row: Number of product visible per row
Product picture ratio: ratio of the product image
Use slider: Use slider or not
Visible load more button: (apply for grid mode)
4.8 Best Selling Products Block
If you haven't got an attribute to set best selling products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step
To create Best selling product, please follow create featured product, change attribute code to best_selling, change attribute label to Best Selling
At frontend, choose attribute for best selling products and update config:
Add new block
Number of Product: limit number of new product to show
View mode: Grid/List
Number of product per row: Number of product visible per row
Product picture ratio: ratio of the product image
Use slider: Use slider or not
Visible load more button: (apply for grid mode)
4.9 Featured Brands Block
To add brand images, at back-end, go to Mage solutions->Brand->Manage Brands
At frontend, add new block:
4.10 Product Tabs Block
We create five tabs for: new products, featured products, best selling products, sale products, top rate products
At frontend, add new block:
4.11 Daily Deals Block
Set Deals:
In admin panel, go to Catalog -> Manage Products
Choose a product and click “Prices” tab
Set "Special Price" (Special Price < Price)
Set "Special Price From Date" and "Special Price To Date":
If ["Special Price From Date" < now < "Special Price To Date"] then "Status" of deal will be "Running"
If [now < "Special Price From Date" < "Special Price To Date"] then "Status" of deal will be "Processing"
Set "Deal Quantity": This is maximum quantity for deal (only works for simple products).
Step 4: If you don’t already have a application registered, you will now see a form to register a new one. If you instead see a list of ”clients”, click the ”Register new client” at the top right..
Step 5: Set application name to your websites name
Step 6: Click ”Manage clients” in the top menu and you will now see you new client in the list and a client id, client secret and more. Copy the client_id and past that in the field in the settings page
Step 7: Setting at frontend .
Active: Yes
User Name: User Name login on instagram
Count: Number images to show
Width: Width of thumbnail images
Height: Height of thumbnail images
Create block Instagram on Homepage
Title: Title block.
Instagram User: username of your instagram account
Number of images: number images to show
Client Id: Your app client id
Width: Width of thumbnail images
Height: Height of thumbnail images
4.23 Flickr Feed
To setup Flick, at frontend, after active builder click to edit icon at top left of content and go to "Social" -> change "Active" to Yes.
Step 1: Open the below link to get your Flickr API Key. Make sure you are already logged into your Flickr account before going to click on below link..
Step 2: Link will redirect your to Flickr API Key apply page. Click on “Apply for your key online now” link same as below screenshot.
Step 3: Next screen will ask you to Usage of Flickr API Key. Select "APPLY FOR A NON-COMMERCIAL KEY".
Step 4: Input your Flickr App details to form and click on SUBMIT button.
Step 5: After submit form on previous page you will get your Flickr API Key on next screen. Below screenshot showing your new generated Flickr API Key.
Step 6: Setting at frontend .
Create block Flickr on Homepage
Title: Title block.
API Key: Your Flickr API key
User Id: Your Flickr user Id
4.24 Portfolio
Create block Portfolio on Homepage
Categories to show: Select Categories Portfolio to show item
Number of portfolio to show: number portfolio to show
Number of portfolio per row: number portfolio on a row
Use slider: Show as slider
5. Ethan Home Page Setup
5.1 Home page 1
SECTION 1
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
General tab
Full width: No
Padding top: 29
Padding bottom: 50
Block 1. Revolution Slider
Step 1: At frontend, add new block -> choose "Revolution Slider".
Step 2: Setting block
Block col (12 to full): 12
Slider: Slider Home 1_10
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
General Config:
Custom Class:
Padding top: 0
Padding bottom: 0
Column Config
Choose: 6,6
Custom class for Column 1col-xs-12
Custom class for Column 2col-xs-12
Block 2. Promo Banner "Home 1 Banner Jackets For Men"
Step 1: At frontend, add new block -> choose "Promo Banner".
Step 2: Setting promo
General:
Block col: 12
Banner Config:
Title: Home 1 Banner Jackets For Men
Background image: Choose image promo banner.
Html content:
Jackets For Men
New Trend 2017
Text align: Top left
Block 3. Promo Banner "Home 1 Banner Season On Sale"
Step 1: At frontend, add new block -> choose "Promo Banner".
Step 2: Setting promo
General:
Block col: 12
Banner Config:
Title: Home 1 Banner Season On Sale
Background image: Choose image promo banner.
Html content:
Jean For Women
Save Up 35%
Text align: Top left
Block 4. Promo Banner "Home 1 Banner Jean For Women"
Step 1: At frontend, add new block -> choose "Promo Banner".
Step 2: Setting promo
General:
Block col: 12
Banner Config:
Title: Home 1 Banner Jean For Women
Background image: Choose image promo banner.
Html content:
Jean For Women
Save Up 35%
Text align: Top left
Block 5. Promo Banner "Home 1 Banner Real For Men"
Step 1: At frontend, add new block -> choose "Promo Banner".
Step 2: Setting promo
General:
Block col: 12
Banner Config:
Title: Home 1 Banner Real For Men
Background image: Choose image promo banner.
Html content:
Real For Men
The Trending
Text align: Top left
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
General tab
Full width: No
Padding top: 45
Column Config
Choose: 12
Block 6. Deals Products Block
Step 1: At frontend, add new block -> choose "Deals".
Step 2: Setting Block
General:
Block col: 12
Title: Deals Of The Day
Number of Products per row: number of products to show for per category
Block 7. New Products Block
Step 1: At frontend, add new block -> choose "New products".
Step 2: Setting Block
General:
Block col: 12
Title: Latest Products
Number of Products per row: number of products to show for per category
SECTION 4
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
General tab
Full width: No
Column Config
Choose: 12
Block 8. Block Text & Image
Step 1: At frontend, add new block -> choose "text & image block".
Step 2: Setting block
General:
Block col:12
Setting block:
Title: Input name static block.(Banner Hot Trendy Clother)
Now, you can open the file: skin\frontend\mgstheme\Ethan\css\custom.css on your host to edit.
Use admin panel:
From back-end, go to Mage Solution -> Theme Settings
Expand "Add custom Style" section to add custom style by your self
Add custom font: you can upload new font to customize your style
To add custom font, you need enter font-name and upload .ttf file, .eot file, .woff file, and .svg file
Custom style: you can custom style here
7.2 Setup Multi Languages
To setup multi languages, you can go to System -> Manage Stores
Click Create Store View button
Store: choose your Main store
Name: Language
Code: code for this language.
Press Save button
Go to System -> Configuration -> General
Choose a store view (language) you have created
Choose the Country of this store view (language)
Choose locale of this store view (language)
Press Save Config button
7.3 Setup Currency
To setup currency, you can go to System -> Configuration, choose Currency Setup tab. Set Allowed Currencies are the currency you want on your store.
Go to System -> Mange Currency Rates, press import. Wait for the system to import currency exchange rate then press Save.
Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.
7.4 Enable Translate Inline
To enable translate inline for any store view, at front-end, go to store view you want to enable translate inline, active builder.
At top panel, please click to this icon to enable translate inline.
Now you can translate for this store view
When you done, don't forget disable translate inline for this store view. To disable translate inline, please click to this icon
7.5 Setup Social Login
To setup social login, at frontend, after active builder click to edit icon at top left of content and go to "Social" -> change "Active" to Yes.
Please see the image bellow, red text are Identifiers of static blocks
7.9 Edit Mobile Menu
For mobile menu, you need to create a megamenu and add it to static block "mobile_main_menu"
After create new horizontal megamenu, please go to CMS -> Static BLock, edit static block "mobile_main_menu" and change menu_id into this code: {{block type="megamenu/horizontal" menu_id="4" template="megamenu/horizontal.phtml"}} by the id of the megamenu you have created.
7.10 Setting Megamenu
From admin panel, go to Mage Solutions -> Megamenu -> Configuration and setup "Is Enable" to "Yes". You can config homepage link on this.
Add new Megamenu items
From admin panel, go to Mage Solutions -> Megamenu -> Manage Megamenu Items -> Click button "Add Megamenu Item"
Setting
Label: Label show on menu.
Link: Url of this
Position: Position on menu.
Columns: Column sub menu of this.
Custom Class: If you want add orther style for this.