© Arrowhitech JSC 2015.

Overview

Gelli 2 Documentation v2.1

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: 2.0+
Author: Magesolution.
Gelli 1 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 Molly Responsive Magento theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

Check if your server is compatible with Magento 2

Operating systems (Linux x86-64)

Linux distributions such as RedHat Enterprise Linux (RHEL), CentOS, Ubuntu, Debian, and so on

Composer (latest stable version)

Composer is required for developers who wish to contribute to the Magento 2 codebase or anyone who wishes to develop Magento extensions

Web servers

Database

MySQL 5.6 (Oracle or Percona)

PHP

PHP documentation: CentOS, Ubuntu

Required PHP extensions:

PHP OPcache

We strongly recommend you verify the PHP OPcache is enabled for performance reasons. The OPcache is enabled in many PHP distributions. To verify if it is installed, see our PHP documentation for CentOS or Ubuntu.

If you must install it separately, see the PHP OPcache documentation.

PHP settings

We recommend particular PHP configuration settings, such as memory_limit, that can avoid common problems when using Magento.

For more information, see our recommendations for CentOS and Ubuntu.

SSL

Mail server

Mail Transfer Agent (MTA) or an SMTP server

Magento can utilize the following technologies:

Optional but recommended:

php_xdebug2.2.0 or later (development environments only; can have an adverse effect on performance)

There is a known issue with xdebug that can affect Magento installations or access to the storefront or Magento Admin after installation.

PHPUnit (as a command-line tool) 4.1 or later

Download Magento 2

You can download magento 2 here: https://www.magentocommerce.com/download. If you want to use sample data please download "Full Release with Sample Data (ZIP with sample data)" package, if not please download "Full Release (ZIP with no sample data)" package

Transfer the Magento archive to your server

To transfer the Magento software archive to your server:

Extract the software on your server

Log in to your Magento server as, or switch to, the Magento file system owner and extract the software package in the web server docroot using one of the following commands:

File format Command to extract
.tar.gz tar zxf <filename>
.zip unzip <filename>
.tar.bz2 tar jxf <filename>

The Magento software extracts to the directory you created. After the file has extracted, either delete the Magento archive or move it to another directory.

Set file system ownership and permissions

This topic discusses how to set read-write permissions for the web server group before you install the Magento software. This is necessary so the Setup Wizard or command line can write files to the Magento file system.

The procedure you use is different, depending on whether you use shared hosting and have one user or if you use a private server and have two users.

If you're using a Magento version earlier than 2.0.6, see Appendix—Magento file system ownership and appendix (legacy) instead.

Running the Setup Wizard

The Setup Wizard is a multi-page wizard that enables you to go back and forward one page at a time. You cannot skip pages, and you must enter all required information on every page before you can proceed to the next page.

In the event of errors, you can run the installer again or you can return to a previous page to fix errors on that page.

Getting started

To install the Magento software using the Setup Wizard:

Finish

When your Magento installation is completed successfully you can start theme installation procedure.

1. Install Theme

1.1 Upload Pack

Using a FTP client to upload content of "Upload" folder to the root folder on your Web Server (usually named public_html).


1.2 Refresh Cache

Go to System -> Cache management. Select all, choose refresh action and submit.


1.3 Enable Module and Deploy theme

1.4 Install Theme

Go to MGS -> Theme Setting

At Install Theme section, you can see a button call "Install Gelli theme", click to this button





1.5 Import Home Page

Go to MGS -> Theme Setting [Import]

Click to "Gelli", you can see all homepages with thumbnail. Click to button to import homepage as you want, if you want to import homepage for special store view, please switch to store view first


Note: If this homepage selected to import has block Featured, you must create attribute featured_product

Step 1: Go to STORES -> Attribute [Product] -> [Add New Attribute]

Step 2: Config attribute & Save



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/0w5e1qysx9yqqb2/gelli.sql.zip?dl=0

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



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

Note: In some case, you will have to run command upgrade:
bin/magento setup:upgrade ( or php bin/magento setup:upgrade if the first command not work )

3. Add Content To Homepage

3.1 Change Header Version

1. Go go admin MGS -> Theme Setting -> Select store view you want to use. 2. Choose Header version.

3.2 Edit Home Page

Go to Back-End -> Menu -> Content -> Pages -> Select CMS page as Homepage -> Import code or edit code



3.3 Add Static Block To Homepage

Import with code

{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="static_block_identifier"}}

3.4 Add owl carousel slider

You can download this video to create revolution slide by yourself
http://www.mediafire.com/download/e91f40fd4ydqxct/owl-slider.mp4
If you choose use owl carousel slider.
First you create a static block with the content as images that you want to use for slider. You should add "class='img-responsive'" as attribute of img tag:
Example: <img class="img-responsive" src="{{media url="wysiwyg/home_3_owl_img_1.jpg"}}" /> Then you go to MGS -> Theme Setting -> Banner Slider section and fill identifier of static block that you just created to "Static Block Identifier" field.
Continue you go to CONTENT -> Pages and add slider to homepage you want by use widget:



