© Arrowhitech JSC 2015.

Overview

Orson 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.
Orson 2 documentation: Click here.

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 Orson 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.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.2.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 Orson 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/govtznl0gxh2q4e/orson.sql.zip?dl=0

Media: https://www.dropbox.com/s/fqt4a5igvw8ebrq/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

 

Breadcrumbs

 

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

 

 



4.22 Instagram Feed


To setup Instagram, at frontend, after active builder click to edit icon at top left of content and go to "Social" -> change "Active" to Yes.

7.6.1 Setup Instagram

Step 1: Login to Instagram if your not already.

Step 2: Go to Instagram Developers

Step 3: Click on ”Register your application”..

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 .



Create block Instagram on Homepage






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







4.24 Portfolio

Create block Portfolio on Homepage








5. Orson Home Page Setup

5.1 Home Version 1



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Promo Banner "Orson Casual Men"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 3. Promo Banner "Orson Ladies Anniversary"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 4. Promo Banner "Orson Sale Off 50"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5: New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products block".

Step 2: Setting block

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 6: Static block title "Orson Newsletter Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7: Static block title "Orson Women Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 8: Static block title "Orson Man Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 9: Static block title "Orson Kid Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 10: Sale Products Block "Sale Products"

Step 1: At frontend, add new block -> choose "Sale Products Block"

Step 2: Setting block

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 11: Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Block setting

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 12. Latest Posts Block

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Block setting

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13: Static block title "Orson Money Back Guarantee".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 14: Static block title "Orson Free Shipping and Return".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 15: Static block title "Orson Online Support".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

5.2 Home Version 2



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Category Navigation "All Categories"

Step 1: At frontend, add new block -> choose "Category Navigation".

Step 2: Setting block

Block 2. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 3: Static block "Orson Newsletter Home 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 4: Featured Products Block "Featured"

Step 1: At frontend, add new block -> choose "Featured Products Block".

Step 2: Setting block


Block 5: Testimonials Block

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Setting block


Block 6: Static block "Orson Title News Sidebar Home 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 7: Latest Posts Block

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Setting block

Block 8. Promo Banner "Orson Fashion Trending 2016"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 9. Promo Banner "Orson Fashion Trending 2016"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 10: New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block


Block 11. Static block title "Orson Fashion Trending 2016"

Step 1: At frontend, add new block -> choose "Text & Image Block".

Step 2: Setting block


Block 12. Static block title "Orson Free Shipping and Return Inline"

Step 1: At frontend, add new block -> choose "Text & Image Block".

Step 2: Setting block


Block 13. Static block title "Orson Online Support Inline"

Step 1: At frontend, add new block -> choose "Text & Image Block".

Step 2: Setting block


Block 14: Sale Products Block "Sale Products"

Step 1: At frontend, add new block -> choose "Sale Products Block"

Step 2: Setting block


Block 15. Promo Banner "Orson Fashion Trending 2016"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 16. Brand Block "Our Clients"

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting promo

5.3 Home Version 3



SECTION 1

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Promo banner Block "Orson Fashion Trending Home 3".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

Block 3. Promo banner Block "Orson Fashion Trending Home 3".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 4: Separator Block.

Step 1: At frontend, add new block -> choose "Separator Block".

Step 2: Setting block

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7. New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 6. Static block "Orson Coming Soon Home 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7. Category Product Block "FEATURES".

Step 1: At frontend, add new block -> choose "Category Product Block".

Step 2: Block setting

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 8: Brand Block.

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting block

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 9. Static block "Orson Women Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 10. Static block "Orson Man Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 11. Static block "Orson Kid Category Home 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 9

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 12. Latest Posts Block "Blog Updates".

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Setting block

SECTION 10

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13. Static block "Orson Money Back Guarantee Home 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 14. Static block "Orson Free Shipping and Return Home 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 15. Static block "Orson Online Support Home 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

5.4 Home Version 4



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Static block "Orson Newsletter Sidebar H4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 5. Static block "Orson Slider Owl Banner".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 7. Static block "Orson Why Choose Us".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 14. Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Setting block


Block 17. Latest Posts Block.

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Setting block

Block 3. Promo banner "Orson Shopping At Home".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 4. Promo banner "Orson Men Fashion home 4".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 6. New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block


Block 8: Static block title "Orson Service Money Back Home 4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 9: Static block title "Orson Service Free Shipping Home 4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 10: Static block title "Orson Service Online Support Home 4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 11: Featured Products Block "Featured".

Step 1: At frontend, add new block -> choose "Featured Products Block ".

Step 2: Setting block


Block 12: Top Rate Products Block "Top Rate".

Step 1: At frontend, add new block -> choose "Top Rate Products Block".

Step 2: Setting block


Block 13: Sale Products Block "On Sale".

Step 1: At frontend, add new block -> choose "Sale Products Block".

Step 2: Setting block


Block 15. Promo banner "Orson Save Your Time Home 4".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 16: Category Product Block "Accessories".

Step 1: At frontend, add new block -> choose "Category Product Block".

Step 2: Setting block


Block 18: Brand Block "Our Clients".

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting block

5.5 Home Version 5



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Category Navigation "Top Categories".

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block


Block 2: Static block title "Orson Trending Menu".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 3. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2: Separator Block.

Step 1: At frontend, add new block -> choose "Separator Block".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Block 5: Static block title "Orson Money Back Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 6: Static block title "Orson Free Shipping Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 7: Static block title "Orson Online Support Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 4

