Claue Documentation

Claue 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.1.x

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:

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/bhgi26mo7siylj2/claue241.sql.zip (for Magento 2.4.1)

Database: https://onedrive.live.com/?authkey=%21AFPB8GABhKYCcV8&cid=AA9A965ACE44009D&id=AA9A965ACE44009D%2142896&parId=AA9A965ACE44009D%2135030&o=OneUp (for Magento 2.3.5)

Database: https://www.dropbox.com/s/rhfrbrqehjeqdon/claue2.sql.zip?dl=0 (for Magento 2.2+)

Database: https://www.dropbox.com/s/ug2d72b02xoewit/database_claue_v2.13.sql.zip?dl=0 (for Magento 2.1.13 or later)

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

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

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

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

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

With Catalog Search Settings, you can config:

• Show Categories For Search:

  

• Page Layout: Config layout for Search results page

• Number Of Product Per Row: Config number product perrow (grid mode) for Search results page

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 Related Product On Sidebar (If this product page not is 1 column)

  

• Number Of Product Per Row (Related Products, Up-Sells, Cross-Sells)
• Show Sku
• Show Reviews Summary
• Show Add to Wishlist Link
• Show Add to Compare Link
• Show Short Description
• Show Upsell Products

Go to Admin -> MGS -> General Settings [Customer Navigation Links]

You can enabled or disabled link on customer Navigation Links

Go to Admin -> MGS -> General Settings [Google Map on Contact Page]

Input data config, you can show map on contact page.

How To get Google Map API KEY?

You must input 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.

Go to Admin -> MGS -> General Settings [Newsletter Popup]. To show newsletter popup, change value of field Enable Newsletter Popup to Yes

Demo

Go to Admin -> MGS -> General Settings [Sidebar Config]

• Compare Block

  

• Wishlist Block

  

• Reorder Block

  

• Custom Static Block

  Static block Identifier: mpanel_default_sidebar_block

  

To use share this, you need go to http://www.sharethis.com/. Click Get Share Buttons button to config and get code. ShareThis returns for you script and html code.

Script

Html

Go to Admin -> MGS -> General Settings [Share This]

You can show share this on product detail page, category page, blog detail page, portfolio page.

Go to Admin -> MGS -> General Settings [Breadcrumbs and Page Title]

Set breadcrumbs fullwidth: Yes

Set breadcrumbs fullwidth: No

Background Page Title:

• 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

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.

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.

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

You can add your own custom style for your site.

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; }

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

On Sconto theme, we use blue  #56cfe1  for default color. You can change it with option "Theme color"

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)

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

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

You can setting color for:

• Text & link
• Default Button (Change color for btn-default)
• Default Button 2 (Change color for btn-default2)
• Primary Button (Change color for btn-primary)
• Secondary Button (Change color for btn-secondary)

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

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

You can setting color for:

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

From Admin panel, go to CONTENT → Configuration

Click Edit link to config this store view.

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

Claue 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

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

On Edit Product page, go to Images And Videos section, Upload image for product.

After images uploaded, click image to set image role: base image, small image, swatch image, thumbnail image.

For first image show, it is small image. For image product show when hover item, it is thumbnail image.

Save product.

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.

The last thing you can select what thumbnail image you want to use so that when you click on it, the 360 image will works on the gallery.

