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:
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:
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
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
ormemcached
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
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
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.
- 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.
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> |
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.
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.
When your Magento installation is completed successfully you can start theme installation procedure.
Install Theme
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- If you are using magento version 2.2.8: please upload "app" folder from patch_for_magento_2.2.8 to magento root folder
- If you are using magento version 2.3.0: please upload "app" folder from patch_for_magento_2.3.0 to magento root folder
- If you are using magento version 2.3.1: please upload "app" folder from patch_for_magento_2.3.1 to magento root folder
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
- 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
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.
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)
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 fieldIs Front-end Builder Account
. Change value to YesClick 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.
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
andUsed 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
andSpecial Price To Date
. You can type manually or click onCalendar
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
andSpecial Price To Date
. You can type manually or click onCalendar
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.
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_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
toMgs/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:-
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.)
-
Create the
etc
directory in your theme folder -
Copy
view.xml
from theetc
directory of an existing theme (for example, from the Blank theme) to your theme’setc
directory. -
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.

Facebook Like Box
Step 1: Get Facebook API Information
Go to Facebook Developers
Login with your app account or your facebook account and create app.
Go to Dashboard of your app. Click Show button to view App Secret.
Step 2: Config Facebook API
Go to
Admin -> MGS -> [Social] Configuration
, you can see Facebook Settings panelStep 3: Add Block Facebook Like Box
On Home page builder, click Add New Block button.
On popup list blocks, click "Facebook Like Box" item.
Facebook Config Tab
Tabs
Click SUBMIT button to save facebook block.