At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 8. New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 9. Promo banner "Orson Home 5 Banner 1".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 10. Promo banner "Orson Home 5 Banner 2".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 11. Promo banner "Orson Home 5 Banner 3".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 12. Promo banner "Orson Home 5 Banner 4".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13. Sale Products Block "On Sale".

Step 1: At frontend, add new block -> choose "Sale Products Block".

Step 2: Setting block


Block 14. Top Rate Products Block "Top Rate".

Step 1: At frontend, add new block -> choose "Top Rate Products Block".

Step 2: Setting block

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 15: Static block title "Orson Service Inline Dedicated".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 16: Static block title "Orson Service Inline Free Returns".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 17: Static block title "Orson Service Inline International".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 18. Brand Block "Our Client".

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting block

5.6 Home Version 6



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 4. Static block "Orson Money Back Box"

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 4. Static block "Orson Free Shipping Box"

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 4. Static block "Orson Online Support Box"

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Block 7. Promo Banner "Orson Banner 1 Home 6"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo


Block 8. Promo Banner "Orson Banner 2 Home 6"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting promo

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 9: Product Tabs Block.

Step 1: At frontend, add new block -> choose "Product Tabs Block".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 10. Static block.

Step 1: At frontend, add new block -> choose "Text & Image ".

Step 2: Setting block

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 11. Static block "Orson Hot Category Woman".

Step 1: At frontend, add new block -> choose "Text & Image ".

Step 2: Setting block

Block 12. Static block "Orson Hot Category Man".

Step 1: At frontend, add new block -> choose "Text & Image ".

Step 2: Setting block

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13. Latest Posts Block

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Block setting

Block 14. Static block "Orson Our Service Home 6".

Step 1: At frontend, add new block -> choose "Text & Image ".

Step 2: Setting block

Block 15. Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Block setting

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 16. Brand Block.

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting promo

5.7 Home Version 7



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Category Navigation "Top Categories".

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block


Block 2: Static block title "Orson Trending Menu".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 3. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 4: Static block title "Orson Money Back Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 5: Static block title "Orson Free Shipping Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 6: Static block title "Orson Online Support Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7. New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 8: Static block title "Orson Hot Category 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 9: Static block title "Orson Hot Category 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 10: Static block title "Orson Hot Category 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 10: Static block title "Orson Hot Category 4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Block 12. Promo banner "Orson Full Banner".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13: Featured Products Block "Featured".

Step 1: At frontend, add new block -> choose "Featured Products Block ".

Step 2: Setting block


Block 14: Sale Products Block "On Sale".

Step 1: At frontend, add new block -> choose "Sale Products Block".

Step 2: Setting block


Block 15: Top Rate Products Block "Top Rate".

Step 1: At frontend, add new block -> choose "Top Rate Products Block".

Step 2: Setting block

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Block 9. Promo banner "Orson Home 5 Banner 1".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 10. Promo banner "Orson Home 5 Banner 2".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 11. Promo banner "Orson Home 5 Banner 3".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 12. Promo banner "Orson Home 5 Banner 4".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 20. Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Block setting

Block 13. Latest Posts Block

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Block setting

5.8 Home Version 8



SECTION 1

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Promo banner "Orson Banner 1 Home 8".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

Block 3. Promo banner "Orson Banner 2 Home 8".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

Block 4. Promo banner "Orson Banner 3 Home 8".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5. Static block "Orson Title New Center Border".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 6. New products Block

Step 1: At frontend, add new block -> choose "New products Block".

Step 2: Block setting

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7: Static block title "Orson Sale Hot Woman".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 8: Static block title "Orson Sale Hot All Item".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 10. Testimonial Block.

Step 1: At frontend, add new block -> choose "Testimonial Block".

Step 2: Block setting

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 10: Static block title "Orson Title From Our Blog".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block


Block 11. Latest Posts Block.

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Block setting

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 12: Static block title "Orson H8 Money Back".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 13: Static block title "Orson h8 Free Shipping".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

Block 14: Static block title "Orson h8 Online Support".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

5.9 Home Version 9



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 1. Revolution Slider

Step 1: At frontend, add new block -> choose "Revolution Slider".

Step 2: Setting block

Block 2. Promo banner "Orson Banner Right Content 1".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block


Block 3. Promo banner "Orson Banner Right Content 2".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 4: Featured Products Block.

Step 1: At frontend, add new block -> choose "Featured Products Block".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5. Static block "Orson Category Slider".

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Block 6. Static block "Orson Join Our Newsletter".

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Title: Title of static block.(Orson Join Our Newsletter)
  • Identifier: Input Identifier of static block.
  • Content:
    <div>{{block type="newsletter/subscribe" name="footer.newsletter" as="footer.newsletter" template="newsletter/subscribe-boxed.phtml"/}}</div>

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 7. Latest Posts Block

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Block setting

  • General:
    • Title: From The Blog
    • Custom Class: post-sidebar owl-top-text
  • Post Config:
    • Categories to show: News.
    • Number of blog post: 3
    • Summary Character Count: 200.
    • View mode: Grid
    • Number of blog post per row: 1.
    • Use slider: Yes
    • Auto Play: Yes

Block 8. Static block "Orson Our Service Home 6".

Step 1: At frontend, add new block -> choose "Text & Image ".

