Overview
MGS Front-end Builder 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.1.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 and pub folder to your magento root folder
Then you will need to apply a patch for Magento version you are using:
- If you use Magento version 2.1.6 or later, let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.1.6+
- If you use Magento version 2.2.0 to 2.2.7, let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.2.0_to_2.2.7
- If you use Magento version 2.2.x (x>8), let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.2.8+
- If you use Magento version 2.3.0, let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.3.0
- If you use Magento version 2.3.1 or later, let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.3.1+
- If you use Magento version 2.3.4, let apply this patch: Themes/Magento 2.x/Patches/patch_for_magento_2.3.4
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
Module MGS_Mpanel is indispensable
- 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_Testimonial
- Run command line: php bin/magento module:enable MGS_Brand
- Run command line: php bin/magento module:enable MGS_Promobanners
- Run command line: php bin/magento module:enable MGS_StoreLocator
- Run command line: php bin/magento module:enable MGS_Blog
- 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 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 Organie theme button.
Until Backend returns success message, Go to System -> Cache management
. Select all, choose refresh action and submit.
Import Homepage
Go to Admin -> MGS -> Theme Settings [Import]
Click to "Organie", you can see all homepages with thumbnail homepage. Click to button to import homepage as you want, if you want to import homepage for special store view, please switch to store view first.
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 for Magento 2.1.x: https://www.dropbox.com/s/l5p7pit1413x543/organie.sql.zip?dl=0
Database for Magento 2.2.x: https://www.dropbox.com/s/l5p7pit1413x543/organie.sql.zip?dl=0
Media: https://www.dropbox.com/s/fb6jv39vqpuo3o5/media.zip?dl=0
After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:
- Go to Cpanel -> My SQL Database
- Create new database
- Create new account of database
- Assign database to user
- Set permissions for user
- Go back to cpanel and go to phpmyadmin
- Click to database you have created
- Click Import
- Click "Browse..." button and choose the database you have downloaded
- Click "Go" button to import database
- After import database, please find and go to database table name core_config_data
- Find 2 records with path are web/unsecure/base_url and web/secure/base_url
- Edit value of them to your site url, eg:
- Open the file: app/etc/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
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).
Active Preload
Active Ajax scroll: Auto load more product when scroll to bottom category page.
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 Search Settings
Go to Admin -> MGS -> General Settings [Catalog Search]
With Catalog Search Settings, you can config:
Page Layout: Config layout for Search results page
Number Of Product Per Row: Config number product perrow (grid mode) for Search results page
Product Detail Settings
Go to Admin -> MGS -> General Settings [Product Details]
With Product Details Settings, you can config product detail page:
- Default Page Layout For Product Page
- Show Sku
- Show Reviews Summary
- Show Add to Wishlist Link
- Show Add to Compare Link
- Show Short Description
- Show Upsell Products
Customer Navigation Links Settings
Go to Admin -> MGS -> General Settings [Customer Navigation Links]
You can enabled or disabled link on customer Navigation Links
Contact Page Settings
Go to Admin -> MGS -> General Settings [Google Map on Contact Page]
- Display Google Map: Display Google map on contact page.
-
Google 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.
- Address: Address for google map.
Html, pin image:
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.
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.
To add other google font. View document.
Custom Style
Custom Font Family
If you have a font. You can add TTF File, EOT File, WOFF File, SVG File to declare new font for your site.
Custom Style
You can add your own custom style for your site.
Create Panel Account (In Front-end)
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 reindex data again, use this command to reindex data: php bin/magento indexer:reindex
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.
Create Panel Account (In Backend)
In Backend, go to System → All Users
Click Add New User button if you want to add a new account admin. Or you can edit an existing account admin to create a panel account.
If you create new admin account.
On form create account admin, you can see a checkbox Create Front-end Builder account. Checked it.
Input for all require field, click Save User button. A customer account for Front-end Builder has created with admin account information.
If you edit admin account.
On Admin Account Information page, click Front-end Builder Account link, you can see a popup. Click OK button
A customer account for Front-end Builder has been created with admin account information.
Active MGS Frontend Builder
In backend, go to MGS → General Settings
. On General
section. You can see field Active Front-end Builder
. Change value to Yes.
Click Save Config button. After that, clear cache on System → Cache Management
At Front-end, go to Login page. Login with Panel Account
After login, you can see button Active Builder on top panel. Click this button to activate Front-end Builder.
MGS Front-end Builder is Ready!
Change Header Version
When 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
Config Category Products Page
When Builder is active. Go to any category product 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 category page (1 column, 2 columns left, 2 columns right, 3 columns)
- Per row: Config number product perrow (on desktop screen) for grid mode of this category page.
- Image Ratio: Config image product ratio of this category page.
Click Submit button. After page reload, clean Cache on your site.
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.
Enable Home Page Builder
When Builder is active, go to Home Page. On top panel, you can see button Homepage Builder. Click this button to enabe Home Page Builder
Wait for page to reload, You can see Home Page Builder is ready.
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
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.
Show Block Builder on CMS or XML
After configuring & saving block. On this block on home page, you can see group button to edit this block.
Click Edit button.
Change to tab Embed Code
For CMS
Copy code of For CMS
-
Add to Static Block:
In Backend, go to
Content → Blocks
. Click Add New Block button to create new static block or edit block.Paste clipboard to content
-
Add to CMS Page:
In Backend, go to
Content → Page
. Click Add New Page button to create new page or edit page.Paste clipboard to content
For Layout Update XML
Copy code of For Layout Update XML
In Backend, go to Content → Page
. Click Add New Page button to create new page or edit page.
Go to Design section. You can see field Layout Update XML
First, You can determine position to add block on xml. Example: For main content
You must updates with <referenceBlock>
and <referenceContainer>
. They are applied to the corresponding <block>
or <container>
.
Example: Add block to Main Content Top:
<referenceContainer name="content.top">
//Paste code here
</referenceContainer>
You can do the same with .xml
file, Layout Update XML of categories.
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.
Insert Static Block To Homepage Content
In Backend, go to Content → Blocks
. Click Add New Block button to create new static block.
- Enable Block: Disable or Enable block.
- Block title
- Indentifier
- Store View: Choose store view to enable block
- Content: You can insert html code, short code (block), widget on static block content.
Input all require content, click Save Block button.
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. Click Show / Hide Editor button to hide editor and edit content with html & short code
Copy code {{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="sample_static_block_indentifier"}}
and change block_id with your static block identifier to content.
Click SUBMIT button to save.
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
-
Single Deal
-
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 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.
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.
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.
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.
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
-
GridList:
-
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.
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.
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.
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.
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.
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
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
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.
-
Add top link: Insert link Store Locator to top link
- Label top link: Config label for top link.
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
- Status
- Store View (if you have multiple store view)
-
Store Description
-
Store Openning Hours
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).
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
Add New Google Font
Open file Data.php on your web folder. The path:
/app/code/MGS/Mpanel/Helper/Data.php
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')]
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.