NINTH Documentation

Overview

NINTH Magento 2 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.

MGS Front-end Builder 2 is fully compatible with Magento Community Edition 2.2.x

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 MGS Front-end Builder Theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

STEP 1: 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

Apache 2.2 or 2.4
In addition, the apache mod_rewrite module must be enabled. mod_rewrite enables the server to perform URL rewriting. For more information, see our Apache documentation
nginx 1.8 (or latest mainline version)

Database

MySQL 5.6 (Oracle or Percona)

PHP

5.6.x
5.5.x, where x is 22 or greater
7.0.2 up to 7.1.0, except for 7.0.5
There is a known PHP 7.0.5 issue that affects our code compiler; to avoid the issue, do not use PHP 7.0.5.

PHP documentation: CentOS, Ubuntu

Required PHP extensions:

curl
gd, ImageMagick 6.3.7 (or later) or both
intl
mbstring
mcrypt
mhash
openssl
PDO/MySQL
SimpleXML
soap
xml
xsl
zip
PHP 7 only:
- json
- iconv

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

A valid security certificate is required for HTTPS.
Self-signed SSL certificates are not supported.
Transport Layer Security (TLS) requirement

PayPal and repo.magento.com both require TLS 1.1 or later
- More information about PayPal
- More information about repo.magento.com

Mail server

Mail Transfer Agent (MTA) or an SMTP server

Magento can utilize the following technologies:

Redis version 3.0 for page caching and session storage (the latter supported by Magento version 2.0.6 and later only)
Varnish version 3.5 or latest stable 4.x version for page caching
memcached latest stable version for session storage with either memcache or memcached PHP extensions (latest stable version)

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

STEP 2: 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

STEP 3: Transfer the Magento archive to your server

To transfer the Magento software archive to your server:

1. Install and configure a file transfer protocol (FTP) or secure copy protocol (SCP) client to transfer the Magento software from your computer to your server.
There are many ways to configure FTP and SCP. Following are a few packages you can use. Magento does not recommend particular software.
- Windows: WinSCP or Filezilla
- Mac OS: CyberDuck or Filezilla
2. Create a connection to your Magento server.
Follow the prompts on your screen or consult the documentation provided with your FTP software for more information.
3. After you log in to your server, browse to locate the Magento CE or EE archive on your local system.
On the remote system, browse to locate the web server docroot directory.

The following figure shows an example.
4.Transfer the archive from your local system to the web server docroot directory.
On some FTP client software, you do this by dragging and dropping.
5. Wait while the transfer completes.
6. Log in to your Magento server, or switch to, the Magento file system owner.
7. Change to the web server docroot or the virtual host directory.
8. Create a subdirectory for the Magento software.
If you set up a virtual host, the subdirectory name must match the name in your virtual host.

For example,
mkdir magento2ce
mkdir magento2ee
You can also use a generic directory name
mkdir magento2
9. Copy the Magento archive to that directory.
For example,
cp /var/www/Magento-CE-2.0.0+Samples.tar.bz2 magento2
10.Continue with the next section.