Step 2: Setting block

  • Block col: 12.
  • Custom Class: col-xs-12
  • Title: Title of Static block (Orson Our Service Home 6).
  • Identifier: Input Identifier of static block.
  • Content:
    <div class="block-title"> <h3 class="title"><span>Our Service</span></h3> </div> <ul class="service-list"> <li> <span class="icon color-theme pe-7s-shopbag">&nbsp;</span> <strong>DEDICATED SERVICE</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> <li> <span class="icon color-theme pe-7s-repeat">&nbsp;</span> <strong>FREE RETURNS</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> <li style="border: none;"> <span class="icon color-theme pe-7s-world">&nbsp;</span> <strong>INTERNATIONAL SHIPPING</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> </ul>

Block 9. Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Block setting

  • General:
    • Custom Class: owl-bottom-text testimo-sidebar no-images
    • Title: Reviews
    • Number of Testimonial: 3
    • View mode: Slider

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 10. Brand Block.

Step 1: At frontend, add new block -> choose "Brand Block".

Step 2: Setting promo

  • General:
    • Block col: 12
    • Custom Class: col-xs-12
  • Banner Config:
    • Brands: Choose brand show
    • Number of brands per row: 5
    • Use slider: Yes
    • Number of row: 1
    • Display Navigation: Yes

5.10 Home Version 10



SECTION 1

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: Homepage 8 Slider

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Static block "Orson H10 Title Featured".

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Custom Class:col-xs-12
  • Title: Title of static block.(Orson H10 Title Featured)
  • Identifier : Input Identifier of static block.
  • Content:
    <div class="text-center title-boder"> <div class="title-content"> <h2 class="title">FEATURED PRODUCTS</h2> </div> </div>

Block 3: Featured Products Block.

Step 1: At frontend, add new block -> choose "Featured Products".

Step 2: Setting block

  • Custom Class: owl-bottom-text col-xs-12
  • Number of Products: 6
  • View More: Grid
  • Number of Products per row: 3
  • Use Slider: Yes
  • Number of row: 1
  • Auto play: No
  • Stop autoplay on mouse hover: No
  • Display Navigation: Yes
  • Display Pagination: No

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Static block "Orson H8 Title New Arrivals".

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Custom Class:col-xs-12
  • Title: Title of static block.(Orson H8 Title New Arrivals)
  • Identifier : Input Identifier of static block.
  • Content:
    <div class="text-center title-boder"> <div class="title-content"> <h2 class="title">NEW ARRIVALS</h2> </div> </div>

Block 4: New Products Block.

Step 1: At frontend, add new block -> choose "New Products".

Step 2: Setting block

  • Custom Class: owl-bottom-text col-xs-12
  • Number of Products: 6
  • View More: Grid
  • Number of Products per row: 3
  • Use Slider: Yes
  • Number of row: 1
  • Auto play: No
  • Stop autoplay on mouse hover: No
  • Display Navigation: Yes
  • Display Pagination: No

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5: Static block title "Orson h10 Title Shop By Categories".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson h10 Title Shop By Categories)
  • Identifier: Input identifier static block.
  • Content:
    <div class="text-center title-boder"> <div class="title-content"> <h2 class="title">NEW ARRIVALS</h2> </div> </div>

Block 6: Static block title "Orson H10 Hot Cate 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-4 col-xs-12
  • Title: Input name static block.(Orson H10 Hot Cate 1)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_1.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">Woman Category</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> <li><a href="#">Special Offer</a></li> <li><a href="#">Leather’s Products</a></li> <li><a href="#">Accessories</a></li> </ul> </div> </div>

Block 7: Static block title "Orson H10 Hot Cate 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-4 col-xs-12
  • Title: Input name static block.(Orson H10 Hot Cate 2)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_2.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">MEN CATEGORY</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> <li><a href="#">Special Offer</a></li> <li><a href="#">Leather’s Products</a></li> <li><a href="#">Accessories</a></li> </ul> </div> </div>

Block 8: Static block title "Orson H10 Hot Cate 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-4 col-xs-12
  • Title: Input name static block.(Orson H10 Hot Cate 3)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_3.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">KIDS CATEGORY</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> <li><a href="#">Special Offer</a></li> <li><a href="#">Leather’s Products</a></li> <li><a href="#">Accessories</a></li> </ul> </div> </div>

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 9: Static block title "Orson H8 Money Back".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custon Class: no-padding
  • Title: Input name static block.(Orson H8 Money Back)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block" style="background: #34a853;"> <div class="icon"><span style="color: #fff;" class="pe-7s-piggy">&nbsp;</span></div> <div class="text"> <div><strong style="color: #fff;">MONEY BACK GUARANTEE</strong></div> <span style="font-size: 13px;color: #fff;">100% money back guarantee</span> </div> </div>

Block 10: Static block title "Orson h8 Free Shipping".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custon Class: no-padding
  • Title: Input name static block.(Orson h8 Free Shipping)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block" style="background: #34a853;"> <div class="icon"><span style="color: #fff;" class="pe-7s-cart">&nbsp;</span></div> <div class="text"> <div><strong style="color: #fff;">FREE SHIPPINGS & RETURN</strong></div> <span style="font-size: 13px;color: #fff;">Free shipping on all orders over $99</span> </div> </div>

Block 11: Static block title "Orson h8 Online Support".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custon Class: no-padding
  • Title: Input name static block.(Orson h8 Online Support)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block" style="background: #34a853;"> <div class="icon"><span style="color: #fff;" class="pe-7s-help2">&nbsp;</span></div> <div class="text"> <div><strong style="color: #fff;">ONLINE SUPPORT 24/7</strong></div> <span style="font-size: 13px;color: #fff;">Lorem ipsum dolor sit amet</span> </div> </div>