We use model viewer library to build this feature and it uses 3D image with "glb" of format (more info: https://modelviewer.dev/ ) so if you want to use this feature, you will need to prepare a "glb" file

Then you have to upload that file to pub/media/wysiwyg/3d/product_id/ folder, here 3d is obligatory folder, note it is 3d, not 3D, product_id is obligatory folder too and it is product's id. If 3d and product_id have not existed, feel free to create them

If you are using Magento 2.3.5 or higher, you can upload this image in admin, go to CONTENT -> Blocks, edit or create a new static block then click as below

You also need to enable 3D Image View attribute for product. From Admin panel, go to PRODUCTS → Catalog → [Edit Product]

On Edit Product page, change 3D Image View field to Yes

Save product.

The last thing you can select what thumbnail image you want to use so that once you click on it, the 3D image will works on the gallery.

Category Landing Compatible With Magento 2.2+

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

To remove Filter on Landing page, On Backend, go to Design section of parent category and add code for Layout Update XML field:

<referenceBlock name="catalog.leftnav" remove="true"/>

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!

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

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

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

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.

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.

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.

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

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.

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.

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.

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.

On Home page builder, click Add New Block button.

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

Step 1: Create element html:

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

Banner Video Demo Code:

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.

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.

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

Complete the Basic Properties

The Basic Properties is required for an product attribute.

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

Complete the Advanced Properties (Optional)

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

Insert the Field Label

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

Complete the Storefront Properties

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

Reindex Data

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

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.

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

In the basic settings panel, Click Advanced Pricing link

Advanced Pricing panel:

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

Click Save button to save product.

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.

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.

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.

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

In the basic settings panel, Click Advanced Pricing.

Advanced Pricing panel:

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

Click Save button to save product.

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.

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.

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Brand. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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

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.

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Megamenu. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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_Megamenu' => 1, field. Edit row:

• 'MGS_Megamenu' => 1: Enable module
• 'MGS_Megamenu' => 0: Disable module

To setup add logo on center menu, you can go to admin -> Stores -> Configuration -> MGS -> Megamenu

Set value of Homepage Link and Use Logo For Home Page Link to Yes.

Next step, set position for it. Item menu show on front-end sort by position.

Ex: If Homepage Link Position is 45, a item menu have position 50. This item show on right logo.

Important: don't delete default Megamenu with ID is 1, you will must use it when select "Menu" when create Megamenu Items

To add new Megamenu Item, you can go to Admin -> MGS -> Megamenu -> Manage Menu -> Click Add Menu button.

Input Menu Information

• Title
• Menu Type: Vertical menu or Horizontal menu
• Custom Class
• Status: Enabled or Disabled

Click Save button to save this menu.

To add new Megamenu Item, you can go to Admin -> MGS -> Megamenu -> Manage Megamenu Items -> Click Add Item button.

Menu Item Information

• MenuChoose parent Megamenu
• Label: Label show on menu.
• Link: Url of this
• Position: Position on menu.
• Columns: Column sub menu of this.
• Custom Class: If you want add orther style for this.
• Static Content: Add content to sub menu of this

Custom Setting

• Catalog Category:
  • Menu Type: Catalog Category

  • Categories: Choose Categories to show

    

  • Static Contents:

    

    • Top Content: Content on top megamenu
    • Bottom Content: Content on bottom megamenu
• Static Content:
  • Menu Type: Static Content

  • Static Contents:

    

To load new content Megamenu on front-end, Flush cache Magemenu to get it.

>

On Home page builder, click Add New Block button.

On popup list blocks, click "Megamenu" item.

Menu Config Tab

Choose Megamenu to show, click SUBMIT button to save block.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Promobanners. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

Edit File config.php

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

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

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

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

Click Add Banner button.

Input all Banner Information:

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

Click Save button to finish create new banner.

Demo

On Home page builder, click Add New Block button.

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

Banner Config Tab

Choose exist banner

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

Look down, choose exist banner on field Choose Banner

Click SUBMIT button to show promo banner on Home Page.

Create new banner

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

Input all Banner Information:

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

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

Color Config Tab

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

You can click remove button on field to remove config.

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

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Blog. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

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

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.

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

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

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Testimonial. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Portfolio. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

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.

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Social. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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_Social' => 1, field. Edit row:

• 'MGS_Social' => 1: Enable module
• 'MGS_Social' => 0: Disable module

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 panel

• Active: Enable facebook social.
• App ID: API ID of your facebook app (get from step 1).
• App Secret: API Secret of your facebook app (get from step 1).

Step 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

• Facebook Page URL: Full url of facebook fan page.
• Width: The pixel width of the plugin. Min. is 180 & Max. is 500.
• Height: The pixel height of the plugin. Min. is 70.

• Tabs

  

• Hide Cover: Hide cover photo in the header.
• Show Facepile: Show profile photos when friends like this.
• Show Posts: Hide the custom call to action button (if available).
• Small Header: Use the small header instead.
• Fit Inside: Try to fit inside the container width.

Click SUBMIT button to save facebook block.

Step 1: Get Twitter Config

Go to https://apps.twitter.com/. Sign in with your Twitter Account to create and maintain Twitter Apps.

Click Create New App button.

Input application information, click Create your Twitter application button

After your twitter app has created, click Keys and Access Tokens tab. You can see Consumer Key (API Key) and Consumer Secret (API Secret).

To create access token, click Create my access token button

Your access token has generated.

Step 2: Config Twitter

Go to Admin -> MGS -> [Social] Configuration, you can see Twitter Settings panel

Step 3: Add Block Twitter Feed

On Home page builder, click Add New Block button.

On popup list blocks, click "Twitter Feed" item.

Twitter Config Tab

• Number of Feeds to display

• 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 Twitter Feed block.

Step 1: Get Instagram Access Token

Watch video guild: https://www.youtube.com/watch?v=1fQv4V9fPP0

Step 2: Config Instagram Access Token

Go to Admin -> MGS -> [Social] Configuration, you can see Instagram Settings panel

Step 3: Add Block Instagram

On Home page builder, click Add New Block button.

On popup list blocks, click "Instagram" item.

Instagram Config Tab

• Number of images to show
• Items per row
• Image resolution
• Enable link
• Show like count
• Show comment count

• 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 Instagram block.

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.

What is MGS_Protabs

MGS_Protabs can help you manage tabs on product detail page

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Protabs. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_StoreLocator. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

  

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

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Quickview. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_AjaxCart. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

Config Admin

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

DEMO:

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Lookbook. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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.

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

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

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"}}

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"}}

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_InstantSearch. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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

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

General Setting

note: module Landing only works from version magento 2.2.0

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

MGS Landing is a modules help to create the landing page for category. It takes some step to follow to reach the best result.

Go to Admin -> CATALOG -> Category and choose which product you would set the landing for.

Move to tab Landing and you will see 3 settings below.

• Is Landing: Turn Yes to set the landing page for the current category.
• Landing Template: Choose a kind of template that suit your requirement most. We provide 3 wonderful templates and you can click the link beside to see the demo:
  • Grid: See Demo.
  • Masonry: See Demo.
  • Parallax: See Demo.
• Category Thumbnail Image: Click Upload button to upload the thumbnail image for your category.

You should turn on the landing switcher for parent category, and there is no need to turn on it for child categories. If you try this way, you will have a parent category landing page similar to our demo, with a lot of child categories in it:

Or you can try going to the child category and turn on the landing page for it. This will create a separated landing page for this child category.

Click Save button to finish.

To see the result, please go to the category url. You can check the url of category at tab Search Engine Optimization. The url can be: https://yourdomain.com/category-url-key.

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

General Setting

Here you can set some general configures for your site.

• Number Item Per Rows: Set number of landing item in a row.
• Show Short Description: Choose Yes to display the description of category.
• Summary character count: Set the limitation for character number.

NOTE: If you use magento version 2.1.9 or lower

Config Admin

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

Find field MGS_Ajaxlayernavigation. Change value of select option:

• Enable: Enable module
• Disable: Disable module

NOTE: If you use version magento 2.2.0 or higher

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_Ajaxlayernavigation' => 1, field. Edit row:

• 'MGS_Ajaxlayernavigation' => 1: Enable module
• 'MGS_Ajaxlayernavigation' => 0: Disable module

Go to Admin -> STORES -> Configuration -> MGS -> Ajax Layer Navigation

General Setting

• Use Ajax:
• Use Range Price Slide:

Demo:



• Remove Shopping By :

Demo:



• Filter By Text :

Demo:

Config Admin

Go to Admin -> STORES -> Configuration -> Magesolution -> Accelerated Mobile Page

Find field Enable. Change value of select option:

• Yes: Enable module
• No: Disable module

Go to Admin -> STORES -> Configuration -> Magesolution -> Accelerated Mobile Page

General Setting

MGS GDPR for Magento 2 is an extension which helps e-commerce stores to comply with some of the most essential GDPR regulations.

For more reference, click here.

Go to admin Stores -> Configuration -> Mage Solution -> GDPR

Select a store view you are using.

Now you can see some configurations for you cart as follow:

General Settings

Active: Choose Yes to enable the extension.

Cookie Restriction Mode

Here you can make a lot of configurations for the cookie using allowance on you websites.

Login Form

Here you can make a lot of configurations for the checkbox in the login form.

Register Form

Here you can make a lot of configurations for the checkbox in the register form.

Click Save button to save your config and refresh Magento Cache

Note: To use MGS_GDPR module, you need enable Cookie Restriction Mode of Magento2

Go to admin Stores -> Configuration -> Web [ General ] -> Default Cookie Settings -> Enable "Cookie Restriction Mode"

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

Example with French

• Name: French
• Code: fr
• Status: Enable

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.

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

To edit size guide and delivery-return, login backend Admin, then go to Contents -> Blocks

Search static block "mpanel_product_detail_bottom_block"

Select edit block

Click button Show/Hide Editor

1. Edit image size guide

Move mouse cursor on first position of content, Click button Insert image, Insert new image -> Cut code of new image -> replace code of old image by code of new image

2. Edit delivery - return

Search "modal-body" -> Edit code in this div

The center logo is base on the position of the menu items, so please follow step by step to make it:

1. Upload the logo

Please go to admin panel Content -> Configuration then edit store view you are using, expand Header section, here you can upload your logo, note to set width and height for it

2. Create the menu item

Please go to admin panel MGS -> Manage Megamenu Items then create the menu item, when you create menu items, please note the position of them, for example, I have created 2 menu item, the first item's position is 1, the second item's position is 10

2. Set the logo will show on the megamenu

Please go to admin panel MGS -> Configuration ( under Megamenu ) then select store view you are using if you have more store view then set as the image following:

Please note to "Homepage Link Position" field, now it is 5 so it will be between menu item1 and menu item2. You can change this to fit with your menu items.

Home Classic

Footer

Home Instagram Shop

Header Version 8

Footer Version 2

Footer Version 4

Footer 3

Contact Page

Product Detail Tab

Product Detail Top Block

Product Detail Bottom Block

The identifier with per static block

1 . header_1_top_left_link

2 . header_1_top_middle_block

3 . header_1_social_block

4 . footer_contact_us

5 . footer_block_categories

6 . footer_block_infomation

7 . footer_block_quick_link

8 . footer_block_subscribe

9 . optimize_image_instagram

10. header_8_top_left_link

11. footer_block_newsletter_top

12. footer_block_instagram

13. footer_block_image_map

14. footer4_contact_us

15. footer_logo_and_social

16. claue_footer3_custom_menu

17. contact_page_custom_block

18. claue_product_detail_tab

19. mpanel_product_detail_top_block

20. mpanel_product_detail_bottom_block

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

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

/app/design/frontend/Mgs/mgsblank_child

• Declare your theme

  Create file theme.xml on mgsblank_child folder. The path:

  /app/design/frontend/Mgs/mgsblank_child/theme.xml

  File content:

  

  You can replace Mgs/mgsblank to Mgs/claue if you want use Claue as parent theme.

  After you create theme.xml file, you need to open or reload any Magento Admin page for your theme to be saved in the database.

• Make your theme a Composer package (optional)

  Create file composer.json on mgsblank_child folder. The path:

  /app/design/frontend/Mgs/mgsblank_child/composer.json

  Magento default themes are distributed as Composer packages.

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

  composer.json provides theme dependency information.

  Example of a theme composer.json:

  
  {
  	"name": "magento/mgsblank_child",
  	"description": "N/A",
  	"require": {
  	"php": "~5.5.0|~5.6.0|~7.0.0",
  	"magento/theme-frontend-blank": "100.0.*",
  	"magento/framework": "100.0.*"
  	},
  	"type": "magento2-theme",
  	"version": "100.0.1",
  	"license": [
  	"OSL-3.0",
  	"AFL-3.0"
  	],
  	"autoload": {
  	"files": [
  	"registration.php"
  	]
  	}
  }
  
  

  You can find details about the Composer integration in the Magento system in Composer integration.

• Add registration.php

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

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

• Configure images

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

  If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, add view.xml using the following steps:

  1. Log in to your Magento server as a user with permissions to create directories and files in the Magento installation directory. (Typically, this is the the Magento file system owner.)

  2. Create the etc directory in your theme folder

  3. Copy view.xml from the etc directory of an existing theme (for example, from the Blank theme) to your theme’s etc directory.

  4. Configure all storefront product image sizes in view.xml.

  For details about images configuration in view.xml, see the Configure images properties for a theme topic.

• Create directories for static files

  Your theme will likely contain several types of static files: styles, fonts, JavaScript and images. Each type should be stored in a separate sub-directory of web in your theme folder:

  app/design/<area>/<Vendor>/<theme>/
  								├── web/
  								│ ├── css/
  								│ │ ├── source/ 
  								│ ├── fonts/
  								│ ├── images/
  								│ ├── js/
  								

  In the .../<theme>/web/images you store the general theme related static files. For example, a theme logo is stored in ...<theme>/web/images. It is likely that your theme will also contain module-specific files, which are stored in the corresponding sub-directories, like .../<theme>/<Namespace_Module>/web/css and similar. Managing the module-specific theme files is discussed in the following sections of this Guide.

• The files has to copy from parent theme to the child theme

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

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

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

  Note: you have to create {child_folder} folder

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

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')]

/app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/headers

To add new version header, create new file header_(next-number-version).phtml on path /app/design/frontend/Mgs/mgsblank/Magento_Theme/templates/html/headers or /app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/headers if you use child theme.

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') ?>

Create image for change header with builder

Take screenshot of new version header, convert this file to .png. Rename image to header_(next-number-version).png. Copy file to folder pub\media\mgs\mgsblank\headers or pub\media\mgs\your_theme_name\headers if you use child theme.

/app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/footers

To add new version header, create new file footer_(next-number-version).phtml on path /app/design/frontend/Mgs/mgsblank/Magento_Theme/templates/html/footers or /app/design/frontend/Mgs/your_theme_name/Magento_Theme/templates/html/footers if you use child theme.

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

Contents can get on header and this code

• Copy right text: <?php echo $block->getCopyright() ?>
• Static Block: <?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('static_block_identifier')->toHtml() ?>

Create image for change header with builder

Take screenshot of new version header, convert this file to .png. Rename image to footer_(next-number-version).png. Copy file to folder pub\media\mgs\mgsblank\footers or pub\media\mgs\your_theme_name\footers if you use child theme.

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>

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.

Code Demo