Overview
Adella Documentation v1.0
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.
Adella eCommerce is fully compatible with Magento Community Edition 1.7.0.0, 1.7.0.1, 1.7.0.2, 1.8.0.0, 1.8.1.0, 1.9.0.0, 1.9.0.1, 1.9.1.0, 1.9.1.1, 1.9.2.0, 1.9.2.1, 1.9.2.2, 1.9.2.3, 1.9.2.4
Install 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 Adella Responsive Magento theme.
If you already have installed Magento you can skip this section
To install Magento, follow these steps:
- Check if your server is compatible with Magento. Find detailed instructions here - http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento
- Check if your server meets Magento's System Requirements - http://www.magentocommerce.com/system-requirements/
- If you want to install sample data, use this document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-cheat-sheet
Go to link "More information: Installing the Sample Data for Magento" - If you want to better understand Magento configuration, use this document - http://www.magentocommerce.com/knowledge-base/entry/magento-installation-guide
- When your Magento installation is completed successfully you can start theme installation procedure.
Install Theme
Go to System -> Tools -> Compilation then disable compiler if it is already enabled, if not, you can skip this step.
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 Themes/Magento_1.x/step_1 first
Then upload content in folder Themes/Magento_1.x/step_2
If you are using magento version 1.9.1.x or later, please upload (upload overwrite) all content files from folder Themes/Magento_1.x/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 Themes/Magento_1.x/patch_1.9.1.x and Themes/Magento_1.x/patch_1.9.2.x to your magento root folder. (Upload patch_1.9.1.x first. patch_1.9.2.x when patch_1.9.1.x uploaded.)
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
Go to Mage Solutions -> Theme Settings to install theme you want
- Click button "Install Adella Theme"
- Click button "Restore Config"
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
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:
Database: https://www.dropbox.com/s/6zess30r5sjhmo1/adella.sql.zip?dl=0
Media: https://www.dropbox.com/s/zad56bdu7kg18gh/media.zip?dl=0
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
- Admin account:
- User name: admin
- Password: admin999
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...
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.
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
- Enable Google rich snippets: More details
- Enable Popup Newsletter: Enable Newsletter popup when customer visit homepage
Background
- Background Color: background color of website
- Background Image: background image of website
- Background Pattern: background image pattern (apply for boxed mode)
Fonts
- Default font: font for all text
- Heading 1: font for <h1> tag
- Heading 2: font for <h2> tag
- Heading 3: font for <h3> tag
- Heading 4: font for <h4> tag
- Heading 5: font for <h5> tag
- Heading 6: font for <h6> tag
- Price: font for price
- Menu: font for main menu
Extensions
- Enable Megamenu: disable/enable megamenu extension
- Enable Ajax Add to Cart: disable/enable ajax cart extension
- Enable Quick View: disable/enable quick view extension
- Enable Daily Deals: disable/enable daily deals extension
- Enable Onestep Chekout: disable/enable onestep checkout extension
Catalog
- 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
Change Page Layout
You can change layout for:
- Category Page
- Catalog Search Page
- Product Page
- My account Page
- Blog Page
Edit Logo
Edit Logo
- At frontend, after active builder, mouse hover to the logo, you can see edit icon
- Click to edit icon, you can upload logo
Edit Logo on Sticky menu
Enable sticky menu
To change logo at sticky menu, from admin panel, go to CMS -> Static Blocks
Find to edit or create static block with Identifier: adella_logo_sticky.
If static block adella_logo_sticky is ready, you can edit it with MGS Frontend Builder. At Frontend, scroll to show sticky menu. Mouse hover to the logo (sticky menu), you can see edit icon
Edit Logo on Menu Responsive (Mobile Menu)
To change logo at Mobile menu, from admin panel, go to CMS -> Static Blocks
Find to edit or create static block with Identifier: adella_logo_menu.
Edit Static Block
- Mouse hover to any static block, you can see edit icon
- Click to edit icon, you can edit static block
Change Category Setting
Edit Category Information
Change Product Setting
Edit CMS Page Content
Edit Contact Us Information
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
Copy Homepage content
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
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
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
Setting Color Header
Config with MGS Frontend Builder
Config with back-end
Setting Color Content
Config with MGS Frontend Builder
Config with back-end
Single Products
Single Product to show one product:
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get Single Product at CMS page with code: {{block type="mpanel/product_special" title="Special Product" sku="sale-01" product_ratio="" show_name="0" show_price="0" show_rating="0" show_addcart="0" show_quickview="0" show_wishlist="0" show_compare="0" template="mgs/mpanel/products/special_product.phtml"}}
1 is Yes, 0 is No
- SKU: input SKU of product you want show.
- You can show or hide Product Name, Price, Rating, Add to Cart button, Quickview button, Wishlist Button, Compare Button
New Products
Demo:
To set new product:
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get New Product at CMS page with code: {{block type="mpanel/product_new" display_type="new_products" products_count="6" slider="1" count_per_row="4" title="New Arrival" product_ratio="" auto_play="false" stop_hover="false" navigation="true" pagination="true" number_row="1" template="mgs/mpanel/products/new_products.phtml"}}
- 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)
Sale Products
Demo:
To set sale product:
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get Sale Product at CMS page with code: {{block type="mpanel/product_sale" products_count="6" slider="1" count_per_row="4" title="Sale Products" product_ratio="" auto_play="false" stop_hover="false" navigation="true" pagination="false" number_row="1" template="mgs/mpanel/products/sale_products.phtml"}}
- Number of Product: limit number of 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)
Featured Products
Demo:
Config Product to Featured product
Go to Catalog -> Attributes -> Manage Attributes then click to ". If it is already you can remember attribute label and skip this step.
From front-end, active builder, Click to setting icon at top panel
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get Featured Product at CMS page with code: {{block type="mpanel/products" products_count="6" slider="1" count_per_row="4" title="Featured Products" product_ratio="" auto_play="false" stop_hover="false" navigation="true" pagination="false" number_row="1" template="mgs/mpanel/products/featured_products.phtml"}}
- Number of Product: limit number of 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)
Best Selling Products
Demo:
Config Product to Featured product
Go to Catalog -> Attributes -> Manage Attributes then click to ". If it is already you can remember attribute label and skip this step.
From front-end, active builder, Click to setting icon at top panel
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get Best Selling Product at CMS page with code: {{block type="mpanel/products" products_count="6" slider="1" count_per_row="4" title="Best Selling Products" product_ratio="" auto_play="false" stop_hover="false" navigation="true" pagination="false" number_row="1" template="mgs/mpanel/products/hot_products.phtml"}}
- Number of Product: limit number of 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)
Top Rated Products
Demo:
At frontend, add new block:
Config Block:
General Tab
Product Config
You can get Top Rated Product at CMS page with code: {{block type="mpanel/product_rate" products_count="6" slider="1" count_per_row="4" title="Top Rated Product" product_ratio="" auto_play="false" stop_hover="false" navigation="true" pagination="false" number_row="1" template="mgs/mpanel/products/rate_products.phtml"}}
- Number of Product: limit number of 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)
Products Tab (New, Sale, Featured, Best Selling, Top Rated)
Demo:
To set New, Sale, Featured, Bestselling please view at before guide: "New Product", "Sale Product", "Featured Product", "Best Selling Product"
At frontend, add new block:
Config Block:
Tabs Config
Category Config
You can get Tab Product at CMS page with code: {{block type="core/template" products_count="6" slider="1" count_per_row="4" tabs="new_products,featured_products,hot_products,sale_products,rate_products" product_ratio="" new_label="New Arrivals" featured_label="Featured" hot_label="Best Selling" sale_label="Sale" rate_label="Top Rate" auto_play="false" stop_hover="false" navigation="false" pagination="false" number_row="1" category_id="53" template="mgs/mpanel/tabs.phtml"}}
- Number of Product: limit number of product to show
- 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
- category_id: Get product at only category
Category Tab Product
Demo:
At frontend, add new block:
Config Block:
Tabs Config
Category Config
You can get Tab Category Product at CMS page with code: {{block type="mpanel/products" template="mgs/mpanel/products/category_products/category_products_tabs.phtml" title="" products_count="12" column="4" category_ids="53,54,59,65" product_ratio="" show_type="position"}}
- Number of Product per Category (products_count): limit number of product to show
- Number of product per row (column): Number of product visible per row
- Product picture ratio: ratio of the product image
- category_ids: Input categories ID
Category List Product
Demo:
At frontend, add new block:
Config Block:
Tabs Config
Category Config
You can get List Category Product at CMS page with code: {{block type="mpanel/products" template="mgs/mpanel/products/category_products/category_products_list.phtml" title="New in" products_count="3" column="1" category_ids="55" product_ratio="" show_type="new"}}
- Number of Product per Category (products_count): limit number of product to show
- Number of product per row (column): Number of product visible per row
- Product picture ratio: ratio of the product image
- category_ids: Input categories ID
Daily Deals Product
Demo:
Set Deals Product
At frontend, add new block:
Config Block:
General tab
Deal Config
You can get Deals at CMS page with code: {{widget type="deals/widget" template="mgs/deals/widget/slide.phtml" column="4" real_deal="7,6,5,4,3" title="Hot Deals" auto_play="false" stop_hover="false" navigation="true" pagination="false" product_ratio="" number_row="1"}}
- Number of product per row (column): Number of product visible per row
- real_deal: Product id to show
- Tilte (title): Title block
Revolution Slider
We are using "Magento Responsive Slider Revolution Extension - AM Revolution Slider". You can find more information at: http://www.arexmage.com/am-revolution-slider.html
The first, from admin, go to AM->AM Revolution Slider->Manage Slider to add new slider
At frontend, choose revolution slider block to add
Choose slider to add
Latest Post Block
Testimonial Block
Events Block
To add new event, please go to back-end, Mage Solutions -> Events -> Manage Events
At frontend, add new block:
- Number of Events: number of events to show
- Summary Character Count: count of character will show
- Show Begin Time: display time of event
- View mode: Grid/List
- Number of event per row: number of event to show per row
Profiles Block
Portfolio Block
To add new portfolio categories, please go to back-end, Mage Solutions -> Portfolio -> Portfolio Categories
To add new portfolio, please go to back-end, Mage Solutions -> Portfolio -> Portfolio Items
At frontend, add new block:
- 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
Featured Brands Block
To add new brand, please go to back-end, Mage Solutions -> Brand -> Manage Brands
At frontend, add new block:
Maintenance
To setup maintenance page. Go to System -> Configuration -> Maintenance
Set time countdown
Static Block Code
With static block demo. You can see code example at folder: Themes/Magento_1.x/demo_contents/Adella_Html_CMS_Static_Block
Static Block Home 1
Static Block Home 2
Static Block Home 3
Static Block Home 6
Static Block Home 7
Static Block Home 1 (Black)
Static Block Home 2 (Black)
Static Block Home 6 (Black)
Static Block Footer 1
Static Block Footer 2
Static Block Footer 3
Static Block Footer 4
Static Block Footer 5
Static Block Product Detail
Static Block Login Page
Static Block Contact Page
Setup Mobile Template
To setup mobile template, from admin panel, go to System -> Configuration -> Design
Under Themes section, please Add Exceptions for Templates, Skin (Images / CSS), Layout, Default
- Matched Expression: iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini
- Value: adella_mobile
Edit Mobile Logo
To change logo at mobile theme, from admin panel, go to CMS -> Static Blocks
Find to edit or create static block with Identifier: adella_mobile_logo.
Edit Content Home Page
From admin panel, go to CMS -> Static BLocks, search to edit or create static block with Identifier is: adella_mobile_homepage
At this static block, you can change revolution slider banner, featured products and vertical megamenu
Revolution slider
Create a revolution slider. Then change your slider id at {{widget type="revslider/slider_preview" id="your_id"}}
Featured products
For Featured Products, you can change number of products to show on slide and title of this block:
{{block type="mpanel/products" products_count="10" title="Featured Products" template="cms/home/featured_products.phtml"}}
Change Theme Version (Black - Light)
From admin, go to Mage Solutions -> Theme Settings-> [General]
Setting Category Landing
Category landing page are pages list all sub categories of current category with sub categories information (category thumbnail image, category description, category name, products count of category).
To perfect for category landing page, you need to upload thumbnail image for categories, you can upload thumbnail for categories at Catalog -> Manage Categories
Adella theme have three landing page layout:
Collection Grid
Collection Masonry
Collection Lookbook
To setup category landing page, you must create a static block with code:
- Grid Mode:
{{block type="catalog/navigation" cate_id="4" template="mgs/mpanel/landing-grid.phtml"}}
- Masonry Mode:
{{block type="catalog/navigation" cate_id="4" template="mgs/mpanel/landing-mansory.phtml"}}
- Lookbook Mode:
{{block type="catalog/navigation" cate_id="4" height="400" template="mgs/mpanel/landing-lookbook.phtml"}}
"cate_id" is parent categories Id. With lookbook mode, you can add "height"(px) to set max-height for section
To set landing and change layout for category, from frontend, login with Panel account -> Active Builder
- Display Mode: Static Block Only
- CMS Block: Choose static block you create.
Add Custom Style
To custom style of your site, you have 2 ways:
Use custom.css:
- From front-end, active builder
- Click to setting icon at top panel
- Under General section, "Custom css" choose "Yes"
- Click "Update" button to save
- Now, you can open the file: skin\frontend\mgstheme\Luxury\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
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
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.
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
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.
Setup Facebook Login
Step 1: Go to Facebook Developers
Step 2: Login with your app account or your facebook account and create app.
Valid OAuth redirect URIs: yoursite.com/social/facebook/connect/
Step 3: Go to Dashboard of your app. Click "Show" to view App Secret.
Step 4: Copy App ID and App Secret to setup facebook.
Setup Google Login
Step 1: Go to Creating a Google Developers Console project and client ID and follow the instructions step by step.
Authorized redirect URIs: yoursite.com/social/google/connect/
Step 2: Copy your client ID and client secret to setup google
Setup Twitter Login
Step 1: Go to Twitter Application Management and choose your app or registering an application.
Step 2: On dashboard your app. Choose tab "Keys and Access Tokens" and coppy infomation to setup twitter
Callback URL: yoursite.com/social/twitter/connect/