5.11 Home Version 11



SECTION 1

SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

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: Homepage 11 Slider

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2: Static block title "Orson Service Money Back Boxed 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-6 no-padding-r col-xs-12
  • Title: Input name static block.(Orson Service Money Back Boxed 1)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block boxed"> <div class="icon color-theme"><span class="pe-7s-piggy">&nbsp;</span></div> <div class="text"> <div><strong>MONEY BACK GUARANTEE</strong></div> <span style="font-size: 13px;">100% money back guarantee</span> </div> </div>

Block 3: Static block title "Orson Service Free Shipping Boxed 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-6 no-padding col-xs-12
  • Title: Input name static block.(Orson Service Free Shipping Boxed 2)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block boxed"> <div class="icon"><span class="pe-7s-cart" style="color: #4285f4;">&nbsp;</span></div> <div class="text"> <div><strong>FREE SHIPPINGS & RETURN</strong></div> <span style="font-size: 13px;">Free shipping on all orders over $99</span> </div> </div>

Block 4: Static block title "Orson Service Online Support Boxed 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 4
  • Custom Class: col-sm-12 no-padding-l col-xs-12
  • Title: Input name static block.(Orson Service Online Support Boxed 3)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block boxed"> <div class="icon"><span class="pe-7s-help2" style="color: #33a752;">&nbsp;</span></div> <div class="text"> <div><strong>ONLINE SUPPORT 24/7</strong></div> <span style="font-size: 13px;">Lorem ipsum dolor sit amet</span> </div> </div>

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5. Static block "Orson Newsletter Sidebar H4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12 box
  • Title: Input name static block.(Orson Newsletter Sidebar H4)
  • Identifier: Input identifier static block.(orson_newsletter_sidebar_h4)
  • Content:
    <div class="sidebar-newsletter"> <div class="title-content margin-bottom15"> <h3 class="title">SUBSCRIBE US!</h3> </div> <div class="margin-bottom25"> Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter. </div > <div>{{block type="newsletter/subscribe" name="footer.newsletter" as="footer.newsletter" template="newsletter/subscribe_sidebar2.phtml"/}}</div> </div>

Block 6. Promo banner

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full): 12
    • Custom Class: col-xs-12 col-sm-6
  • Banner Config:
    • Title: Title of promobanner.(Orson Banner You Like Shopping)
    • Background Image: Choose Images of promobanner.
    • Html Content:
      <div class="padding-top20 padding-bottom15" style="line-height: 1;font-size: 36px; font-weight: 900"> You <span style="color: #d73939">Like</span><br/>Shopping? </div> <strong style="color:#a5825a;">You must love ORSON!!</strong>
    • Text Align: Top Center

Block 7. Static block "Orson Why Choose Us Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12 col-sm-6
  • Title: Input name static block.(Orson Why Choose Us Box)
  • Identifier: Input identifier static block.(orson_why_choose_us_box)
  • Content:
    <div class="boxed"> <div class="block-title"> <h3 class="title"><span>Why Choose Us?</span></h3> </div> <ul class="service-list"> <li> <span class="icon color-theme pe-7s-shopbag">&nbsp;</span> <strong>DEDICATED SERVICE</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> <li> <span class="icon color-theme pe-7s-repeat">&nbsp;</span> <strong>FREE RETURNS</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> <li> <span class="icon color-theme pe-7s-world">&nbsp;</span> <strong>INTERNATIONAL SHIPPING</strong><br /> Consult our specialists for help with an order, customization, or design advice ... <a class="color-theme" href="#">Get In Touch</a> </li> </ul> </div>

Block 8. Testimonials Block.

Step 1: At frontend, add new block -> choose "Testimonials Block".

Step 2: Setting block

  • Custom Class: col-xs-12 box testimo-sidebar owl-bottom-text
  • Title: Input name block. (Testimonials)
  • Number of Testimonial: 3
  • View mode: Slider

Block 9. New Products Block "New Arrivals".

Step 1: At frontend, add new block -> choose "New Products Block".

Step 2: Setting block

  • General
    • Block col: 12.
    • Custom Class: owl-top-text col-xs-12.
    • Title: New Arrivals
  • Product Config
    • Number of Products: 6.
    • View mode: Grid.
    • Number of Products per row: 4
    • Use slider: Yes.
    • Number of row: 1.
    • Display Navigation: Yes

Block 10. Promo banner

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-sm-4 col-xs-12 margin-bottom20
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_1)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 11. Promo banner "Banner 12_2".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-sm-4 col-xs-12 margin-bottom20
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_2)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 12. Promo banner "Banner 12_3"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-sm-4 col-xs-12 margin-bottom20
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_3)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 13: Featured Products Block "Featured".

Step 1: At frontend, add new block -> choose "Featured Products Block ".

Step 2: Setting block

  • General
    • Block col: 4.
    • Custom Class: col-xs-12.
    • Title: Featured
  • Product Config
    • Number of Products: 3.
    • View mode: List.

Block 14: Top Rate Products Block "Top Rate".

Step 1: At frontend, add new block -> choose "Top Rate Products Block".

Step 2: Setting block

  • General
    • Block col: 4.
    • Custom Class: col-sm-12 col-xs-12.
    • Title: Top Rated
  • Product Config
    • Number of Products: 3.
    • View mode: List.

Block 15: Sale Products Block "On Sale".