STEP 4: 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>`

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

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

1. Start a web browser.
2. Enter the following URL in the browser’s address or location bar:
http://<Magento host or IP>/<path to Magento root>/setup
For example, if the Magento server’s IP address is 192.0.2.10 and you installed Magento 2 in the magento2 directory relative to the web server’s docroot, and you did not configure a Virtual Host, enter: http://192.0.2.10/magento2/setup
3. On the initial page, click Agree and Set Up Magento.
4. Continue with the following topics in the order presented to complete the installation.

STEP 7: Finish

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

Install Theme

STEP 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).

You need upload app folder, lib folder and pub folder to your magento root folder

STEP 2: Refresh Cache

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

You can use command line: php bin/magento cache:clean to refresh cache

STEP 3: Enable Module and Deploy theme

Login to your server with your SSH account
Switch to apache user
Change to magento root directory
Run command line: php bin/magento module:enable MGS_Mpanel
Run command line: php bin/magento module:enable MGS_NinthTheme

Module MGS_Mpanel and MGS_NinthTheme is indispensable
Run command line: php bin/magento module:enable MGS_AjaxCart
Run command line: php bin/magento module:enable MGS_Blog
Run command line: php bin/magento module:enable MGS_Brand
Run command line: php bin/magento module:enable MGS_InstantSearch
Run command line: php bin/magento module:enable MGS_Landing
Run command line: php bin/magento module:enable MGS_Lookbook
Run command line: php bin/magento module:enable MGS_Mmegamenu
Run command line: php bin/magento module:enable MGS_Portfolio
Run command line: php bin/magento module:enable MGS_Promobanners
Run command line: php bin/magento module:enable MGS_Protabs
Run command line: php bin/magento module:enable MGS_QuickView
Run command line: php bin/magento module:enable MGS_Social
Run command line: php bin/magento module:enable MGS_StoreLocator
Run command line: php bin/magento module:enable MGS_Testimonial
Run command line: php bin/magento setup:upgrade
Run command line: php bin/magento setup:static-content:deploy

Deploy static view files document

STEP 4: Install Theme

Go to MGS -> [MGS Theme] Theme Settings, you can see Install Theme panel. Click Install Ninth theme button to applied Ninth theme for front-end and insert sample data (Default config, Static block, Cms page).

Until Backend returns success message, Go to System -> Cache management. Select all, choose refresh action and submit. Ninth theme has been applied for Front-end.

STEP 5: Import Home

Go to MGS -> [MGS Theme] Theme Settings, you can see Import panel.

Click Ninth text, you can see all homepages with thumbnail and a button import. Click button to import this homepage, if you want to import homepage for special store view, please switch to store view first

Until Backend returns success message, Go to System -> Cache management. Select all, choose refresh action and submit. This homepage has been created.

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/9l8dwwvy1p7hpan/database_ninth_magento_2.2.2.sql.zip?dl=0

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

Note: Database for Magento 2.2+

Note: if you install theme with full demo data, leave blank for table_prefix field in app/etc/env.php file

Admin account: user: admin; password: admin999

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/env.php on your host:
Edit user, password, database name of the database you have created:
Save this file and upload to your host again
Please connect ssh, navigate to magento root on your server then upgrade, remove the content of var folder and deploy again, run some commands:
php bin/magento setup:upgrade
rm -rf var/*
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
Done, now the full demo data of the theme have installed on your site

General Settings

Width: We theme provides 1024px, 1170px, 1366px and full width max width mode, you can choose one as you prefer. You can apply this option to any home versions.
Layout: You can choose boxed or wide layout of entire store.
Header: Change layout header
Footer: Change layout footer
Sticky menu: Enabled or Disabled
Display back to top icon: Enabled or Disabled

Background Settings

In Backend panel, go to MGS -> Theme Setting -> [Background]

This config to help you change background color, background image, background size, background position for <body> tag.

Custom Style

In Backend, go to MGS -> Theme Setting -> [Custom Style] -> Custom Style

You can add your own custom style for your site.

Change Color Content

From Admin panel, go to MGS → Color Setting → [General]

On Ninth theme, we use blue #ff0000 for default color. You can change it with option "Theme color"

Font Settings

In Backend, go to MGS -> Theme Setting -> [Font]

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

We use google font for them

You can add font for special class or id if you want. Input css selectors to textarea Element use font and choose font use for it.

If you want add new google font for options. You can follow guide:

Open file /app/code/MGS/Mpanel/Helper/Data.php on your web folder.

Find function getFonts(). This function look like:

Add new row follow default font.

 ['css-name' => 'Font_Css_Name', 'font-name' => __('Font Name')]

To get Font_Css_Name, go to https://fonts.google.com/. Choose the font you want add. This sample with font Supermercado One

Google Font returns the code <link href="https://fonts.googleapis.com/css?family=Supermercado+One" rel="stylesheet">

Look at to the link, you can see text family=Sansita. Font_Css_Name is text after character (=)

Code to add Supermercado One font:

 ['css-name' => 'Supermercado+One', 'font-name' => __('Supermercado One')]

Custom Your Font

Declare your font

Way 1: Add your font file

If you have a font. You can add TTF File, EOT File, WOFF File, SVG File to declare new font for your site.

In Backend, go to MGS -> Theme Setting -> [Custom Style] -> Custom Font Family

Declare Font Name and browse and save config to upload file.

Way 2: Add font with code css

In Backend, go to MGS -> Theme Setting -> [Custom Style] -> Custom Style

Write @font-face Rule on textarea and save config.

Declare font for element

In Backend, go to MGS -> Theme Setting -> [Custom Style] -> Custom Style

Add css for element with code:

Default Font: body { font-family: "YourFontName" !important; }
Heading 1: h1 { font-family: "YourFontName" !important; }
Heading 2: h2 { font-family: "YourFontName" !important; }
Heading 3: h3 { font-family: "YourFontName" !important; }
Heading 4: h4 { font-family: "YourFontName" !important; }
Heading 5: h5 { font-family: "YourFontName" !important; }
Heading 6: h6 { font-family: "YourFontName" !important; }
Menu heading: .navigation li.level0 a.level-top, .navigation ul.container .level0 > a { font-family: "YourFontName" !important; }
Price: .price, .price-box .price { font-family: "YourFontName" !important; }
Button: .btn { font-family: "YourFontName" !important; }

Create New Header Version

Create & Upload new header thumbnail

To add new version header, create new file header_(next-number-version).png on path pub/media/mgs/ninth/headers or /pub/media/mgs/your_theme_name/headers if you use child theme.

Modify header template file

Open & modidy /app/design/frontend/Mgs/ninth/Magento_Theme/templates/html/header.phtml

If you have create child theme for your customize theme. First step, you must copy header template file /app/design/frontend/Mgs/ninth/Magento_Theme/templates/html/header.phtml to the same directory with "ninth".

New file:

/app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/header.phtml

You can copy code form old version header and edit it.

Contents can get on header and this code

Welcome text: <span data-bind="text: customer().fullname ? $t('Welcome, %1!').replace('%1', customer().fullname) : '<?php echo $block->escapeHtml($block->getWelcome()) ?>'"><?php echo $block->escapeHtml($block->getWelcome()) ?></span>
Top Link: <?php echo $block->getChildHtml('top.links') ?>
Store Language: <?php echo $block->getChildHtml('store_language') ?>
Currency: <?php echo $block->getChildHtml('currency') ?>
Top Search: <?php echo $block->getChildHtml('top.search') ?>
Logo: <?php echo $block->getChildHtml('logo') ?>
Static Block: <?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('static_block_identifier')->toHtml() ?>
Mini cart: <?php echo $block->getChildHtml('minicart') ?>
MGS Megamenu: <?php echo $block->getChildHtml('megamenu') ?>
Default menu of Magento: <?php echo $block->getChildHtml('catalog.topnav') ?>

Change Header Version

Via Front-end Builder

After Builder is active. On top left corner of Header, you can see a green config button. Click this button to choose header version.

On popup Edit Header choose version header you want. Click Submit button to change header

Via Backend

On the Admin sidebar, tap MGS. Then under MGS Theme, choose Theme Settings.

Expand the Header section.

Set Header according to your preference.

Configuration Header

On the Admin sidebar, tap MGS. Then under MGS Theme, choose Theme Settings.

Expand the Header section.

Absolute Header on Homepage:
Sticky menu: Enabe or disable sticky menu.
Logo Sticky: If you want show other logo for sticky menu, upload new logo here.
Width: Config logo sticky width
Height: Config logo sticky height

Change Color Header

From Admin panel, go to MGS → Color Setting → [Header]

To show setting color for header, you can change "Use Custom" to Yes first

You can setting color for:

Top Links Section (Background, border color text color, link color, link hover color)
Middle Section (Background color, link color, link hover color, text color)
Top Cart Section (Icon color, number (count item) color)
Menu Section (Background color, link color)

Create New Footer Version

Create & Upload new footer thumbnail

To add new version footer, create new file footer_(next-number-version).png on path pub/media/mgs/ninth/footers or /pub/media/mgs/your_theme_name/footers if you use child theme.

Modify footer template file

Open & modidy /app/design/frontend/Mgs/ninth/Magento_Theme/templates/html/footer.phtml

If you have create child theme for your customize theme. First step, you must copy footer template file /app/design/frontend/Mgs/ninth/Magento_Theme/templates/html/footer.phtml to the same directory with "ninth".

New file:

/app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/footer.phtml

You can copy code form old version footer and edit it.

Contents can get on footer and this code

Default Magento Copyright text: <?php echo $block->getCopyright() ?>
Copyright text: <?php echo $themeHelper->getStoreConfig('mgstheme/general/footer_copyright') ?>
Static Block: <?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('static_block_identifier')->toHtml() ?>

Change Footer Version

Via Front-end Builder

After Builder is active. On top left corner of Footer, you can see a green config button. Click this button to choose footer version.

On popup Edit Footer choose version footer you want. Click Submit button to change footer

Via Backend

On the Admin sidebar, tap MGS. Then under MGS Theme, choose Theme Settings.

Expand the Footer section.

Set Footer according to your preference.

Change Color Footer

From Admin panel, go to MGS → Color Setting → [Footer]

To show setting color for Footer, you can change "Use Custom" to Yes first

You can setting color for:

Top Section (Background color, text color, border color, link color, heading color, link hover color)
Middle Section (Background color, text color, border color, link color, heading color, link hover color)
Bottom Section (Background color, text color, border color, link color, heading color, link hover color)

Configuration Page Title

Change Default background

On the Admin sidebar, tap MGS. Then under MGS Theme, choose General Settings.

Expand the Page Title section.

Background Type: You can config background to image or color
Color: Input your color code
Image: Upload your image

Change background for custom category

On the Admin sidebar, tap CATALOG. Choose Categories.

On the categories list, choose a category to edit

Expand the Page Title section.

Upload your image and click Save button.

Change background for custom product

Create Product Attribute

On the Admin sidebar, tap STORES.Then under Attributes Choose Product.

Tap Add New Attribute

Catalog Input Type for Store Owner: Media Image (Imposition)

Attribute Code: title_page_image (Imposition)

Save Attribute

Run command line: php bin/magento indexer:reindex
Manage Attribute Set

On the Admin sidebar, tap STORES.Then under Attributes Choose Attribute Set.

Edit your attribute set

Save Attribute Set
Edit Product

On the Admin sidebar, tap CATALOG. Choose Products.

Edit your product

Expand the Images And Videos section.

Upload your image, click image to config it. Set Role to Title Page Background and check Hide from Product page

Save Product

Change background for custom cms page

On the Admin sidebar, tap CONTENT. Then under Elements Choose Pages.

Edit your page

Expand the Content section.

Upload your image for Content Heading Background and Save Page

Setting Product Layout

Ninth theme support 5 option layout for product detail page: Product standard layout,Product gallery thumbnail,Product with sticky info,Product with sticky info 2,Product with vertical thumbnail

Set default layout template for all product

From Admin panel, go to MGS → General Settings → [Product Details]

Change value of field Default Templave For Product Page to set default layout template for all product

Set layout for only one product

From Admin panel, go to PRODUCTS → Catalog → [Edit Product]

On Edit Product page, go to Design section, you can see Template layout option. Change value this option to config layout product detail

Config Product Detail Page

When Builder is active. Go to any product detail page, you can see some config on top panel of page. This config is for this page only.

You can config:

Layout: Config layout for this page (1 column, 2 columns left, 2 columns right, 3 columns)

Click Submit button. After page reload, clean Cache on your site.

Image Product 360

First, You must enable 360 Degrees Image View attribute for product. From Admin panel, go to PRODUCTS → Catalog → [Edit Product]

On Edit Product page, change 360 Degrees Image View field to Yes

Look at the url of current page, you can see id of this product. Remember this.

Save product.

On next step, you must create directories and upload image. Go to folder pub/media/wysiwyg/, create folder 360, if 360 folder exists, create sub folder with name is product id. With example, folder name is 27.

Finaly, Upload image for product to product id folder. 360 Degrees Image are created by multiple images continuity of product. You must sort and rename images with numbered one by one.

You can use cPanel or any tool to create directories and upload image. Or you can use Wysiwyg Editor(on edit or create static block, cms page...) to make it and upload image.

Catalog Settings

Go to Admin -> MGS -> General Settings [Catalog]

With Catalog Settings, you can config:

Default Page Layout For Category Page: Config default layout (1 column, 2 columns left, 2 columns right, 3 columns) for category page.
Number Of Product Per Row: Config (default value) number product per row for product grid mode.
Max Width of Product Images (Default): Max with of product image on product item (on category page, product widget, product block).
Max Width of Product Images (Product View Page): Config max width for base image product on product detail page, quick view
Product Picture ratio
New Label: for product item (on category page, product widget, product block).
Sale Label: for product item (on category page, product widget, product block).
Enable discount price (Replace Sale Label)
Active Preload
Enable Toggle Filter:
Hide Add to Wishlist button: for product item (on category page, product widget, product block).
Hide Add to Compare button: for product item (on category page, product widget, product block).

Catalog Settings

Go to Admin -> MGS -> General Settings [Catalog]

With Catalog Settings, you can config:

Default Page Layout For Category Page: Config default layout (1 column, 2 columns left, 2 columns right, 3 columns) for category page.
Number Of Product Per Row: Config (default value) number product per row for product grid mode.
Max Width of Product Images (Default): Max with of product image on product item (on category page, product widget, product block).
Max Width of Product Images (Product View Page): Config max width for base image product on product detail page, quick view
Product Picture ratio
New Label: for product item (on category page, product widget, product block).
Sale Label: for product item (on category page, product widget, product block).
Enable discount price (Replace Sale Label)
Active Preload
Enable Toggle Filter:
Hide Add to Wishlist button: for product item (on category page, product widget, product block).
Hide Add to Compare button: for product item (on category page, product widget, product block).

Category Landing Page

From Admin panel, go to PRODUCTS → Catalog → Categories → [Edit Categories]

On Edit Categoy page, scroll to Landing section, change Is Landing field to Yes

Choose Landing Template

Go to sub categories, scroll to Landing section. Upload image thumbnail show on landing page on field Category Thumbnail Image

Customer Navigation Links

Custom Navigation Links on My account page

On the Admin sidebar, tap MGS. Then under MGS Theme, choose General Settings.

Expand the Customer Navigation Links section.

Contact Page

Custom Navigation Links on My account page

On the Admin sidebar, tap MGS. Then under MGS Theme, choose General Settings.

Expand the Customer Navigation Links section.

Contact Map

Config Contact Map

On the Admin sidebar, tap MGS. Then under MGS Theme, choose General Settings.

Expand the Google Map on Contact page section.

Display Google Map: Change this value to Yes to show map on contact page
Google API Key: Input your google map api key

Go to https://developers.google.com/maps/documentation/javascript/get-api-key to get API key.
Address: Input your address
Html: Short content show when click pin
Pin image: Upload pin image for map

Contact Static Block

If this block have not exists. You need go to admin and create static block first.

Block Identifier: contact_page_custom_block. This is required
To edit content of block, you can edit this block on backend. Or use Front-end Builder to edit it.

Enable Right To Left theme

From Admin panel, go to CONTENT → Configuration

Click Edit link to config this store view.

Choose MGS Ninth Right To Left and save to Applied right to left theme for this store view or your website

Active MGS Front-end Builder

On the Admin sidebar, tap MGS. Then under MGS Theme, choose General Settings.

Expand the General section.

Set Active Front-end Builder to Yes

Click Save Config button.

Create Panel Account

Create Customer Account

At Front-end, go to link yoursite.com/customer/account/create/.

Create an Customer Account.

Note: If you can't create an account, please try to connect ssh and run command php bin/magento indexer:reindex to reindex data.
Set Customer to Panel Account

In Backend, go to Customers → All Customers. Find and edit account.

On Edit Customer Page, choose tab Account Information. Find field Is Front-end Builder Account. Change value to Yes

Click Save Customer button.

How Builder Work?

MGS Front-end builder help you build content for cms page.

Create CMS Page

If you want edit exists cms page. Please skip this step.

On the Admin sidebar, tap CONTENT. Then under Elements, choose Pages.

Click Add New Page button.

Fill out the page data (Add anything for content), click Save Page
Start Buider for Cms Page

On Front-end, login with builder account.

After login, you can see button Active Builder on top panel. Click this button to activate Front-end Builder.

Go to cms page and build your page.

Create New Section

The section defines blocks in home page content.

Click Add New Section button to create a new section., After ajax load, you can see a section with edit group button for it.

Arrow up button: Move (position) this section up 1 level
Arrow down button: Move(position) this section down 1 level
Tool button: Show popup config this section
Remove button: Remove this section. (If section has child blocks. Remove section is remove all child blocks).

Config Section

After click config button of section. A popup to config button show:

General Tab

Full width: Config width of section to 100%;
Class name: Add custom class for section
Background color: Config background color for section. You can input Hexadecimal color values to field.
Background image: Config background image for section. You can upload an image from your computer.

If you add background image. On next time, you can see checkbox Remove background to remove background image.
Background repeat: If you use background image and you want repeat image for background, enable it. This same background-repeat: repeat; on style css.
Parallax: If you use background image and you want fixed background, enable it. This same background-attachment: fixed; on style css.
Background Cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. This same background-size: cover; on style css.
Padding top: Input number for field. This option to generate space top with your value pixel for section.
Padding bottom: Input number for field. This option to generate space bottom with your value pixel for section.

Column Config

MGS Front-end Builder use bootstrap grid

On column config, you can see options layout for section (border red). This config for desktop col. (col-md-).
Example: If you choose col 6,6. This section will generate 2 div with class col-md-6

After choose an option layout (border red). You can see sub config to set col for Tablet (col-sm-) and Mobile (col-xs-). (Border blue).

Create New Block

on home page, for any section, you can see button:

Click to this button to add new block

Multiple block types can be added (19 blocks):

Text content & Images
Owl Carousel Slider
New products
Products by Attribute
Sale Products
Top Rate Products
Daily Deals
Product Tabs
Category Product
Single Product
Featured Brands
Promo Banner
Latest Posts
Testimonial
Portfolio
Megamenu
Facebook Like Box
Twitter Feed
Lookbook
Lookbook Slider
Snapppt Shop

Each block will have different setting, but there are some similarities setting: (On General Tab)

Title: Title of block.
Block col (12 to full): Set width (%) for block on desktop screen.
Custom class: Add class for block. You can use class bootstrap to set width block on Tablet screen (col-sm-*) and Mobile screen (col-xs-*).
Additional content: Sub title of block.
Block Animation: animation effect of the block when page load
Animation Delay: delay of animation effect

After configuring & saving block. On this block on home page, you can see group button to edit this block.

Arrows button: You can drag & drop block to change position. But block can't move out section or section col.
Pencil button: Reconfig block.
Columns button: Shortcuts to change Block col
Trash button: Remove block.

Block Text content & Images

On home page, after creating new section, you can see button Add new block. Click this button, you can see popup list blocks.

On popup list blocks, click "Text content & Images" item.

Config Block

Content Tab

On content tab. You can use editor to create content.

Click Show / Hide Editor button to hide editor and edit content with html & short code

Images Tab

To up load new image, click Upload new Image. button

Click Choose File to Upload button, choose an image from your computer.

Click Upload button and wait ajax load.

After image uploaded, you can see new row on table image.

Code: You can copy this code and back to Content tab to insert image.
Remove: If you want remove image. Tick to checkbox on image row. After click Submit button, image was removed.

Owl Carousel Slider

On Home page builder, click Add New Block button.

On popup list blocks, click "Owl Carousel Slider" button.

Config Block

Images Tab

Upload New Image

Click Upload new Image button.

Click Choose File to Upload button. Select an image from your computer.

Click Upload button.

After image uploaded, you can config link for image or remove it. View screenshot.

Tick Add to Slider for images you want add to this slider

Slider Config Tab

Effect: Effect change items slider.
Auto play
Auto play speed (If you config Auto play is Yes)
Stop autoplay on mouse hover
Display navigation
Display pagination
Loop
Right to Left

Click SUBMIT button to save config and create owl slider.

Video Banner Slider

On Home page builder, click Add New Block button.

On popup list blocks, click "Text content & Images" button.

Step 1: Create element html:

Step 2: Call the plugin function and your carousel is ready.

Banner Video Demo Code:

<div class="video-banner"> <div id="video-background"></div> <div class="text" style="background-image: url('pub/media/wysiwyg/panel/bg_video_replace.jpg');"> <h5 class="lh__1 sub-title"><em class="text-colour-white">Spring – Summer 2016</em></h5> <h2 class="margin-top20 margin-bottom20 lh__1" style="font-size: 60px;"><span class="text-colour-white">FLASH SALE OFF 70%</span></h2> <p class="text-center"><a class="btn btn-default2" href="#">Shop Now</a></p> </div> </div> <script type="text/javascript" xml="space"> require([ 'jquery', 'mgs/bgvideo' ], function ($) { $(document).ready(function () { $('#video-background').YTPlayer({ fitToBackground: true, videoId: 'your_video_id', pauseOnScroll: false }); }); }); </script>

Config New Product

In backend, go to PRODUCTS → Catalog. Edit product you want set is new product.

On product edit page. Find field Set Product as New From. Choose date for this field. Product as New from this date.

On next field To. You can set day to product end new.

Click Save button to save config.

Add New Product Block

On Home page builder, click Add New Block button.

On popup list blocks, click "New Products" button.

Config Block

Product Config Tab

Number of product to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use View mode as List or Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by selecting categories.

If you want show product with tab. Change Use Category Tabs to Yes

Demo New Product With Tab

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Create (Yes/No) Attribute Product

In backend, go to STORES → [Attributes] Product. Click Add New Attribute button.

Complete the Basic Properties

The Basic Properties is required for an product attribute.

Insert the Default Label to describe the attribute.
In the Catalog Input Type for Store Owner, choose Yes/No of the input from a list.
Choose Yes for the Value Required to ask customers to select the options before purchasing.

Complete the Advanced Properties (Optional)

Insert the Attribute Code that is less than 30 characters and excluded spaces.
The Scope includes Store View, Website, and Global.You will choose one of three places in your store system where the appearance of attribute is approved.
Apply the Unique Value if you not want to share it with other products.

Insert the Field Label

Open the Manage Title section.
Insert the Title that is shown for the field label. In case of multiple languages supported on your store, insert the translation of the title for each view.

Complete the Storefront Properties

Choose Yes for the Use in Search to be ready for searching the attribute.
Allow comparing the product attributes in Product Compare if you choose Yes in the Comparable on Storefront field.
Choose Yes in the Use for Promo Rule Conditions field to apply the product attribute for the price rules.
To make the attribute visible in catalog page listing, choose Yes in the Visible on Catalog Pages on Storefront field.
If Product Listing is supported at your store, the attribute can be appeared and used as sort parameter. Configuring that from the Used in Product Listing and Used for Sorting in Product Listing field.
Save Attribute to finish all.

Reindex Data

Login to your server with your SSH account
Switch to apache user
Change to magento root directory
Run command line: php bin/magento indexer:reindex
Run command line: php bin/magento cache:clean (if your site enable cache).

Product by Attribute Block

On Home page builder, click Add New Block button.

On popup list blocks, click "New Products" item.

Config Block

Product Config Tab

Attribute: Choose Attribute product to filter
Number of product to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use View mode as List or Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

If you want show product with tab. Change Use Category Tabs to Yes

Demo Block Product With Tab

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Config Product to Sale

In backend, go to PRODUCTS → Catalog. Edit product you want set is new product.

In the basic settings panel, Click Advanced Pricing link

Advanced Pricing panel:

Enter the number of the Special Price.
Assign the active time including Special Price From Date and Special Price To Date. You can type manually or click on Calendar icon to choose the relevant date.
Click Done button to close panel.

Click Save button to save product.

Sale Products Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Sale Products" item.

Config Block

Product Config Tab

Number of product to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use View mode as List or Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

If you want show product with tab. Change Use Category Tabs to Yes

Demo Product With Tab

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Top Rate Products Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Top Rate Products" item.

Config Block

Product Config Tab

Number of product to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use View mode as List or Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

If you want show product with tab. Change Use Category Tabs to Yes

Demo Product With Tab

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Category Products Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Category Products" item.

Config Block

Product Config Tab

Number of product to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use View mode as List or Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

If you want show product with tab. Change Use Category Tabs to Yes

Demo Product With Tab

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Config Deal Product

In backend, go to PRODUCTS → Catalog. Edit product you want set is new product.

In the basic settings panel, Click Advanced Pricing.

Advanced Pricing panel:

Enter the number of the Special Price.
You must assign the active time including Special Price From Date and Special Price To Date. You can type manually or click on Calendar icon to choose the relevant date.
Click Done button to close panel.

Click Save button to save product.

Deals Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Deals" item.

Config Block

Product Config Tab

Number of deals to display
Item per row
View mode
- Grid
- List
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Product Tabs Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Product Tabs" item.

Config Block

Tab Config Tab

New Products, Sale Products, Top Rate Products : Enable and Config Title & Position
Click Add new tab button to add new tab.
- Choose an attribute to tab.

Product Config Tab

Number of product to display
Item per row
Product image ratio
User Slider: add owl carousel for block product.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination
Demo Product Slider:
Show load more

Load more product can't show if you use Use Slider as Yes

Category Config Tab

Click plus icon button to show sub categories.

Choose categories to filter product by select categories.

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Single Product Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Single Product" item.

Config Block

Product Config Tab

Product

Enter product name and wait ajax search product.

Choose product on returns search
Product Template
- Default template
- Metro template
Product image ratio
Show product name
Show price
Show rating
Show categories
Show add to cart
Show short description

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Brand Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Featured Brands" item.

Brands Config Tab

Number of brand to display
Items per row
Show brands by: Show all brand or only featured brand.
User Slider: add owl carousel for blog block.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination

Click SUBMIT button to save Brand block.

Promo Banner Block

Demo

On Home page builder, click Add New Block button.

On popup list blocks, click "Promo Banner" item.

Banner Config Tab

Choose exist banner

First of tab content is a select box. If you have a promo banner, choose option Choose exist banner

Look down, choose exist banner on field Choose Banner

Click SUBMIT button to show promo banner on Home Page.

Create new banner

First of tab content is a select box. If you haven't a promo banner, choose option Create new banner

Input all Banner Information:

Title
Identifier
Image
Content: Html, text for banner
Url: Link for Banner or button banner
Text Align: Content Banner Position
Effect: Choose effect hover for banner. MGS_Promobanners has 11 effect default
Custom Class: Add custom class to style css for this.
Status: Enabled or Disabled this banner

Click Save button to finish create new banner and show promo banner on Home Page.

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Latest Posts Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Latest Post" item.

Blog Config Tab

Number of posts to display
Items per row
View mode
- Grid:
- List:
Show Thumbnail
Show short content

If you config Show short content is Yes you must config Summary character count (Max character for short content).
User Slider: add owl carousel for blog block.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination

Color Config Tab

Click Change color link to show color table. Choose color to config for field.

You can click remove button on field to remove config.

You can config color for text, link, button on block.

Testimonial Block

Demo

On Home page builder, click Add New Block button.

On popup list blocks, click "Testimonial" item.

Testimonial Config Tab

Input value to config testimonial block

Number of testimonial to display
Items per row
View mode
Show Avatar
User Slider: add owl carousel for testimonial block.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination

Click SUBMIT button to show testimonial on Home Page.

Portfolio Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Portfolio" item.

Portfolio Config Tab

Categories: Select portfolio categories to show portfolio form this.
Number of portfolio to display
Items per row
Show Categories
Show Thumbnail
Show short content

If you config Show short content is Yes you must config Summary character count (Max character for short content).
User Slider: add owl carousel for blog block.

If you use slider, you can see more config to owl slider:
- Auto play
- Stop autoplay on mouse hover
- Display navigation
- Display pagination

Click SUBMIT button to save portfolio block.

Instagram shop

Config Instagram Shop

Demo:

Go to http://www.getsnapppt.com/. Create your account and config your shop.

Go to EMBED WIDGETS page.

Config your EMBED WIDGETS .

Copy shoppable embed code and go to Admin -> MGS -> Social [Configuration] -> Snapppt Settings. Paste code to field Shoppable embed code and save setting.

Add Block Instagram Shop

On Home page builder, click Add New Block button.

On popup list blocks, click "Snapppt Shop" item.

Config your block information, and click submit button to finish.

Lookbook Block

On Home page builder, click Add New Block button.

On popup list blocks, click "Lookbook" item.

Lookbook Config Tab

Choose Lookbook you want.

Click SUBMIT button to save Lookbook block.

You can get Lookbook block with code: {{widget type="MGS\Lookbook\Block\Widget\Lookbook" lookbook_id="your_lookbook_id" template="MGS_Lookbook::widget/lookbook.phtml"}}

Lookbook Slider

On Home page builder, click Add New Block button.

On popup list blocks, click "Lookbook Slider" item.

Slider Config Tab

Choose Lookbook you want.

Click SUBMIT button to save Lookbook Slider block.

You can get Lookbook Slider block with code: {{widget type="MGS\Lookbook\Block\Widget\Slider" slider_id="your_lookbook_slider_id" template="MGS_Lookbook::widget/slider.phtml"}}

Enable / Disable module MGS_Brand

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Brand. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Brand' => 1, field. Edit row:

'MGS_Brand' => 1: Enable module
'MGS_Brand' => 0: Disable module

Brand Configuration

Go to Admin -> MGS -> [Shop By Brand] Configuration

General Settings

Enable: Enabled or Disabled brand
Route: Url of brand list page.

List Page Settings

View Page Settings

Product Page Settings

Sidebar Settings

Create new Brand

Go to Admin -> MGS -> [Shop By Brand] Manage Brands

Click Add New Brand button.

Input brand information

General Tab

Meta Information

Products

Select Product to set this brand for product.

Click Save button to save this brand.

Enable / Disable module MGS_Promobanners

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Promobanners. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Promobanners' => 1, field. Edit row:

'MGS_Promobanners' => 1: Enable module
'MGS_Promobanners' => 0: Disable module

Create Promo Banner

Go to Admin -> MGS -> [Promo Banners] Manage Banners

Click Add Banner button.

Input all Banner Information:

Title
Identifier
Image
Content: Html, text for banner
Url: Link for Banner or button banner
Text Align: Content Banner Position
Effect: Choose effect hover for banner. MGS_Promobanners has 11 effect default
Custom Class: Add custom class to style css for this.
Status: Enabled or Disabled this banner

Click Save button to finish create new banner.

Enable / Disable module MGS_Blog

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Blog. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Blog' => 1, field. Edit row:

'MGS_Blog' => 1: Enable module
'MGS_Blog' => 0: Disable module

Blog Configuration

Go to Admin -> MGS -> [Blog] Configuration

General Settings

Enabled: Enable blog
Route: path for url blog page.
Title: Title of blog page.
Template: 1 column, 2 columns left, 2 columns right, 3 columns for blog page.
Posts Per Page: Set limit post for list post page (Blog page,blog category page, blog tag page)
Show Thumbnail On Blog Post List Page
Show Image On Blog Post View Page
Show Next Post and Prev Post on Post View Page
Meta Keywords
Meta Description
Default Sort For Posts: Sorting post on list page by this value

Sidebar Settings

Blog Sidebar

Blog Sidebar Settings

Enabled: Enable sidebar blog block
Show Categories: Show list categories on sidebar (Yes/No)
Show Recent Posts: Show recent posts on sidebar (Yes/No)
- Number Of Recent Posts To Display
- Show Thumbnail For Posts: Thumbnail for recent post
Show Tags: Show tags on sidebar (Yes/No)
- Number Of Tags To Display

Comment Settings

Enabled: Enable comment for blog
Login Required to Comment: Disable guest comment
Auto Approve Comment
Send Emails to: Send email to administrator when customer comment
Email Sender: Choose Email Addresses to send mail.

You can go to ADMIN -> Configuration -> [General] Store Email Addresses to config email sender
Emails Template
Comments Per Page To Display On Post View Page: Number comment show first and number comment show on next load more comment.

Create Blog Category

Go to Admin -> MGS -> [Blog] Manage Categories

Click Add New Category button.

Input Category Information

General Tab
- Title: This blog category name
- URL Key: You can config url key for blog category page. If blank this field, url key auto create from category title.
- Store View: Store view to enable this blog category
- Status: Enabled or Disabled
- Sort Order: This blog category position
Meta Information Tab

You can config Meta Keywords, Meta Description for blog category page.
Click Save button to save blog category

Create Blog Item

Go to Admin -> MGS -> [Blog] Manage Post

Click Add New Post button.

Input Post Information

General Tab
- Title: This blog name
- URL Key: You can config url key for this blog detail page. If blank this field, url key auto create from blog title.
- Thumbnail Type: You can use image or video for thumbnail blog. Thumbnail of blog can show on recent post sidebar, blog widget, blog list page.
  - Thumbnail Type is Images
    
    Browse image from your computer to field Thumbnail
  - Thumbnail Type is Video
    - Video Thumbnail Type: You can use Youtube or Vimeo video
    - Video Thumbnail Id: Input video id
      - Youtube
        
        Link: https://www.youtube.com/watch?v=BBvsB5PcitQ
        
        VideoID: BBvsB5PcitQ
      - Vimeo
        
        Link: https://vimeo.com/145947876
        
        VideoID: 145947876
- Image Type: You can use image or video for base image/video blog. Base image/video of blog show on blog detail page.
  - Image Type is Images
    
    Browse image from your computer to field Thumbnail
  - ThumImagebnail Type is Video
    - Video Thumbnail Type: You can use Youtube or Vimeo video
    - Video Thumbnail Id: Input video id
      - Youtube
        
        Link: https://www.youtube.com/watch?v=BBvsB5PcitQ
        
        VideoID: BBvsB5PcitQ
      - Vimeo
        
        Link: https://vimeo.com/145947876
        
        VideoID: 145947876
- Categories: Set parent categories for this blog.
- Short content: Short content of blog can show on blog widget, blog list page.
- Content: Content of blog can show on blog detail page.
- Store View: Store view to enable this blog category
- Status: Enabled or Disabled
- Tags: Use (,) to separate tags
Meta Information Tab

You can config Meta Keywords, Meta Description for this blog detail page.
Click Save button to save this post.

Manage Comment Block

Go to Admin -> MGS -> [Blog] Manage Comments

You can Approve, Unapprove, Delete customer comment on this page.

Enable / Disable module MGS_Testimonial

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Testimonial. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Testimonial' => 1, field. Edit row:

'MGS_Testimonial' => 1: Enable module
'MGS_Testimonial' => 0: Disable module

Create Testimonial

Go to MGS -> [Testimonial] Manage Items

Click Add Item button.

Input testimonial information

Name
Information
Avatar
Status
Content

Click Save button to save testimonial item.

Enable / Disable module MGS_Portfolio

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Portfolio. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Portfolio' => 1, field. Edit row:

'MGS_Portfolio' => 1: Enable module
'MGS_Portfolio' => 0: Disable module

Create Portfolio Category

Go to Admin -> MGS -> [Portfolio] Portfolio Categories

Click Add Category button.

Input Category Information

Category Name
Identifier: Set friendly url for this categories portfolio, if blank this field, friendly url auto create from category name.

Click Save button to save category.

Create Portfolio Item

Go to Admin -> MGS -> [Portfolio] Portfolio Items

Click Add Item button.

Input Portfolio Information

Name
Identifier: Set friendly url for this portfolio, if blank this field, friendly url auto create from portfolio name.
Category: Choose parent categories for this portfolio.
Thumbnail Image: Thumbnail image show on portfolio widget block, portfolio category page.
Base Image: Gallery image for this portfolio.
Client
Project
Project Url
Date
Skills
Status
Content

Click Save button to save portfolio.

Enable / Disable module MGS_Protabs

What is MGS_Protabs

MGS_Protabs can help you manage tabs on product detail page

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Protabs. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Protabs' => 1, field. Edit row:

'MGS_Protabs' => 1: Enable module
'MGS_Protabs' => 0: Disable module

ProTabs Config

Go to Admin -> MGS -> [Product tabs] Tabs Settings

To enable Product Tabs, on General panel, change value of field Is Enabled to Yes

DEMO:

Default tab: "Show as accordion" is No and "Show after product information" is No

Accordion tab: "Show as accordion" is Yes and "Show after product information" is No

Accordion tab after information product: "Show as accordion" is Yes and "Show after product information" is Yes

To add or remove tabs, config at Manage Tab Items

Label: Title of tab
Select type for tab: You can show tab content with: Attribute, Static Block, Additional Information, Reviews
Position: config position of tab
Value: attribute_code for Attribute type Identifier for Static Block type Blank for other types
Remove this item: Remove this tab
Add Tab Item: Create new tab

Click Save Config button to save config tab. Clear cache if you enable cache.

Enable / Disable module MGS_StoreLocator

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_StoreLocator. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_StoreLocator' => 1, field. Edit row:

'MGS_StoreLocator' => 1: Enable module
'MGS_StoreLocator' => 0: Disable module

StoreLocator Configuration

Go to Admin -> STORES -> Configuration -> MGS -> StoreLocator.

Google Map API Key: To using the Google Maps JavaScript API

First, login Google with your account. Go to https://developers.google.com/maps/documentation/javascript/get-api-key to get API key.

On popup, click Select or create project button.

Enter project name and click CREATE AND ENABLE API button

Until Google returns your api key. Copy it and paste to config.

Create StoreLocator

Go to Admin -> MGS -> [Store Locator] Manage Stores.. Click Add New Store button.

Store Information

Input your store information

Store Name
Store Logo, Email, Phone Number, Fax, Website Url,Store Description, Store Openning Hours
Status
Store View (if you have multiple store view)

Store Address

Input your store address to get map

Input all field Street Address, Country, State, City, Zipcode. Click Get Map button to preview google map and auto render Latitude, Longitude.

Click Save Store button to finish create new store locator

Enable / Disable module MGS_Quickview

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Quickview. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Quickview' => 1, field. Edit row:

'MGS_Quickview' => 1: Enable module
'MGS_Quickview' => 0: Disable module

Configuration MGS_Quickview

Go to Admin -> MGS -> [Quickview] Configuration

You can config to hide more element of product on quickview popup (Product Image,Thumbnail Image,Short Description,Qty,Availability,SKU).

Enable / Disable module MGS_AjaxCart

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_AjaxCart. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_AjaxCart' => 1, field. Edit row:

'MGS_AjaxCart' => 1: Enable module
'MGS_AjaxCart' => 0: Disable module

AjaxCart Configuration

Config Admin

Go to Admin -> STORES -> Configuration -> MGS -> Ajax Cart.

DEMO:

Enable / Disable module MGS_Lookbook

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Lookbook. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Lookbook' => 1, field. Edit row:

'MGS_Lookbook' => 1: Enable module
'MGS_Lookbook' => 0: Disable module

MGS_Lookbook Configuration

Go to Admin -> STORES -> Configuration -> MGS -> Lookbook

General Setting

Slider Setting

We use Owl carousel plugin for Lookbook slider, you can config custom options for owl carousel js.

Create New Lookbook

Go to Admin -> MGS -> Manage Lookbook

After image has been uploaded, you can see Add Pin button on bottom right image. Click it to start config pin of lookbook.

Input data for pin lookbook, you can drag pin to other position you want.

Click Save button to finish create lookbook

Create New Lookbook Slider

Go to Admin -> MGS -> Manage Slider

General Information Tab

Set Slider name, config owl carousel option. If you don't config owlcarousel option, slider use general config

Slider Tab

Choose lookbook use for slider and set position for it.

Click Save button to finish create lookbook slider

Enable / Disable module MGS_InstantSearch

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_InstantSearch. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_InstantSearch' => 1, field. Edit row:

'MGS_InstantSearch' => 1: Enable module
'MGS_InstantSearch' => 0: Disable module

Configuration MGS_InstantSearch

Go to Admin -> STORES -> Configuration -> MGS -> InstantSearch

General Setting

Enable / Disable module MGS_Landing

Config Admin

Go to Admin -> STORES -> Configuration -> Advanced -> Advanced.

Find field MGS_Landing. Change value of select option:

Enable: Enable module
Disable: Disable module

Edit File config.php

Go to the root folder on your Web Server, open file config.php on path app/etc/config.php

Find row 'MGS_Landing' => 1, field. Edit row:

'MGS_Landing' => 1: Enable module
'MGS_Landing' => 0: Disable module

Configuration MGS_Landing

Go to Admin -> STORES -> Configuration -> MGS -> InstantSearch

General Setting

Setup Multi Languages

To setup multi languages, you can go to Admin -> Stores -> All Stores -> Create Store View

Example with French

Name: French
Code: fr
Status: Enable

Setup Currency

To setup currency, you can go to Store -> Configuration -> General -> Currency. Set Allowed Currencies are the currency you want on your store.

Go to Store -> Currency Rates, press Import. Wait for the system to import currency exchange rate.

If currency rate can't auto create, you can input value for it

Click Save Currency Rates button to finish config.

Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.

Enable Translate Inline

To enable translate inline for any store view, go to Stores -> Configuration -> Advanced -> Developer

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

At Translate Inline panel:

Enabled for Storefront Enable translate inline at Frontend
Enabled for Admin: Enable translate inline in Backend

Make Child Theme

We recommend you to create the child theme, if you need to customize the theme.

Make the child theme in the same directory with "mgsblank". Sample "mgs_blank_child" theme was already provided in the theme package.

/app/design/frontend/Mgs/mgsblank_child

Declare your theme

Create file theme.xml on mgsblank_child folder. The path:
```
/app/design/frontend/Mgs/mgsblank_child/theme.xml
```
File content:

You can replace Mgs/mgsblank to Mgs/ninth if you want use Ninth as parent theme.

After you create theme.xml file, you need to open or reload any Magento Admin page for your theme to be saved in the database.
Make your theme a Composer package (optional)

Create file composer.json on mgsblank_child folder. The path:
```
/app/design/frontend/Mgs/mgsblank_child/composer.json
```
Magento default themes are distributed as Composer packages.

To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. A default public packaging server is https://packagist.org/.

composer.json provides theme dependency information.

Example of a theme composer.json:
```
{
	"name": "magento/mgsblank_child",
	"description": "N/A",
	"require": {
	"php": "~5.5.0|~5.6.0|~7.0.0",
	"magento/theme-frontend-blank": "100.0.*",
	"magento/framework": "100.0.*"
	},
	"type": "magento2-theme",
	"version": "100.0.1",
	"license": [
	"OSL-3.0",
	"AFL-3.0"
	],
	"autoload": {
	"files": [
	"registration.php"
	]
	}
}
```
You can find details about the Composer integration in the Magento system in Composer integration.

Add registration.php

To register your theme in the system, in your theme directory add a registration.php file with the following content:


<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Mgs/mgsblank_child',
__DIR__
);

Configure images

Product image sizes and other properties used on the storefront are configured in a view.xml configuration file. It is required for a theme, but is optional if exists in the parent theme.

If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, add view.xml using the following steps:
1. Log in to your Magento server as a user with permissions to create directories and files in the Magento installation directory. (Typically, this is the the Magento file system owner.)
2. Create the etc directory in your theme folder
3. Copy view.xml from the etc directory of an existing theme (for example, from the Blank theme) to your theme’s etc directory.
4. Configure all storefront product image sizes in view.xml.
For details about images configuration in view.xml, see the Configure images properties for a theme topic.
Create directories for static files

Your theme will likely contain several types of static files: styles, fonts, JavaScript and images. Each type should be stored in a separate sub-directory of web in your theme folder:
```
app/design/<area>/<Vendor>/<theme>/
								├── web/
								│ ├── css/
								│ │ ├── source/ 
								│ ├── fonts/
								│ ├── images/
								│ ├── js/
								
