Overview
Gelli Documentation v1.0.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.
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 Gelli 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 Gelli 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/itv6skrh377iget/gelli.sql.zip?dl=0
Media: https://www.dropbox.com/s/7xxjygea6b0r9wv/media.zip?dl=0
After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:
- Go to Cpanel -> My SQL Database
- Create new database
- Create new account of database
- Assign database to user
- Set permissions for user
- Go back to cpanel and go to phpmyadmin
- Click to database you have created
- Click Import
- Click "Browse..." button and choose the database you have downloaded
- Click "Go" button to import database
- After import database, please find and go to database table name core_config_data
- Find 2 records with path are web/unsecure/base_url and web/secure/base_url
- Edit value of them to your site url, eg:
- Open the file: app/etc/local.xml on your host:
- Edit user, password, database name of the database you have created:
- Save this file and upload to your host again
- Unzip media.zip file you have downloaded then you will get an folder name media
- Upload this folder to your magento root folder on your host
- Done, now the full demo data of the theme have installed on your site
3. Magento Panel
3.1 What is MGS Frontend Builder?
Very easy to answer, It is a front-end Magento pages builder. It allows you to build and configure Homepage, Category page, Product page, CMS page, Shopping cart page... at frontend visually without having to log in the admin back-end.
Wow, so what are the advantages of MGS Frontend Builder?
Visually: You can see directly which you want to build and change
Build Web pages by yourself: You can build or configure the pages on your own basing on available layouts and available components
Drag & Drop: Simple for you to drap & drop the blocks on the page
Grid configuration: It allows you to setup width of blocks with Grid standard (12 columns)
Website configuration: It's easy for you to setup all features for your website such as layouts, background, colors, fonts, extensions, catalog... at Frontend
Enable/disable Inline translation: Flexible and convenient to directly translate the site content into target languages at frontend.
and much more...
3.2 Create Panel Account
To use panel, you need create an account for frontend, you can create account from admin panel (Customers -> Manage Customers) or register from frontend
After create frontend account, go to admin panel -> Mage Solutions -> MGS Panel
- Enabled: Yes
- Email Accounts to use panel: Email of frontend account
Save config.
Go to frontend, login frontend account
Now you can see "Active Builder" button at bottom right of page.
3.3 General Page Setting
- Width: Width of the page (1024px, 1200px, 1366px, full width)
- Right to left layout: Yes/No
- Layout: Choose style of page is wide or boxed
- Layout Style: Choose style of page is light or dark
- Sticky menu: Anchor menu by mouse scroll
- Display back to top icon: Visible back to top icon on frontend
- Active Preloader: Active preloader icon on page load
- Custom CSS: If you want to custom css by yourself, please choose "Yes", to custom css, please edit the file: skin/frontend/mgstheme/[theme_name]/css/custom.css
- Enable Google rich snippets: More details
- Enable Popup Newsletter: Enable Newsletter popup when customer visit homepage
Background
- Background Color: background color of website
- Background Image: background image of website
- Background Pattern: background image pattern (apply for boxed mode)
Fonts
- Default font: font for all text
- Heading 1: font for <h1> tag
- Heading 2: font for <h2> tag
- Heading 3: font for <h3> tag
- Heading 4: font for <h4> tag
- Heading 5: font for <h5> tag
- Heading 6: font for <h6> tag
- Price: font for price
- Menu: font for main menu
Extensions
- Enable Megamenu: disable/enable megamenu extension
- Enable Ajax Add to Cart: disable/enable ajax cart extension
- Enable Quick View: disable/enable quick view extension
- Enable Daily Deals: disable/enable daily deals extension
- Enable Onestep Chekout: disable/enable onestep checkout extension
Catalog
- Default Layout for Category Page: default layout for all category page
- Default Layout for Product Page: default layout for all product page
- Number of products per row: from 1 to 8
- Featured Product Attribute: attribute to set featured products
- Best Selling Product Attribute: attribute to set best selling products
- Product Picture Ratio: set ratio for all product picture
- New Label: label for New products
- Sale Label: label for Sale products
- Active Price Slider: active price slider filter on category page
- Active Load more products: replace pager by ajax load more on category page
3.4 Change Page Layout
You can change layout for:
- Category Page
- Catalog Search Page
- Product Page
- My account Page
- Blog Page
3.5 Change Header
At frontend, after active builder, click to setting icon at top left of the header to change header
3.7 Edit Logo and Static Block
- At frontend, after active builder, mouse hover to the logo, you can see edit icon
- Click to edit icon, you can upload logo
- Mouse hover to any static block at header and footer, you can see edit icon
- Click to edit icon, you can edit static block
3.8 Change Category Setting
At frontend, after active builder, go to any category, you can change setting and seo content of the category
3.9 Edit Category Information
- At frontend, after active builder, go to any category
- Mouse hover to image or description of category, you can see edit icon
- Click to edit icon, you can upload image and edit description of the category
3.10 Change Product Setting
At frontend, after active builder, go to any product, you can change setting and seo content of the product
3.11 Edit CMS Page Content
- At frontend, after active builder, go to any cms page
- You can see edit icon at top right of content
- Click to edit icon, you can edit content of the page
3.12 Edit Contact Us Information
- At frontend, after active builder, go to contact us page
- Click edit icon at top left of map to edit map information
- Hover to text content and click edit icon to edit map information
3.14 Manage Left block, Right block
At frontend, after active builder, you can add or remove:
- Static block
- Category Navigation
- Sub Category (just for category page)
- Layered Navigation (just for category page)
- Cart Sidebar
- Compare Sidebar
- Reorder Sidebar
- Poll
- Viewed Products
- Wishlist Sidebar
- Tag Popular
- NewsLetter
- Promo Banner
- Menu
- Featured Products
- Bestselling Products
- New Products
- Top Rate Products
- Sale Products
- Facebook Like box
- Tweeter Feed
From left sidebar and right sidebar of:
- Category page
- Catalog Search page
- Product page
- Cms page
- My account page
3.15 Copy Homepage content
4. Homepage Builder
4.1 Homepage Layout
At frontend, after active builder, you can change homepage layout
Check "Use Builder", choose a layout and click "Update" button to use homepage builder, uncheck "Use Builder" to use default cms page
- You can add, remove, edit setting, change position of a section
- You can add, remove, edit, change column of block
- Drag and drop to sort block on each section
- Change appear animation for each block
- Custom block title, class…
- Change settings for the section, add background, padding top, padding bottom, choose parallax section, custom class
4.2 Manage Sections
Mouse hover to any section, you can see setting icon, click setting icon to edit setting for the section
- Fullwidth: set fullwidth for section or not
- Class name: custom class for section
- Background color: background color for section
- Background Image: background image for section
- Background Repeat: repeat for background image or not
- Parallax: Use parallax or not
- Background Cover: Set full with for background image or not
- Padding top: padding top of section
- Padding bottom: padding bottom of section
- Divide Columns: Divide this section to multiple columns
4.3 Add Block for Section
At home page, for any section, you can see button:
Click to the button to add new block
Multiple block types can be added (22 blocks):
- Static Block
- Revolution Slider
- New products
- Featured Products
- Best selling Products
- Sale Products
- Top Rate Products
- Daily Deals
- Product Tabs
- Category Product
- Single Product
- Featured Brands
- Promo Banner
- Latest Posts
- Separator
- Category Navigation
- Testimonial
- Events
- Profiles
- Megamenu
- Facebook Like Box
- Twitter Feed
Each block will have different setting, but there are some similarities setting:
- Block col (12 to full):
- Custom Class: custom class of the block
- Block Animation: animation effect of the block when page load
- Animation Delay: delay of animation effect
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
- Number of Product: limit number of new product to show
- View mode: Grid/List
- Number of product per row: Number of product visible per row
- Product picture ratio: ratio of the product image
- Use slider: Use slider or not
- Visible load more button: (apply for grid mode)
4.7 Featured Products Block
If you haven't got an attribute to set featured products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step
- Go to Catalog -> Attributes -> Manage Attributes
-
Click Add New Attribute button
- Attribute Code: Your featured products attribute code (eg. featured)
- Catalog Input Type for Store Owner: Choose Yes/No
- Click tab Manage Label/Options
- Fill out your attribute label (eg. Featured Product)
- Click Save Attribute button
- Go to Catalog -> Attribute ->Manage Attribute Sets
- Click your attribute set (eg. Default)
- Drag and drop the attribute to a group
- Click Save Attribute Set button
- Go to Catalog -> Manage Products
- Check products you want to show as featured ones on homepage
- Action: Choose Update Attributes
- Click Submit button
- Find Featured Product attribute and change value to yes as follows:
- Click Save button
At frontend, choose attribute for featured products and update config:
- Number of Product: limit number of new product to show
- View mode: Grid/List
- Number of product per row: Number of product visible per row
- Product picture ratio: ratio of the product image
- Use slider: Use slider or not
- Visible load more button: (apply for grid mode)
4.8 Best Selling Products Block
If you haven't got an attribute to set best selling products, you need to create an attribute and add it to your attribute set, if you have one, please skip this step
To create Best selling product, please follow create featured product, change attribute code to best_selling, change attribute label to Best Selling
At frontend, choose attribute for best selling products and update config:
Add new block
- Number of Product: limit number of new product to show
- View mode: Grid/List
- Number of product per row: Number of product visible per row
- Product picture ratio: ratio of the product image
- Use slider: Use slider or not
- Visible load more button: (apply for grid mode)
4.9 Featured Brands Block
To add brand images, at back-end, go to Mage solutions->Brand->Manage Brands
At frontend, add new block:
4.10 Product Tabs Block
We create five tabs for: new products, featured products, best selling products, sale products, top rate products
At frontend, add new block:
4.11 Daily Deals Block
Set Deals:
- In admin panel, go to Catalog -> Manage Products
- Choose a product and click “Prices” tab
- Set "Special Price" (Special Price < Price)
-
Set "Special Price From Date" and "Special Price To Date":
- If ["Special Price From Date" < now < "Special Price To Date"] then "Status" of deal will be "Running"
- If [now < "Special Price From Date" < "Special Price To Date"] then "Status" of deal will be "Processing"
- Set "Deal Quantity": This is maximum quantity for deal (only works for simple products).
- Save product.
At frontend, add new block:
4.12 Single Product
At frontend, add new block:
4.13 Promo Banner Block
At frontend, add new block:
- Link: Url to redirect when mouse click
- Button: button text, ex: Click here, View details... (Optional)
- Background Image: upload banner image
- Html content: any content (text, html)
- Text align: align of html content
For effect of promo banner when mouse hover, you need to add class for custom class.
There are class list you can use:
- effect-blur
- effect-blur2
- effect-zoomin
- effect-zoomout
- effect-dark
- effect-bright
- effect-apollo
- effect-chico
- effect-roxy
- effect-ming
- effect-jazz
4.14 Latest Post Block
For blog module, we are using AW_Blog extension
- Categories to show: Categories of blog posts, you can select multiple category
- Number of blog post: number of blog post to show
- View mode: Grid/List/Category Tabs
- Use Slider: Use slider or not
4.15 Separator Block
At frontend, add new block:
- Separator Type: type of separator (Border/White space)
- Border type: width of border (Full/Medium/Small), apply for border mode
- Icon: icon to show at middle of the border, apply for border mode
- Text Content: Text to show at middle of the border, apply for border mode
4.16 Category Product Block
At frontend, add new block:
- Number of Products per row: number of products to show for per category
- View Mode: Category List/Category Tabs
- Category: check category to show products
4.17 Testimonial Block
At frontend, add new block:
- Number of Testimonial: number of testimonial to show
- View mode: Slider/List
4.18 Events Block
To add new event, please go to back-end, Mage Solutions -> Events -> Manage Events
At frontend, add new block:
- Number of Events: number of events to show
- Summary Character Count: count of character will show
- Show Begin Time: display time of event
- View mode: Grid/List
- Number of event per row: number of event to show per row
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:
- Page Id: page id of your facebook
- Number of friend face: number of your friend on facebook to display
- Width: width of the box
- Height: height of the box
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:
- Twetter User: username of your twitter account
- Number of tweets: number feeds to show
- Character Count: number of character will show for per feed
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 .
- Active: Yes
- User Name: User Name login on instagram
- Count: Number images to show
- Width: Width of thumbnail images
- Height: Height of thumbnail images
Create block Instagram on Homepage
- Title: Title block.
- Instagram User: username of your instagram account
- Number of images: number images to show
- Client Id: Your app client id
- Width: Width of thumbnail images
- Height: Height of thumbnail images
4.23 Flickr Feed
To setup Flick, at frontend, after active builder click to edit icon at top left of content and go to "Social" -> change "Active" to Yes.
Step 1: Open the below link to get your Flickr API Key. Make sure you are already logged into your Flickr account before going to click on below link..
Step 2: Link will redirect your to Flickr API Key apply page. Click on “Apply for your key online now” link same as below screenshot.
Step 3: Next screen will ask you to Usage of Flickr API Key. Select "APPLY FOR A NON-COMMERCIAL KEY".
Step 4: Input your Flickr App details to form and click on SUBMIT button.
Step 5: After submit form on previous page you will get your Flickr API Key on next screen. Below screenshot showing your new generated Flickr API Key.
Step 6: Setting at frontend .
Create block Flickr on Homepage
- Title: Title block.
- API Key: Your Flickr API key
- User Id: Your Flickr user Id
4.24 Portfolio
Create block Portfolio on Homepage
- Categories to show: Select Categories Portfolio to show item
- Number of portfolio to show: number portfolio to show
- Number of portfolio per row: number portfolio on a row
- Use slider: Show as slider
5. Gelli Home Page Setup
5.1 Home page 1
SECTION 1
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
Block 1. Revolution Slider
Step 1: At frontend, add new block -> choose "Revolution Slider".
Step 2: Setting block
- Block col (12 to full): 12
- Slider: Slider Home 01
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
Block 2. Text & Image Block.
Step 1: Add new block -> choose "Text & images".
Step 2: Setting Static block
- Block col (12 to full): 12
- Custon Class: home-banner
- Title: Home 01 banner
- Identifier: home-01-banner
- Content:
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- class name: new-product
- Background color: #fff
- Background image: choose image from your comnputer
- Padding top: 67
- Padding bottom: 21
Block 3. New Products Block.
Step 1: Add new block -> choose "New Products Block".
Step 2: Setting Static block
- General:
- Block col (12 to full):12
- Title:New Products
- Custom class:new-products
- Product Config:
- Number of row: 1.
- View mode: Gird
- 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
- General tab
- Background image: choose image from your comnputer
- Background Cover: yes
- Padding top: 83
- Padding bottom: 99
Block 4. Text & Image Block.
Step 1: At frontend, add new block -> choose "Text & Image Block".
Step 2: Block setting
- Block col (12 to full): 3
- Custon Class: special-left
- Title: Gelli special product left
- Identifier: special-product-left
- Content:
Block 5. Category Product Block.
Step 1: Add new block -> choose "Category Product Block".
Step 2: Setting Static block
- General:
- Block col (12 to full):9
- Title:Special Products
- Custom class:special-tabs special-cat1
- Product Config:
- Show Products by: position.
- Number of Products per Category: 3
- Number of Products per row: 3
- Layout: Category product simple
- Category: Special cate 01
add extra 4 box 'Product Category Block' similar in this section. Only different choose Category in Product Config
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 100
- Padding bottom: 64
Block 6. Daily Deals Block
Step 1: Add new block -> choose "Deals".
Step 2: Setting section
- General tab
- Block col (12 to full): 12
- Title: Daily Deals.
- Custom class: daily-deals
- Deal config
- Number of deals per row: 3
SECTION 6
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: choose from your computer
- Parallax: yes
Block 7. Latest Posts Block
Step 1: At frontend, add new block -> choose "Lastest posts".
Step 2: Block setting
- General Tab
- Block col (12 to full): 12
- Title: Lastest News
- Custom class: lastest-news lastest-news-colright
- Post config
- Categories to show: sellect category you want show
- Number of blog post: 2
- View mode: list
Block 8. Testimonials Block
Step 1: At frontend, add new block -> choose "Testimonial".
Step 2: Block setting
- Block setting
- Block col (12 to full): 12
- Custom class: testimonials testimonials-colright
- Title: Testimonials
- View mode: Slider
SECTION 7
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 103
- Padding bottom: 50
Block 9. Sale Products Block
Step 1: At frontend, add new block -> choose "Sale Product".
Step 2: Block setting
- General tab
- Block col (12 to full): 6
- Title: Best Selling
- Custom Class: best-selling
- Post Config tab
- Number of Products: 3
- View mode: list
- Product Picture ratio: 1/1 Square
Block 10. New Products Block
Step 1: At frontend, add new block -> choose "New Product".
Step 2: Block setting
- General tab
- Block col (12 to full): 6
- Title: New Arrivals
- Custom Class: new-arrivals
- Post Config tab
- Number of Products: 3
- View mode: list
- Product Picture ratio: 1/1 Square
SECTION 8
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 3
- Padding bottom: 23
Block 11. Brand Block
Step 1: At frontend, add new block -> choose "Featured Brand".
Step 2: Block setting
- General tab
- Block col (12 to full): 12
- Title: Popular brands
- Custom Class: popular-brands
- Brands Config tab
- Brands: Select brands blog To Show
- Number of brands per row: 4
- Use slider: Yes
- Number of row: 1
- Auto play: Yes
- Stop autoplay on mouse hover: No
- Display Navigation: yes
- Display Pagination: No
5.2 Home page 2
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: Slider Home 02
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- class name: home-v2 home-v2-daily-deals
- Padding top: 80
- Padding bottom: 98
Block 2. Daily Deals Block.
Step 1: Add new block -> choose "Deal".
Step 2: Setting Static block
- General tab
- Title: Daily Deals
- Custom Class: daily-deals daily-deals-cycle
- Deal Config tab
- Number of deals per row: 3
SECTION 3
Block 3. Text & Image Block.
Step 1: Add new block -> choose "Text & images".
Step 2: Setting Static block
- Custon Class: hom-banner-v2
- Title: Gelli home 02 banner
- Identifier: gelli-home-02-banner
- Content:
Earrings
Special collection in limited quantity
127 Products
SECTION 4
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- class name: home-v2
- Background image: choose image from your comnputer
- Parallax: yes
- Padding top: 80
- Padding bottom: 22
Block 4. New Products Block.
Step 1: At frontend, add new block -> choose "New Product".
Step 2: Block setting
- General:
- Title:New Products
- Custom class:new-products
- Product Config:
- Number of Products: 12.
- View mode: Grid
- Number of Products per row: 4
- Use slider: yes
- Number of row: 1
- Display Navigation: yes
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- class name: new-products home-v2
- Padding top: 80
- Padding bottom: 20
Block 5. Sale Products Block
Step 1: At frontend, add new block -> choose "Sale Product".
Step 2: Block setting
- General:
<- Block col (12 to full): 12
- Custom Class: new-products
- Product Config:
- Number of Products: 12.
- 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
- General tab
- Fullwidth: yes
- Class name: home-v2
- Padding top: 65
- Padding bottom: 80
Block 6. Text & Image Block
Step 1: At frontend, add new block -> choose "Text & Image".
Step 2: Setting Static block
- Block col (12 to full): 12
- Custom class: information-testerminal
- Title: Gelli Testimonial Categories Banner
- Identifier: testimonial-categories-banner
- content:
Gelli Collection
ted mosby
Gelli Collection
ted mosby
Gelli Collection
ted mosby
Block 7. Testimonials Block.
Step 1: Add new block -> choose "Testimonial".
Step 2: Setting block
- Block col (12 to full): 1
- Title: About Author
- Number of Testimonial: 1
- View mode: List
SECTION 7
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 3
- Padding bottom: 23
Block 8. Brand Block
Step 1: At frontend, add new block -> choose "Featured Brand".
Step 2: Block setting
- General tab
- Block col (12 to full): 12
- Title: Popular brands
- Custom Class: popular-brands
- Brands Config tab
- Brands: Select brands blog To Show
- Number of brands per row: 4
- Use slider: Yes
- Number of row: 1
- Auto play: Yes
- Stop autoplay on mouse hover: No
- Display Navigation: yes
- Display Pagination: No
5.3 Home page 3
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: Slider Home 03
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
Block 2. Text & Image Block.
Step 1: Add new block -> choose "Text & images".
Step 2: Setting Static block
- Block col (12 to full): 12
- Custon Class: home-banner home-v3
- Title: Home 01 banner
- Identifier: home-01-banner
- Content:
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- class name: new-product home-v3
- Background color: #fff
- Background image: choose image from your comnputer
- Padding top: 67
- Padding bottom: 21
Block 3. New Products Block.
Step 1: Add new block -> choose "New Products Block".
Step 2: Setting Static block
- General:
- Block col (12 to full):12
- Title:New Products
- Custom class:new-products
- Product Config:
- Number of row: 1.
- View mode: Gird
- 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
- General tab
- Class name: home-v3
- Background image: choose image from your comnputer
- Background Cover: yes
- Padding top: 83
- Padding bottom: 99
Block 4. Text & Image Block.
Step 1: At frontend, add new block -> choose "Text & Image Block".
Step 2: Block setting
- Block col (12 to full): 3
- Custon Class: special-left
- Title: Gelli special product left
- Identifier: special-product-left
- Content:
Block 5. Category Product Block.
Step 1: Add new block -> choose "Category Product Block".
Step 2: Setting Static block
- General:
- Block col (12 to full):9
- Title:Special Products
- Custom class:special-tabs special-cat1
- Product Config:
- Show Products by: position.
- Number of Products per Category: 3
- Number of Products per row: 3
- Layout: Category product simple
- Category: Special cate 01
add extra 4 box 'Product Category Block' similar in this section. Only different choose Category in Product Config
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: home-v3
- Padding top: 100
- Padding bottom: 64
Block 6. Daily Deals Block
Step 1: Add new block -> choose "Deals".
Step 2: Setting section
- General tab
- Block col (12 to full): 12
- Title: Daily Deals.
- Custom class: daily-deals
- Deal config
- Number of deals per row: 3
SECTION 6
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: choose from your computer
- Parallax: yes
Block 7. Latest Posts Block
Step 1: At frontend, add new block -> choose "Lastest posts".
Step 2: Block setting
- General Tab
- Block col (12 to full): 12
- Title: Lastest News
- Custom class: lastest-news lastest-news-colright
- Post config
- Categories to show: sellect category you want show
- Number of blog post: 2
- View mode: list
Block 8. Testimonials Block
Step 1: At frontend, add new block -> choose "Testimonial".
Step 2: Block setting
- Block setting
- Block col (12 to full): 12
- Custom class: testimonials testimonials-colright
- Title: Testimonials
- View mode: Slider
SECTION 7
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: home-v3
- Padding top: 103
- Padding bottom: 50
Block 9. Sale Products Block
Step 1: At frontend, add new block -> choose "Sale Product".
Step 2: Block setting
- General tab
- Block col (12 to full): 6
- Title: Best Selling
- Custom Class: best-selling
- Post Config tab
- Number of Products: 3
- View mode: list
- Product Picture ratio: 1/1 Square
Block 10. New Products Block
Step 1: At frontend, add new block -> choose "New Product".
Step 2: Block setting
- General tab
- Block col (12 to full): 6
- Title: New Arrivals
- Custom Class: new-arrivals
- Post Config tab
- Number of Products: 3
- View mode: list
- Product Picture ratio: 1/1 Square
SECTION 8
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 3
- Padding bottom: 23
Block 11. Brand Block
Step 1: At frontend, add new block -> choose "Featured Brand".
Step 2: Block setting
- General tab
- Block col (12 to full): 12
- Title: Popular brands
- Custom Class: popular-brands
- Brands Config tab
- Brands: Select brands blog To Show
- Number of brands per row: 4
- Use slider: Yes
- Number of row: 1
- Auto play: Yes
- Stop autoplay on mouse hover: No
- Display Navigation: yes
- Display Pagination: No
5.4 Home page 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
- Block col (12 to full): 12
- Slider: Slider Home 04
If height of menu left higher than height of slider, you can add custom style. From admin, go to Magesolution->Theme Settings ->Add Custom Style -> Custom Style (Text area):
.revolution-slider-container{ position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: home-v4
- Padding bottom: 41
Block 2. Text & Image Block
Step 1: At frontend, add new block -> choose "Text & Image".
Step 2: Setting static block
- Block col (12 to full): 12
- Title: Gelli home 04 banner
- Identifier: gelli-home-04-banner
- Content:
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: home-v4
- Padding top: 40
- Padding bottom: 19
Block 3. New Products Block
Step 1: At frontend, add new block -> choose "New Product".
Step 2: Setting block
- General tab
- Block col (12 to full): 12
- Title: New Arrivals
- Custom Class: new-arrivals
- Product Config tab
- 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
- General tab
- Fullwidth: Yes
- Class name: home-v4 banner-tab-products
- Padding bottom: 80
Block 4. Text & Image Block
Step 1: At frontend, add new block -> choose "Text & Image".
Step 2: Setting static block
- Block col (12 to full): 12
- Title : Gelli special collection
- Identifier: gelli-special-collection
- Content:
Special
Collections
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Block 5. Product Tabs Block
Step 1: At frontend, add new block -> choose "Product Tab".
Step 2: Setting block
- Tabs Config
- Tabs to show: New Products, Sale Products, Top Rate Products
- New Product Label : Best Selling
- Sale Product Label: Featured Product
- Top Rate Product Label: Recent Product
- Number of Products: 9
- Number of Products per row: 3
- Use slider: Yes
- Number of row: 1
- Display Navigation: Yes
- Display Pagination: Yes
- Category Config
- Category: Choose category you want show
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: home-v4
- Padding top: 52
- Padding bottom: 40
Block 6. Daily Deals Block
Step 1: At frontend, add new block -> choose "Deal".
Step 2: Setting block
- General tab
- Title: Daily Deals
- Custom Class: daily-deals
- Deal Config tab
- Number of deals per row: 3
SECTION 6
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 Post".
Step 2: Setting block
- General tab
- Block col (12 to full): 6
- Title: Latest News
- Custom Class: home04-latest-news
- Deal Config tab
- Categories to show: Select category you want show
- Number of blog post: 2
- View mode: Grid
- Number of blog post per row: 2
Block 8. Text & Image Block
Step 1: At frontend, add new block -> choose "Text & Image".
Step 2: Setting static block
- Block col (12 to full): 6
- Custom Class: banner-news-testimonials
- Title: Gelli home 04 couple collection
- Identifier: home04-couple
- Content:
Couple
Collections
5.5 Home page 5
SECTION 1
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: Choose image from your computer
- Parallax: Yes
- Background Cover: Yes
- Padding top: 82
- Padding bottom: 64
Block 1. Product Tabs Block.
Step 1: Add new block -> choose "Product Tab".
Step 2: Setting block
- General tab:
- Custon Class: home05-best-selling best-selling-tabs
- Tabs Config tab:
- Tabs to show: New Products, Sale Products, Top Rate Products
- New Product Label: Best Selling
- Sale Product Label: Featured Product
- Top Rate Product Label: Recent Product
- Number of Products: 12
- Number of Products per row: 4
- Use slider: Yes
- Number of row: 1
- Display Navigation: Yes
- Display Pagination: Yes
- Category Config tab:
- Category: select category you want show
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Class name: box-about-h5
- Background image: Choose image from your computer
- Padding top: 92
Block 2. Text & Image Block.
Step 1: Add new block -> choose "Text & Image".
Step 2: Setting static block
- Block col (12 to full): 8
- Title: Gelli home 05 about
- Identifier: home-05-about-box
- Content:
About Gelli
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Free shipping on all of world
Free shipping on all of world
15 days money back guaratee
Block 3. Daily Deals Block.
Step 1: Add new block -> choose "Deal".
Step 2: Setting block
- General tab:
- Block col (12 to full): 8
- Title: Daily Deals
- Custom Class: daily-deals
- Deal Config tab:
- Number of deals per row: 2
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Fullwidth: Yes
- Padding top: 70
Block 4. Text & Image Block.
Step 1: Add new block -> choose "Text & Image".
Step 2: Setting static block
- Block col (12 to full): 8
- Custom Class: home05-summer-categories
- Title: Gelli H5 summer Box
- Identifier : h5-summer-box
- Content
Block 5. New Products Block.
Step 1: Add new block -> choose "New Product".
Step 2: Setting block
- General tab
- Block col (12 to full): 4
- Custom Class: home05-summer-categories
- Number of Products: 8
- View mode: Grid
- Use slider: Yes
- Number of row: 2
- Display Navigation: Yes
- Product Config tab
- Number of Products: 8
- View mode: Grid
- Use slider: Yes
- Number of row: 2
- Display Navigation: Yes
SECTION 4
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 101
- Padding bottom: 115
Block 6. Latest Posts Block.
Step 1: Add new block -> choose "Latest Post".
Step 2: Setting block
- General
- Block col (12 to full): 8
- Custom Class: latest-news home-05-latest-news latest-news-images
- Title: Latest News
- Post Config
- Categories to show: select category you want show
- Number of blog post: 2
- View mode: Grid
- Number of blog post per row: 2
Block 7. Testimonials Block.
Step 1: Add new block -> choose "Testimonial".
Step 2: Setting block
- Block col (12 to full): 4
- Custom Class: testimonials home-05-testimonials
- Title:Testimonials
- Number of Testimonial: 3
- View mode: Slider
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 101
- Padding bottom: 115
Block 8. Text & Image Block.
Step 1: Add new block -> choose "Text & Image".
Step 2: Setting block
- Custom Class:newsletter-social
- Title: Gelli Home05 Subscribe Newsletter
- Identifier: gelli-home05-subscribe
- Content
{{block type="newsletter/subscribe" title="Subscribe Newsletter" name="left.newsletter" template="newsletter/subscribe5.phtml"}}
5.6 Home page 6
SECTION 1
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Padding top: 101
- Padding bottom: 115
Block 1. Text & Image Block.
Step 1: Add new block -> choose "Text & Image".
Step 2: Setting block
- Custom Class:home06-banner
- Title: Gelli home 06 banner
- Identifier: gelli-banner-h6
- Content
New Season
Gelli 2
Available
SECTION 2
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: choose image from your computer
- Parallax: Yes
- Background Cover: Yes
- Padding top: 82
- Padding bottom: 66
Block 2. Product Tabs Block.
Step 1: Add new block -> choose "Product Tab".
Step 2: Setting block
- General
- Custom Class:best-selling-tabs
- Tabs Config
- Tabs to show:New Products, Sale Products, Top Rate Products
- New Product Label:Best Selling
- Sale Product Label: Featured Product
- Top Rate Product Label: Recent Product
- Number of Products:5
- Number of Products per row:4
- Use slider:Yes
- Display Navigation:Yes
- Category Config
- Category:select category you want show(not select show from all)
SECTION 3
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: choose image from your computer
- Class name: home06-daily-deals
Block 3. Daily Deals Block.
Step 1: Add new block -> choose "Deal".
Step 2: Setting block
- General
- Block col (12 to full):7
- Title:Daily Deals
- Custom Class:daily-deals
- Deal Config
- Number of deals per row:1
- Use slider:Yes
- Number of row:1
- Display Navigation:yes
- Display Pagination:yes
SECTION 4
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
- General tab
- Background image: choose image from your computer
- Class name: recent-products-home-06
- Parallax: Yes
- Padding top: 180
Block 4. New Products Block.
Step 1: Add new block -> choose "New Product".
Step 2: Setting block
- General
- Block col (12 to full):7
- Title:Recent Products
- Custom Class:new-products home06-recent-products
- Deal Config
- Number of Products:4
- View mode:Grid
- Number of Products per row:4
- Display Navigation:yes
- Display Pagination:yes
SECTION 5
Step 1: At frontend, add new section -> click button edit section.
Step 2: Setting section
Block 5. Latest Posts Block.
Step 1: Add new block -> choose "Latest Post".
Step 2: Setting block
- General
- Title:Latest News
- Custom Class:latest-news home06-latest-news latest-news-images
- Deal Config
- Categories to show:select category you want show
- Number of blog post:3
- View mode:Grid
- Number of blog post per row:3
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
"padding-left0"
To remove padding left of element
"padding-right0"
To remove padding right of element
"col-sm-half"
Width = 50% for element on screen small tablet (max sreen width: 767px and min screen width: 600px)
"col-xs-half"
Width = 50% for element on screen big mobile (max sreen width: 767px and min screen width: 480px)
"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
Gelli 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
- Display Mode: Static Block Only
- CMS Block: Choose layout of category landing page (Gelli Landing Category Grid / Gelli Landing Category Lookbook / Gelli Landing Category Mansory)
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:
- From front-end, active builder
- Click to setting icon at top panel
- Under General section, "Custom css" choose "Yes"
- Click "Update" button to save
- Now, you can open the file: skin\frontend\mgstheme\Gelli\css\custom.css on your host to edit.
Use admin panel:
- From back-end, go to Mage Solution -> Theme Settings
-
Expand "Add custom Style" section to add custom style by your self
- Add custom font: you can upload new font to customize your style
- To add custom font, you need enter font-name and upload .ttf file, .eot file, .woff file, and .svg file
- Custom style: you can custom style here
7.3 Setup Multi Languages
To setup multi languages, you can go to System -> Manage Stores
Click Create Store View button
- Store: choose your Main store
- Name: Language
- Code: code for this language.
Press Save button
Go to System -> Configuration -> General
- Choose a store view (language) you have created
- Choose the Country of this store view (language)
- Choose locale of this store view (language)
Press Save Config button
7.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
- Matched Expression: iPhone|iPod|BlackBerry|Palm|Googlebot-Mobile|Mobile|mobile|mobi|Windows Mobile|Safari Mobile|Android|Opera Mini
- Value: Gelli_mobile
7.9 Edit Mobile Content
Homepage Content
From admin panel, go to CMS -> Static BLocks, search static block with Identifier is: Gelli_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 "Gelli_mobile_main_menu"
After create new horizontal megamenu, please go to CMS -> Static BLock, edit static block "Gelli_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
- Label: Label show on menu.
- Link: Url of this
- Position: Position on menu.
- Columns: Column sub menu of this.
- Custom Class: If you want add orther style for this.
- Static Content: Add content to sub menu of this
Custom Setting