Step 1: At frontend, add new block -> choose "Sale Products Block".

Step 2: Setting block

  • General
    • Block col: 4.
    • Custom Class: col-sm-12 col-xs-12.
    • Title: On Sale
  • Product Config
    • Number of Products: 3.
    • View mode: List.

Block 16. Promo banner "Orson Save Time Banner Black3"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):12
    • Custom Class: col-xs-12
  • Banner Config:
    • Title: Title of promobanner.(BannOrson Save Time Banner Black)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 17: Category Product Block "Accessories".

Step 1: At frontend, add new block -> choose "Category Product Block".

Step 2: Setting block

  • General
    • Block col: 12.
    • Custom Class: owl-top-text col-xs-12.
    • Title: Accessories
  • Category Config
    • Show Products by: Position.
    • Number of Products per Category: 6.
    • Number of Products per row: 4.
    • Layout: Category products tabs slider.
    • Category: Choose category product display.

5.12 Home Version 12



SECTION 1

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

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: Homepage 12 Slider

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Static Block "Orson Hot Category Woman"

Step 1: At frontend, add new block -> choose "Static Block".

Step 2: Setting block

  • Block col (12 to full): 12
  • Custom Class: col-xs-12
  • Custom Class: custom-banner
  • Title: Input title static block(Orson Hot Category Woman).
  • Identifier: Input identifier of static block.
  • Content:
    <div class="hot-cate"> <div class="block-title"><h3 class="title"><span>Woman Category</span></h3><span class="hot">HOT</span></div> <div class="padding-left40 padding-right40"> <div class="row"> <div class="col-sm-6 col-xs-12 col-xs-half"> <img class="img-responsive" src="{{media url="wysiwyg/hot_women_cate.jpg"}}" alt="" /> </div> <div class="col-sm-6 col-xs-12 col-xs-half"> <div class="padding-top15 padding-bottom20"> <div class="margin-bottom15">Aliquam quis tincidunt quam. Aliquam et ligula eu est luctus malesuada. Aliquam varius dui eget.</div> <ul> <li><a href="#">Bags & Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div> </div> </div> </div>

Block 3. Static Block "Orson Hot Category Man"

Step 1: At frontend, add new block -> choose "Static Block".

Step 2: Setting block

  • Block col (12 to full): 12
  • Custom Class: col-xs-12
  • Custom Class: custom-banner
  • Title: Input title static block(Orson Hot Category Man).
  • Identifier: Input identifier of static block.
  • Content:
    <div class="hot-cate"> <div class="block-title"><h3 class="title"><span>Man Category</span></h3><span class="hot">HOT</span></div> <div class="padding-left40 padding-right40"> <div class="row"> <div class="col-sm-6 col-xs-12 col-xs-half"> <img class="img-responsive" src="{{media url="wysiwyg/hot_men_cate.jpg"}}" alt="" /> </div> <div class="col-sm-6 col-xs-12 col-xs-half"> <div class="padding-bottom20 padding-top15"> <div class="margin-bottom15">Aliquam quis tincidunt quam. Aliquam et ligula eu est luctus malesuada. Aliquam varius dui eget.</div> <ul> <li><a href="#">Bags & Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div> </div> </div> </div>

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 4. Promo banner "Banner 12_1".

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-xs-12
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_1)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 5. Promo banner "Banner 12_2"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-xs-12
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_2)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

Block 6. Promo banner "Banner 12_3"

Step 1: At frontend, add new block -> choose "Promo Banner".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full):4
    • Custom Class: col-xs-12
  • Banner Config:
    • Title: Title of promobanner.(Banner 12_3)
    • Background Image: Choose Images of promobanner.
    • Text Align: Left

SECTION 4

Block 7. Featured Products Block "Featured Products"

Step 1: At frontend, add new block -> choose "Featured Products".

Step 2: Setting block

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 8. Featured Brand

Step 1: At frontend, add new block -> choose "Featured Brand".

Step 2: Setting block

  • General Tabs:
    • Block col (12 to full): 12
    • Custom Class: col-xs-12
  • Brands Config:
    • Brands: Select brands to show
    • Number of brands per row: 5
    • Use slider: Yes
    • Number of row: 1
    • Auto play: No
    • Stop autoplay on mouse hover: No
    • Display Navigation: Yes
    • Display Pagination: No

5.13 Home Version 13



SECTION 1

Step 1:At frontend, add new section -> click button edit section.

Step 2:Setting section

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: Homepage 5&7 Slider

Block 2.Category Navigation "Top Categories".

Step 1: At frontend, add new block -> choose "Category Navigation".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Top Categories

Block 3.Static block "Orson Trending Menu".

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input title of static block(Orson Trending Menu).
  • Identifier: Input identifier of static block.
  • Content:
    <div class="menu-home"> <div class="title-menu"><h5 class="title">Trending</h5></div> <ul class="vertical-menu"> <li><a href="#">New Arrivals</a></li> <li><a href="#">Final Sale Off <span class="label-hot">HOT</span></a></li> </ul> </div>

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2:Setting section

Block 4: Static block title "Orson Money Back Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Money Back Box)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block box"> <div class="icon"><span style="color: #33a752" class="pe-7s-piggy">&nbsp;</span></div> <div class="text"> <div><strong>MONEY BACK GUARANTEE</strong></div> <span style="font-size: 13px;">100% money back guarantee</span> </div> </div>