3.5 Add testimonial

First you go to admin MGS -> Manage Items ( under Testimonial ) to create testimonial you want.
Then you go to CONTENT -> Pages and edit homepage you want to use then add the code follow:
{{block class="MGS\Testimonial\Block\Testimonial" testimonials_count="3" row="1" custom_class="testimonial-slide" nav="true" dots="true" autoplay="false" template="slide.phtml"}}

3.6 Add promobanners

First you go to admin MGS -> Manage Banners ( under Promo Banners ) to create promobanner you want.
Then you go to CONTENT -> Pages and edit homepage then you can add promobanner to homepage by using widget



3.7 Add brand list

First you go to admin MGS -> Configuration ( under Shop By Brand ) to config for brand.
Then you go to admin MGS -> Manage Brands ( under Shop By Brand ) to create the brand you want.
Continue you go to CONTENT -> Pages and edit homepage then you can add brand list to homepage by using widget



3.8 Add portfolio

First you go to admin MGS -> Portfolio Items ( under Portfolio ) to create portfolio you want.
Continue you go to CONTENT -> Pages and edit homepage then add the code follow:

{{block class="MGS\Portfolio\Block\Portfolio" title="Our Portfolio" portfolio_count="8" per_row="4" custom_class="abc" note_text="We work with Love & Passion!" template="widget.phtml"}}

3.9 Add blog

First you go to admin MGS -> Configuration ( under Blog ) to config setting for blog.
Then you go to admin MGS -> Manage Posts ( under Blog ) to create blogs you want.
Continue you go to CONTENT -> Pages and edit homepage then you can add brand list to homepage by using widget



4. Custom Class

4.1 Margin 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,45,50

Example: margin20, margin-top30, margin-right40, margin-bottom5

4.2 Padding class

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,45,50

Example: padding20, padding-top30, padding-right40, padding-bottom5

4.3 Custom class for product block

Class: no-center



Class: icon-horizontal



Mode hover: center



4.3 Custom class for Subscribe Us

Class: blue-style





4.4 Custom class for Brand

Default: No custom class



Class: border-color theme-hover-color



4.3 Custom class for Owl button (Layout, Position)

Default - No custom class



Class: owl-control-bottom




5. Gelli Home Page Setup

Note: To change version homepage for your store view, you make follow:
Go to admin Stores -> Configuration then make follow below:



Last click "Save Config" button.


5.1 Home Version 1 (comming soon)



5.2 Home Version 2 (comming soon)



5.3 Home Version 3


Config Store

MGS -> Theme Settings [General] MGS -> Theme Settings [Banner Slider]

SECTION 1 - Slider

Step 1: Insert slider with Widget MGS Slider.

<div>{{widget type="MGS\Mpanel\Block\Widget\Slider"}}</div>

Step 2: Create static block Gelli home slider.

Step 3: Config slider for home page MGS-> Theme Setting [Banner Slider].

Static Block Identifier: home-slider

Step 4: Insert widget MGS Slider to this position. (See it at step 1)

SECTION 2 - Home Banner

Create static block

SECTION 3 - New Products

Step 1: Create layout (Bootstrap)

<div class="container"> <div class="row"> // Insert Block New Products here </div> </div>

Step 2: Use widget MGS Product List to insert block New Products

SECTION 4 - Categories Products

Step 1: Create static block

Step 2: Create static block

Step 3: Use widget MGS Product List to insert block categories Products

Step 4: Insert static block and widget MGS

<div class="container"> <div class="row"> <div class="col-md-3 special-left"> //insert static block "gelli_special_left" here </div> <div class="col-md-9 special-tabs special-cat1"> //insert widget MGS cate 1 here </div> <div class="col-md-9 special-tabs special-cat2"> //insert widget MGS cate 2 here </div> <div class="col-md-9 special-tabs special-cat3"> //insert widget MGS cate 3 here </div> <div class="col-md-9 special-tabs special-cat4"> //insert widget MGS cate 4 here </div> <div class="col-md-12"> //insert static block "gelli_nav_cycle" here </div> </div> </div>

SECTION 6 - Daily Deals

Step 3: Use widget MGS Daily deals to insert block Daily deals

Step 2: Insert Widget

<div class="container"> <div class="row"> // Insert Widget MGS Daily deals here </div> </div>

SECTION 7 - Lastest News & Testimonials

Step 1: Insert Widget Lastest News

Step 2: Insert Widget Testimonial

{{block class="MGS\Testimonial\Block\Testimonial" testimonials_count="3" row="1" custom_class="testimonial-slide" nav="true" dots="true" autoplay="false" template="slide.phtml"}}

Step 3: Insert Widget

<div class="container"> <div class="row"> <div class="col-md-12 lastest-news lastest-news-colright"> //insert Lastest News here </div> <div class="col-md-12 testimonials testimonials-colright"> //insert Testimonial here </div> </div> </div>

