© Arrowhitech JSC 2015.

Overview

Dukan 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.

Version: 1.7+
Author: Magesolution.
Design: Arrowhitech.

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 Dukan Responsive Magento theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

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 or later, please upload (upload overwrite) all content files from folder Theme/path_1.9.1 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 Dukan 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:

Database: https://www.dropbox.com/s/h1kn33pyhq9vaxe/dukan.sql.gz?dl=0

Media: https://www.dropbox.com/s/ziwgycowmsxv38a/media.zip?dl=0



After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:

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

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


 

Background

 

Fonts

 

Extensions

 

Catalog

 

3.4 Change Page Layout

 
You can change layout for:

3.5 Change Header

At frontend, after active builder, click to setting icon at top left of the header to change header


 
 

3.6 Change Footer

At frontend, after active builder, click to setting icon at top left of the footer to change footer


 
 

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

4.2 Manage Sections

Mouse hover to any section, you can see setting icon, click setting icon to edit setting for the section  
 

 


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): 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


4.4 Static Block

 


4.5 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
 

4.6 New Products Block

 
To set new product, please read step 1 from this link: http://www.magentocommerce.com/knowledge-base/entry/adding-new-products-list-to-home-page

 
 


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 At frontend, choose attribute for featured products and update config:
 

 

 


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

 

 


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:



At frontend, add new block:

 

 


4.12 Single Product

At frontend, add new block:


 


4.13 Promo Banner Block

At frontend, add new block:

 

 

For effect of promo banner when mouse hover, you need to add class for custom class.
There are class list you can use:


4.14 Latest Post Block


For blog module, we are using AW_Blog extension

 

 

4.15 Separator Block

At frontend, add new block:

 

 

4.16 Category Product Block


At frontend, add new block:

 

 

4.17 Testimonial Block




At frontend, add new block:

 

 

4.18 Events Block


To add new event, please go to back-end, Mage Solutions -> Events -> Manage Events

At frontend, add new block:

 

 

4.19 Profiles Block


To add new profile, please go to back-end, Mage Solutions -> Profiles

At frontend, add new block:

 

 

4.20 Facebook Like Box Block




To add facebook like box block, first, you need setting for Facebook AppId and Facebook Secret Key

At top panel, click to setting icon, under Socials section

 

At frontend, add new block:

 

 



4.21 Twitter Feed




To add twitter feed block, first, you need setting for Twitter information

At top panel, click to setting icon, under Socials section

 

At frontend, add new block:

 

 

5. Custom Class

To add custom class to a block:

At front-end, active builder.

Hover to block you want to add custom class, you can see some link icons, please click to edit icon:





You can add custom class at "Custom Class" field

There are class list you can use:



5.1 Bootstrap Class

"no-padding"

To remove padding of element

"col-md-*, col-sm-*, col-xs-*"

To use for grid system, you can define different gird on desktop, tablet or mobile. See more at Bootstrap

6. How To

7.2 Change 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

Dukan theme have three landing page layout:

3 Columns


Masonry


Lookbook

To set category landing and change layour for category landing, from frontend, go to category you want to set category landing page

Active builder, click to "Setting" at top panel


Click "Update" button to save your setting




7.3 Add Custom Style

To custom style of your site, you have 2 ways:

Use custom.css: Use admin panel:


7.4 Setup Multi Languages

To setup multi languages, you can go to System -> Manage Stores

Click Create Store View button

Press Save button

Go to System -> Configuration -> General

Press Save Config button




7.5 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.6 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.7 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





7.8 Edit Mobile Content

Homepage Content


From admin panel, go to CMS -> Static BLocks, search static block with Identifier is: dukan_mobile_homepage

At this static block, you can change revolution slider banner, featured products and vertical megamenu


To change revolution slider banner, please edit id of the banner {{widget type="revslider/slider_preview" id="2"}}


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"}}


Footer Content

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 "dukan_mobile_main_menu"

After create new horizontal megamenu, please go to CMS -> Static BLock, edit static block "dukan_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.