Block 5: Static block title "Orson Free Shipping Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Free Shipping Box)
  • Identifier: Input identifier static block.
  • Content:
    <div class="service-block box"> <div class="icon"><span style="color: #ea4334" class="pe-7s-cart">&nbsp;</span></div> <div class="text"> <div><strong>FREE SHIPPINGS & RETURN</strong></div> <span style="font-size: 13px;">Free shipping on all orders over $99</span> </div> </div>

Block 6: Static block title "Orson Online Support Box".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Block 7. Product Tabs Block.

Step 1: At frontend, add new block -> choose "Product Tabs Block".

Step 2: Setting block

  • General:
    • Custom Class: owl-top-text
    • Title: Input name static block.
    • Identifier: Input identifier static block.
    • Content:
  • Tabs Config:
    • Tabs to show: New products, Featured product, Sale Products
    • New Product Label: Input name tab New products.
    • Featured Product Label: Input name tab Featured products.
    • Sale Product Label: Input name tab Sale products
    • Number of Products: 6
    • Number of Products per row: 4
    • Use slider: Yes
    • Number of row: 1
    • Display Navigation: yes
  • Category Config: Choose product category to show.

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 8. Category Product Block.

Step 1: At frontend, add new block -> choose "Category product block".

Step 2: Setting block

  • General tab
    • Block col: 12
    • Title: Input name category product block (Woman's Dress)
    • Custom class: col-xs-12 owl-top-text
  • Category config tab
    • Show products by: Position
    • Number of products per Category: 6
    • Number of products per row: 4
    • Layout: Choose "Category product tabs slider"
    • Category:Choose category display

Block 9. Latest Posts Block.

Step 1: At frontend, add new block -> choose "Latest Posts Block".

Step 2: Setting block

  • General tab
    • Block col: 12
    • Title: From The Blog
    • Custom class: col-xs-12 owl-top-text
  • Post config tab
    • Categories to show: News
    • Number of blog post: 3
    • Summary Character Count: 200
    • View mode: Grid
    • Number of blog post per row:3
    • Use slider:Yes

Block 10. Testimonial.

Step 1: At frontend, add new block -> choose "Testimonial".

Step 2: Setting block

  • Custom Class: col-sm-6 col-xs-12 testimo-sidebar owl-top-text
  • Title: Testimonials
  • Number of testimonial: 3
  • View more: Choose "Slider"

Block 11. Promo banner "Orson Banner You Like Shopping"

Step 1: At frontend, add new block -> choose "Orson Banner You Like Shopping".

Step 2: Setting block

  • General Tabs:
    • Custom Class:col-xs-12 col-sm-6
  • Banner Config:
    • Title: Title of promobanner.(Orson Banner You Like Shopping)
    • Background Image: Choose Images of promobanner.
    • Html Content:
      <div class="padding-top20 padding-bottom15" style="line-height: 1;font-size: 36px; font-weight: 900"> You <span style="color: #d73939">Like</span><br/>Shopping? </div> <strong style="color:#a5825a;">You must love ORSON!!</strong>
    • Text Align: Top Center.

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 12: Static block title "Orson Hot Category 1".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Hot Category 1)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_1.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">Woman Category</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div>

Block 13: Static block title "Orson Hot Category 2".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Hot Category 2)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_2.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">Man Category</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div>

Block 14: Static block title "Orson Hot Category 3".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Hot Category 3)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_3.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">Kid Category</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div>

Block 15: Static block title "Orson Hot Category 4".

Step 1: At frontend, add new block -> choose "Text & images".

Step 2: Setting block

  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Hot Category 4)
  • Identifier: Input identifier static block.
  • Content:
    <div class="hot-cate"> <img class="img-responsive" src="{{media url="wysiwyg/hot_cate_4.jpg"}}" alt="" /> <div class="center-content"> <div class="title-content margin-bottom20 margin-top10"><h4 class="title">Bag Category</h4></div> </div> <div class="padding-bottom10 padding-left20 padding-right20"> <ul> <li><a href="#">Bags &amp; Accessories</a></li> <li><a href="#">Man’s Products</a></li> <li><a href="#">Woman’s Products</a></li> <li><a href="#">Top Brands</a></li> </ul> </div> </div>

5.14 Home Version 14



SETTING THEME

Header & Footer Go to admin -> Magesolution -> Theme setting [General]

Custom Style Go to admin -> Magesolution -> Theme setting [Add Custom Style]

Input to text area "Custom Style"