```
In the .../<theme>/web/images you store the general theme related static files. For example, a theme logo is stored in ...<theme>/web/images. It is likely that your theme will also contain module-specific files, which are stored in the corresponding sub-directories, like .../<theme>/<Namespace_Module>/web/css and similar. Managing the module-specific theme files is discussed in the following sections of this Guide.
The files has to copy from parent theme to the child theme

1) Copying app\design\frontend\Mgs\{parent_theme}\Magento_Theme\templates\html\header.html and app\design\frontend\Mgs\{parent_theme}\Magento_Theme\templates\html\footer.html to app\design\frontend\Mgs\{child_theme}\Magento_Theme\templates\html\ folder

2) Copying the content of pub\media\mgs\{parent_theme}\ folder to pub\media\mgs\{child_theme}\ folder

3) Copying app\code\MGS\Mpanel\data\themes\{parent_theme}\theme_style.xml file to papp\code\MGS\Mpanel\data\themes\{child_theme}\

Note: you have to create {child_folder} folder

During theme development, when you change any files stored here, you need to clear pub/static and var/view_preprocessed directories, and then reload the pages. Otherwise the old versions of files are displayed on the storefront.

Add Builder For Static Block

Add static block in `.phtml` file.

In .phtml file, you can get static block with code:

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('static_block_identifier')->toHtml() ?>

To can edit static block with MGS Front-end Builder. You must declare variable $canUsePanel first.

<?php $MgsPanelhelper = $this->helper('MGS\Mpanel\Helper\Data') ?>
<?php $canUsePanel = $MgsPanelhelper->acceptToUsePanel() ?>

After declare variable $canUsePanel, you must add code ->setCanUsePanel($canUsePanel) after setBlockId('static_block_identifier') and before ->toHtml() on code get static block.

Final code look like:

<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('static_block_identifier')->setCanUsePanel($canUsePanel)->toHtml() ?>

Add static block in `.xml` file.

In .xml file, you can get static block with code:

<block class="Magento\Cms\Block\Block" name="block.name">
	<arguments>
		<argument name="block_id" xsi:type="string">static_block_identifier</argument>
	</arguments>
</block>

To can edit static block with MGS Front-end Builder. You must add code <argument name="enabled_builder" xsi:type="string">1</argument> as child of <arguments> tag.

Final code look like:

<block class="Magento\Cms\Block\Block" name="block.name">
	<arguments>
		<argument name="block_id" xsi:type="string">static_block_identifier</argument>
		<argument name="enabled_builder" xsi:type="string">1</argument>
	</arguments>
</block>

Add Custom Block (Third party extensions)

To add block or widget of third party extension on home page, you can insert block shortcode or widget shortcode to "Text Content & Image" block.

Example with Magento_Newsletter module:

If you open default.xml in layout folder from frontend of Newsletter module, you can see a xml tag to add newsletter block to footer section:

You can change to {{block class="Magento\\Newsletter\\Block\\Subscribe" template="Magento_Newsletter::subscribe.phtml"}} and add this code to content of "Text Content & Image" block.

NINTH Documentation

NINTH Magento 2 Documentation v1.0

Declare your font

Way 1: Add your font file

Way 2: Add font with code css

Declare font for element

Create & Upload new header thumbnail

Modify header template file

Via Front-end Builder

Via Backend

Create & Upload new footer thumbnail

Modify footer template file

Via Front-end Builder

Via Backend

Change Default background

Change background for custom category

Change background for custom product

Create Product Attribute

Manage Attribute Set

Edit Product

Change background for custom cms page

Set default layout template for all product

Set layout for only one product

Config Contact Map

Create Customer Account

Set Customer to Panel Account

Create CMS Page

Start Buider for Cms Page

Config Section

General Tab

Column Config

Config Block

Content Tab

Images Tab

Config Block

Images Tab

Slider Config Tab

Banner Video Demo Code:

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Complete the Basic Properties

Complete the Advanced Properties (Optional)

Insert the Field Label

Complete the Storefront Properties

Reindex Data

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Tab Config Tab

Product Config Tab

Category Config Tab

Color Config Tab

Config Block

Product Config Tab

Color Config Tab

Brands Config Tab

Menu Config Tab

Banner Config Tab

Choose exist banner

Create new banner