SECTION 8 - Best Selling & New Arrivals

Step 1: Use widget MGS Product List to insert block Best Selling

Step 2: Use widget MGS Product List to insert block New Arrivals

Step 3: Insert widget

<div class="container"> <div class="row"> <div class="col-md-6 best-selling"> //insert widget Best Selling here </div> <div class="col-md-6 new-arrivals"> //insert widget New Arrivals here </div> </div> </div>

SECTION 9 - Popular Brands

Step 1: Create layout bootstrap

<div class="container"> <div class="row"> <div class="col-md-12 popular-brands"> //Insert widget Brands </div> </div> </div>

Step 2: Insert widget Brands block



5.4 Home Version 4 (comming soon)



5.5 Home Version 5 (comming soon)



5.6 Home Version 6 (comming soon)



5.7 Home Version 7 (NEW)


Config Store

MGS -> Theme Settings [General] MGS -> Theme Settings [Banner Slider]

SECTION 0 - Slider

Step 1: Insert slider with Widget MGS Slider.

<section class="home-slider">{{widget type="MGS\Mpanel\Block\Widget\Slider"}}</section>

Step 2: Create static block Gelli home slider.

Step 3: Config slider for home page MGS-> Theme Setting [Banner Slider].

Static Block Identifier: home_07_slider

Step 4: Insert widget MGS Slider to this position. (See it at step 1)

SECTION 1 - Women box

Step 1: Create static block

Step 2: Create layout (Bootstrap)

<section class="section_1"> <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12"> // Insert Static block "gelli_home_07_woman" here </div> <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12"> // Insert Products collection here </div> </section>

Step 3: Use widget MGS Product List to insert block Product Collection



SECTION 2 - Men box

Step 1: Create static block

Step 2: Create layout (Bootstrap)

<section class="section_2"> <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12"> // Insert Products collection here </div> <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12"> // Insert Static block "gelli_home_07_woman" here </div> </section>

Step 3: Use widget MGS Product List to insert block Product Collection



SECTION 3 - Couple box

Step 1: Create layout (Bootstrap)

<section class="section_3"> <div class="container"> <div class="row"> <div class="box-couple"> <h1>Couple <span>collection</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam ornare tellus, quis llicitudin nunc lobortis in. Duis vel venenatis justo, nec accumsan lacus.</p> // Insert Products collection here </div> </div> </div> </section>

Step 2: Use widget MGS Product List to insert block Product Collection



6. Static Block

6.1 Gelli Footer Logo


6.2 Gelli home slider


6.3 Gelli Footer Main Menu


6.4 Gelli Footer Shopping Info


6.5 Gelli Footer Userful links


6.6 Gelli Footer Polocies


6.7 Gelli Footer Info


6.8 Gelli Footer Payment Icons


6.9 Gelli social header


6.10 Gelli ft newsletter


6.11 Gelli banner cate left


6.12 Gelli product Tags


6.13 Gelli feature products


6.14 Gelli About us service


6.15 Gelli page contact information


7. Custom Style

To add custom style go to MGS -> Theme Setting -> Custom Style, at the 'Add Custom Style', you add below style to textarea field.

8. Theme Settings

8.1 General Setting

Go go admin MGS -> General Setting





Show or hide customer navigation links




8.2 Theme Setting

Go go admin MGS -> Theme Setting



Options for background of pages, you can to use color code or images to set background



Options for fonts of page elements: default font, heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, price, menu

We use google font for them.


Option allow you to add new font and add custom style for your pages (if you know how to use style sheet)

8.3 Color Setting

Go go admin MGS -> Color Setting


Set default color for theme



Set color for header sections



Color for background, text, links... of top links section



Set background for middle header content




Set color for top search elements




Set color for top cart elements




Set color for background, links of menu items




Set color for text, link, buttons of main content



9. How To

9.1 Setup Multi Languages

To setup multi languages, please see example here: http://magento.stackexchange.com/questions/98291/magento-2-different-languages-for-website/98307#98307

9.2 Setup Currency

To setup currency, you can go to Stores -> Configuration, choose Currency Setup tab. Set Allowed Currencies are the currency you want on your store.

Go to Stores -> 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.




9.3 Enable Translate Inline

To enable translate inline for any store view, go to Stores -> Configuration, Click to Advanced tag on left menu, click to Developer

Switch to store view you want to translate at top of page.

At Translate Inline section, choose "Yes" for "Enabled for Storefront"



9.4 Create Store Locator

First you go to admin MGS -> Manage Stores ( under Store Locator ) to create store locator you want.

Then you created successfully stores locator of you, you can follow link: site_domain/storelocator

9.5 Setting Megamenu

Add new Megamenu items

From admin panel, go to Mage MGS -> Megamenu -> Manage Megamenu Items -> Click button "Add Megamenu Item"


Setting


Custom Setting