.desc-center .products-grid .product-content .product-desc .btn-cart:hover .icon, .desc-center .products-grid .product-content .product-desc .btn-cart:hover { color: #fff;} footer .footer-box .title span::after { background-color:rgba(255, 255, 255, 0.15); } .header-v10 .search-form .form-search,.search-form .form-search .search-select {border-color: #000;} .search-form .form-search .btn { background-color: #000; } .products-grid .product-content .product-top .icon-links button:hover,.widget-latest .item .go-to-detail:hover,.scroll-to-top { color: #fff; } .search-form .form-search .search-select #select-cat-dropdown { border: 1px solid #000;} .button-border-hover-colour-crimson button:hover{ border-color: #7e0016; } .button-hover-colour-crimson button:hover{ background-color: #7e0016; } .contact-box ul li .box-content p { color: #fff; }

Color Setting Go to admin -> Magesolution -> Theme color

SECTION 1

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: Home Slider 14

SECTION 2

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 2. Promo banner Block "Vintage Jacket".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Title: Input name static block.(Orson Home 14 Vintage Jacket)
  • Button: Shop Now
  • Background image: Choose image background.
  • Text align: Left
  • Text Color: text-colour-black
  • Button Color: button-colour-transparent
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-gray
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-gray
  • Button border hover Color: button-border-hover-colour-crimson

Html Content:

<p style="color: #7e0016;"><strong>HOT ITEM!</strong></p> <div style="font-size: 30px; line-height: 0.9; font-weight: 900;"><em>VINTAGE<br/>JACKET</em><br /><br /></div>

Block 3. Promo banner Block "HIGH HEEL".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Title: Input name static block.(Orson Home 14 High Heel)
  • Button: Shop Now
  • Background image: Choose image background.
  • Text align: Left
  • Text Color: text-colour-black
  • Button Color: button-colour-transparent
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-gray
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-gray
  • Button border hover Color: button-border-hover-colour-crimson

Html Content:

<p style="color: #a75720;"><strong>20% OFF</strong></p> <div style="font-size: 30px; line-height: 0.9; font-weight: 900;"><em>HIGH-HEEL<br/><span class="color-theme">ADDICTED</span></em> <br /><br /> </div>

Block 4. Promo banner Block "Mini Handbag".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Title: Input name static block.(Orson Home 14 Mini Handbag)
  • Button: Shop Now
  • Background image: Choose image background.
  • Text align: Left
  • Text Color: text-colour-black
  • Button Color: button-colour-transparent
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-gray
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-gray
  • Button border hover Color: button-border-hover-colour-crimson

Html Content:

<p><strong>FLASH SALE</strong></p> <div style="font-size: 30px; line-height: 0.9; font-weight: 900;"><em><span style="color: #a6571f;">MINI</span><br/>HANDBAG</em> <br /><br /> </div>

SECTION 3

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 5. New Arrivals.

Step 1: At frontend, add new block -> choose "New Product Block".

Step 2: Setting block

  • Block col: 12
  • Title: New Arrivals
  • Custom Class: center-content show-cate desc-center
  • Number of Products: 6
  • View mode: Grid
  • Number of Products per row: 4
  • Use slider: Yes
  • Number of row: 1
  • Display Navigation: Yes

SECTION 4

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Title : SHOP BY CATEGORIES (Only show at desktop)

Step 1: At frontend (Center col of section), add new block -> choose "Text & Image".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 hidden-sm hidden-xs
  • Title: Orson Home 14 Tittle Categories
  • Identifier: orson_home_14_title_categories

Static block code

<div class="center-content"><div class="title-content margin-bottom50 text-colour-white"> <h2 class="title">SHOP BY CATEGORIES</h2> </div></div>

Title : SHOP BY CATEGORIES (Only show at Tablets and Mobile)

Step 1: At frontend (First col of section), add new block -> choose "Text & Image".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 visible-sm visible-xs
  • Title: Orson Home 14 Tittle Categories After
  • Identifier: orson_home_14_title_categories_after

Static block code

<div class="center-content"><div class="title-content margin-bottom50 text-colour-white"> <h2 class="title">SHOP BY CATEGORIES</h2> </div></div>

Block 6. Promo banner Block "ACCESORIES".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 col-sm-6 col-xs-half
  • Title: Input name static block.(Orson Home 14 Accessories)
  • Button: Accessories
  • Background image: Choose image background.
  • Text align: Bottom Center
  • Button Color: button-colour-white
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-black
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-white
  • Button border hover Color: button-border-hover-colour-crimson

Block 7. Promo banner Block "Man Category".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 col-sm-6 col-xs-half
  • Title: Input name static block.(Orson Home 14 Man Category)
  • Button: Man Category
  • Background image: Choose image background.
  • Text align: Bottom Center
  • Button Color: button-colour-white
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-black
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-white
  • Button border hover Color: button-border-hover-colour-crimson

Block 8. Promo banner Block "Woman Category".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12
  • Title: Input name static block.(Orson Home 14 Woman Category)
  • Button: Woman Category
  • Background image: Choose image background.
  • Text align: Bottom Center
  • Button Color: button-colour-white
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-black
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-white
  • Button border hover Color: button-border-hover-colour-crimson

Block 9. Promo banner Block "Handbag".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 col-xs-half
  • Title: Input name static block.(Orson Home 14 Handbag)
  • Button: Handbag
  • Background image: Choose image background.
  • Text align: Bottom Center
  • Button Color: button-colour-white
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-black
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-white
  • Button border hover Color: button-border-hover-colour-crimson

Block 6. Promo banner Block "KIDS".

Step 1: At frontend, add new block -> choose "Promo banner Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: col-xs-12 col-xs-half
  • Title: Input name static block.(Orson Home 14 Kids)
  • Button: Kids
  • Background image: Choose image background.
  • Text align: Bottom Center
  • Button Color: button-colour-white
  • Button hover Color: button-hover-colour-crimson
  • Button text Color: button-text-colour-black
  • Button text hover Color: button-text-hover-colour-white
  • Button border Color: button-border-colour-white
  • Button border hover Color: button-border-hover-colour-crimson

SECTION 5

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 11. Featured.

Step 1: At frontend, add new block -> choose "Featured Product Block".

Step 2: Setting block

  • Block col: 12
  • Title: Featured Products
  • Custom Class: center-content desc-center
  • Number of Products: 6
  • View mode: Grid
  • Number of Products per row: 4
  • Use slider: Yes
  • Number of row: 1
  • Display Navigation: Yes

SECTION 6

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 12. Brand.

Step 1: At frontend, add new block -> choose "Featured Brand Block".

Step 2: Setting block

  • Block col: 12
  • Custom Class: no-border-img
  • Number of brands per row: 5
  • Use slider: Yes
  • Display Navigation: Yes

SECTION 7

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 13. Deals - Sale Off.

Step 1: At frontend, add new block -> choose "Deals Block".

Step 2: Setting block

  • Block col: 12
  • Title: Sale Off
  • Custom Class: center-content show-cate desc-center hidden-add-cart
  • Number of deals per row: 5
  • Use slider: Yes
  • Number of row: 1
  • Display Navigation: Yes

SECTION 8

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 14. Blog Updates.

Step 1: At frontend, add new block -> choose "Latest Post".

Step 2: Setting block

  • Block col: 12
  • Title: Blog Updates
  • Custom Class: center-content background-date
  • Number of blog post: 5
  • Summary Character Count: 150
  • View mode: Grid
  • Number of blog post per row: 3
  • Use slider: Yes
  • Display Navigation: Yes

SECTION 9

Step 1: At frontend, add new section -> click button edit section.

Step 2: Setting section

Block 15. Money Back Guarantee.

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Block col: 4
  • Custom Class: no-padding col-sm-12 col-xs-12
  • Title: Orson home 14 Service Block 1
  • Identifier: orson_home_14_service_block_1

Static block code:

<div class="service-block" style="border-right: 1px solid #ddd;border-top: 1px solid #ddd;"> <div class="icon color-theme"><span class="pe-7s-piggy">&nbsp;</span></div> <div class="text"> <div><strong class="color-theme">MONEY BACK GUARANTEE</strong></div> <span style="font-size: 13px;">100% money back guarantee</span> </div> </div>

Block 16. Free Shipping & Return.

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Block col: 4
  • Custom Class: no-padding col-sm-6 col-xs-12
  • Title: Orson home 14 Service Block 2
  • Identifier: orson_home_14_service_block_2

Static block code:

<div class="service-block" style="border-right: 1px solid #ddd;border-top: 1px solid #ddd;"> <div class="icon color-theme"><span class="pe-7s-cart">&nbsp;</span></div> <div class="text"> <div><strong class="color-theme">FREE SHIPPINGS &amp; RETURN</strong></div> <span style="font-size: 13px;">Free shipping on all orders over $99</span> </div> </div>

Block 17. Online Support 24/7.

Step 1: At frontend, add new block -> choose "Text & Image".

Step 2: Setting block

  • Block col: 4
  • Custom Class: no-padding col-sm-6 col-xs-12
  • Title: Orson home 14 Service Block 3
  • Identifier: orson_home_14_service_block_3

Static block code:

<div class="service-block" style="border-top: 1px solid #ddd;"> <div class="icon color-theme"><span class="pe-7s-help2">&nbsp;</span></div> <div class="text"> <div><strong class="color-theme">ONLINE SUPPORT 24/7</strong></div> <span style="font-size: 13px;">Lorem ipsum dolor sit amet</span> </div> </div>

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



6.1 Custom Class

" margin*, margin-top*, margin-right*, margin-left*, margin-bottom* "

To add margin of element (all, top, right, left, bottom). * value : 5,10,15,20,25,30,35,40

" padding*, padding-top*, padding-right*, padding-left*, padding-bottom* "

To add padding of element (all, top, right, left, bottom). * value : 5,10,15,20,25,30,35,40


You can add custom class on setting block



Class name of setting section



Custom class for Column on setting section (Column config tab)



6.2 Bootstrap Class

"no-padding"

To remove padding of element

"hidden-lg"

Hidden element on Large devices Desktops (≥1200px)

"hidden-md"

Hidden element on Medium devices Desktops (≥992px)

"hidden-sm"

Hidden element on Small devices Tablets (≥768px)

"hidden-xs"

Hidden element on Extra small devices Phones (<768px)

"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

"text-left, text-right, text-center, text-justify"

To setting text-align of element

7. How To

7.1 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

Orson 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.2 Add Custom Style

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

Use custom.css: Use admin panel:


7.3 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.4 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.5 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.6 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.

7.6.1 Setup Facebook Login

Step 1: Go to Facebook Developers

Step 2: Login with your app account or your facebook account and create app.

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.


7.6.2 Setup Google Login

Step 1: Go to Creating a Google Developers Console project and client ID and follow the instructions step by step.

Step 2: Copy your client ID and client secret to setup google





7.6.3 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





7.7 Setup Social Share

To setup social Share at frontend. You can active builder then click to edit icon at top left of content and go to "Social" -> change "Active" to Yes.

Step 1: Go to ShareThis Social Sharing Buttons and click get tools on menu.

Step 2: Choose a Platform -> Website



Step 3: Select a Style



Step 4: Get the Code Click button "Get the Code"



Step 5: Copy code and page to input box.






7.8 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.9 Edit Mobile Content

Homepage Content


From admin panel, go to CMS -> Static BLocks, search static block with Identifier is: orson_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.10 Edit Mobile Menu


For mobile menu, you need to create a megamenu and add it to static block "orson_mobile_main_menu"

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


Custom Setting

7.12 Setting Portfolio

From admin panel, go to Theme Setting -> Portfolio Config Theme :


Portfolio layout: "Grid", Show title "No", Column "3 Column"


Portfolio layout: "Grid", Show title "Yes", Column "4 Column"


Portfolio layout: "Wide", Show title "No", Column "4 Column"