Claue 2 Documentation

Claue 2 Documentation

Claue 2 is the second advanced version of the Claue Magento theme that was built completely different from its previous one. Thus, if you are using Claue version 1 and want to update to Claue version 2, you are only able rebuild a new website, please don't update directly from Claue 1.

Why to choose Claue version 2?

• Being based on Luma theme.
• Meeting all standards of Magento Theme
• Significant performance improvements
• Compatibility with most of third-party extensions.

Claue 2 is fully compatible with Magento 2.4.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 had a Magento application installed, you can skip this section

To install Magento version 2.4, please follow these steps:

STEP 1: Step 1: Install ElasticSearch on Ubuntu Server

SSH into your Ubuntu 22.04 server and update existing software.

sudo apt update && sudo apt upgrade -y

ElasticSearch is a fast and scalable search and analytics engine. It’s used by Magento as the catalog search solution. We can install Elasticsearch from the official repository with the following commands. (Note: Magento currently isn’t compatible with ElasticSearch 8. We will install ElasticSearch 7.)

Install the apt-transport-https package because the ElasticSearch repository uses HTTPS protocol.

sudo apt-get install -y apt-transport-https

Add the ElasticSearch repository.

echo "deb [signed-by=/usr/share/keyrings/elasticsearch-keyring.gpg] https://artifacts.elastic.co/packages/7.x/apt stable main" | sudo tee /etc/apt/sources.list.d/elastic-7.x.list

Import ElasticSearch GPG public key.

wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | sudo gpg --dearmor -o /usr/share/keyrings/elasticsearch-keyring.gpg

Update repository index and install ElasticSearch.

sudo apt update 
sudo apt install -y elasticsearch default-jre-headless
									

Then start ElasticSearch

sudo systemctl enable --now elasticsearch

Check the status.

systemctl status elasticsearch

After Goto "Home" directory :

cd /usr/share/elasticsearch

Install plugins :

bin/elasticsearch-plugin install analysis-phonetic bin/elasticsearch-plugin install analysis-icu

sudo systemctl restart elasticsearch

Run the following command to test if ElasticSearch is working.

curl http://localhost:9200

If ElasticSearch is working properly, it will output a message like below.

{
					  "name" : "ubuntu",
					  "cluster_name" : "elasticsearch",
					  "cluster_uuid" : "uO_sXa_0T9ua-pkUn3aTbQ",
					  "version" : {
						"number" : "7.17.4",
						"build_flavor" : "default",
						"build_type" : "deb",
						"build_hash" : "79878662c54c886ae89206c685d9f1051a9d6411",
						"build_date" : "2022-05-18T18:04:20.964345128Z",
						"build_snapshot" : false,
						"lucene_version" : "8.11.1",
						"minimum_wire_compatibility_version" : "6.8.0",
						"minimum_index_compatibility_version" : "6.0.0-beta1"
					  },
					  "tagline" : "You Know, for Search"
					}
					

If it’s not working, you will get the reply:

Curl: (52) Empty reply from server

STEP 2: Step 2: Download Magento on Ubuntu Server

Install PHP 8.1:

sudo apt install php8.1-fpm

Install Composer, which is a PHP dependency manager.

sudo apt install -y composer

Create web root directory for Magento.

sudo mkdir -p /var/www/magento/

Create the .config directory for the www-data user.

sudo mkdir -p /var/www/.config/

Make sure the www-data user can write to this directory.

sudo chown www-data:www-data /var/www/ -R

Install the necessary PHP extensions.

sudo apt install -y php-imagick php8.1-fpm php8.1-mbstring php8.1-soap php8.1-bcmath php8.1-xml php8.1-mysql php8.1-common php8.1-gd php8.1-cli php8.1-curl php8.1-zip php8.1-intl

Change to the /var/www/ directory.

cd /var/www/

Create the Magento project.

sudo -u www-data composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition magento

The repo.magento.com URL requires user authentication. Go to https://marketplace.magento.com/ to create an account, then go to this URL (https://marketplace.magento.com/customer/accessKeys/) to create an access key for Magento 2. Use the Public key as your username and the Private key as your password.

Next, run the following commands to set file permissions.

cd /var/www/magento/

sudo find var generated vendor pub/static pub/media app/etc -type f -exec chmod g+w {} +

sudo find var generated vendor pub/static pub/media app/etc -type d -exec chmod g+ws {} +

sudo chown -R :www-data .

sudo chmod u+x bin/magento

STEP 3: Install MySQL Database Server

Magento currently supports: MySQL-8, MySQL-5.7, MariaDB-10.4. MariaDB 10.5 or higher is not supported. Ubuntu 22.04 repository includes MariaDB 10.6, so we will choose MySQL instead of MariaDB.

Run the following command to install MySQL 8.0 from the default Ubuntu repository.

sudo apt install mysql-server-8.0

Once it’s installed, MySQL server will be automatically started, as can be seen with:

sudo systemctl status mysql

If it’s not running, you can start with:

sudo systemctl enable --now mysql

STEP 4: Create a Database and User for Magento Site

Log into MySQL console as root with the following command.

sudo mysql -u root

Once you are logged in, create a database for Magento using the following command. I named it magento, but you can use whatever name you like such as your site name. (Don’t leave out the semicolon.)

CREATE DATABASE magento;

Then enter the command below to create a database user for Magento. Replace magento_password with your preferred password.

CREATE USER 'magento'@'localhost' IDENTIFIED BY 'magento_password';

Next, grant permissions to this user.

GRANT ALL PRIVILEGES ON magento.* to 'magento'@'localhost';

Flush the privileges table for the changes to take effect and then get out of MySQL console.

FLUSH PRIVILEGES;
						
						EXIT

Step 4: Set Up Nginx Virtual Host

Make sure you are in the /var/www/magento/ directory.

cd /var/www/magento/

Run the following command to install Magento.

sudo -u www-data bin/magento setup:install --base-url=http://example.com --use-secure=1 --base-url-secure=https://example.com --use-secure-admin=1 --db-host=localhost --db-name=magento --db-user=magento --db-password=magento_password --admin-firstname=super --admin-lastname=admin --admin-email=admin@example.com --admin-user=admin --admin-password=admin_password --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1 --elasticsearch-host=http://127.0.0.1 --elasticsearch-port=9200 --elasticsearch-enable-auth=0
						

Replace:

• example.com with your real domain name.

• magento_password with the password created in step 5.

• admin@example.com with your preferred admin email address.

• admin_password with your preferred admin password.

The installation process is pretty fast. As you can see, Magento is installed successfully.

If you encounter the following error in the installation process, it’s because ElasticSearch isn’t running or you configured it wrong.

 Could not validate a connection to Elasticsearch. No alive nodes found in your cluster

Now create Magento Cron jobs.

sudo -u www-data php8.1 bin/magento cron:install

This will add the cron job in the www-data user’s crontab file. You can check it with:

sudo -u www-data crontab -l

Output:

#~ MAGENTO START d1957f62aa710cc367525c9ec68dd7456d4311756b5aa37d2143c4a98b25318c
						* * * * * /usr/bin/php8.1 /var/www/magento/bin/magento cron:run 2>&1 | grep -v "Ran jobs by schedule" >> /var/www/magento/var/log/magento.cron.log
						#~ MAGENTO END d1957f62aa710cc367525c9ec68dd7456d4311756b5aa37d2143c4a98b25318c
						

The Magento installer gives us the admin URI. Each Magento may have a unique admin URI, so you need to remember or bookmark it in your web browser.  Next, we need to set up Nginx web server in order to access the admin panel.

STEP 5: Set Up Nginx Virtual Host

Install Nginx web server.

sudo apt install nginx

Remove the default virtual host.

sudo rm /etc/nginx/sites-enabled/default

Magento ships with a sample Nginx config file in /var/www/magento/ directory. Move it to the /etc/nginx/conf.d/ directory.

sudo mv /var/www/magento/nginx.conf.sample /etc/nginx/conf.d/magento.sample

We create a new virtual host file for Magento in the /etc/nginx/conf.d/ directory. The file name must end with .conf.

sudo nano /etc/nginx/conf.d/magento.conf

Put the following texts into the file. Replace the red texts with your own domain name. Don’t forget to create DNS A records for your domain name in your DNS zone editor.

upstream fastcgi_backend {
   server unix:/var/run/php/php8.1-fpm.sock;
}

server {
  listen 80;
  listen [::]:80;
  server_name www.example.com example.com;
  set $MAGE_ROOT /var/www/magento/;
  include /etc/nginx/conf.d/magento.sample;
  client_max_body_size 2M;

  access_log /var/log/nginx/magento.access;
  error_log /var/log/nginx/magento.error;
}

Save and close the file. Then test Nginx configurations.

sudo nginx -t

If the test is successful, reload Nginx.

sudo systemctl reload nginx

Enter your domain name in the browser address bar and the default Magento page will show up.

example.com

To install other services, continue reading the following document Document setup SMTP,HTTPS

Tip: How to disable Two factor Authentication module in Magento:

run below command in terminal Magento root path :

bin/magento module:disable Magento_TwoFactorAuth
bin/magento cache:flush

Watch below video to know how to enable the frontend builder

In backend, go to MGS → Front-end Builder. On General section. You can see Active Front-end Builder field. Change value to Yes.

Click Save Config button. After that, clear cache in 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!

On home page, for any section, you can see the button "Add New Block":

Click to this button to add new block

Multiple block types can be added

• Text content & Images
• Owl Carousel Slider
• Promo Banner
• Products by Category
• New products
• Products by Attribute
• Sale Products
• Product Tabs
• Deals Block
• Single Product
• Latest Posts
• Testimonial
• Portfolio
• Lookbook
• Lookbook Slider
• Snapppt Shop
• ...

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

• Block col (12 to full): Set width (%) for blocks on desktop, tablet and mobile screen.

  

• Hide: You can set blocks hidden on desktop, tablet or mobile
• Custom class: Add class for block. You can call classes of bootstrap to set width block on Tablet screen (col-sm-*) and Mobile screen (col-xs-*).

• Main color: Set main color for blocks.

• Background: Set background for blocks (background color or background image).

• Block Animation: Blocks animation effects when page loaded
• Animation Delay: Delay of animation effects

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

• Arrows button: You can drag & drop block to change position. But block can't be moved 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 on Edit

Change to tab Embed Code

If you imported a sample homepage and had some sample static blocks, you only need to enable the builder then edit your homepage directly on the frontend.

Demo:

If you want to create a new one, please follow below steps:

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

Click SHOW / HIDE EDITOR

Then you can add your content ( text/html ) to it

Images

To upload a new image, click Upload new Image. button

Then if you want to add an image to the content, click directly on code to copy:

Then paste in Content tab

After the configuration is completed, click SUBMIT button to create a static block

If you imported a sample homepage and had a sample slider, you only need to enable the builder then edit directly on the frontend.

If you want to create a new OWL Slider, follow below steps:

On Home page builder, click Add New Block button.

Config Block

Manage Images

Upload New Image

Manage Slide

Clicking Add New Slide button

then:

Here you can select an image, link, text, text animation for your slide

Then click Submit button

Slider Config

Here you can select some options for your slider, please try to see the difference ;)

After you complete configuring the slider, click SUBMIT button to save config and create owl slider.

Edit File config.php

Go to the root folder on your Web Server, open file config.php in directory 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 default effects
• Custom Class: Add custom class to style css for this.
• Status: Enabled or Disabled this banner

Click Save button to finish creating new banner.

If you imported a sample homepage and had some sample promo banners, you only need to enable the builder then edit directly on the frontend.

Demo

On Home page builder, click Add New Block button.

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

Banner Config Tab

General

Here you can set some general options for your banner as general color, background color or image and some other settings, just select and experient

Banner Config

Here you can upload banner image, set url when you click on the banner, add text to banner, add button, adjust text's position, color of button,....

After configuring your banner is completed, just click Submit button to save your banner

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

    

• User Slider: add owl carousel for block product.

  If you use slider, you can see more options to config owl slider:

  

  • Auto play
  • Stop autoplay on mouse hover
  • Display navigation
  • Display pagination
  
  

Category Config Tab

Choose categories to filter products by selecting categories.

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

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

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

On the field next to To. You can set day for product to be out of being 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

    

• User Slider: add owl carousel for product block.

  If you use slider, you can see more config to owl slider:

  

  • Auto play
  • Stop autoplay on mouse hover
  • Display navigation
  • Display pagination
  
  

Category Config Tab

Choose categories to filter product by selecting categories.

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

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 these three sections in your store system where the appearance of attribute would be approved.
• Apply the Unique Value, if you do 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 label field. In case of multiple languages are supported on your store, insert the translation of the title for each storeview.

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 on catalog listing page, choose Yes in the Visible on Catalog Pages on Storefront field.
• If Product Listing is supported, the attribute can be appeared and used as sorting parameter. Configure it 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).

Demo

This is a product's block, to show the products on this block, please follow below steps:

• Step 1: Create a Yes/No attribute(for example Trending) (if you feel confused with the product attribute, you can refer this article )
• Step 2:In backend, go to PRODUCTS → Catalog. Edit product you want to add attributes .



• Step 3:

  On Home page builder, click Add New Block button.

  

  On popup list blocks, click "Product by attribute"

  

• Step 4: Then config block, note that you need choose attribute field

  

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.
• Set time for 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

    

• 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
  
  

Category Config Tab

Choose categories to filter product by selecting categories.

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

If you imported a demo homepage, you only need to enable the builder and edit it

To create a new Products Tab block, click Add New Block and select Product Tabs

Then config tab and product

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.

Product Config Tab

• Number of product to display
• Item per row

• 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

Category Config Tab

Choose categories to filter product by selecting categories.

This is a product's block, to show the products to this block, please follow below steps:

• Step 1: Config Product to Sale

In backend, go to PRODUCTS → Catalog → Edit product



In the basic settings panel, Click Advanced Pricing link



Advanced Pricing panel:



• Enter the number of the Special Price.
• Set time for 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.



• Step 2:

  On Home page builder, click Add New Block button.

  

  On popup list blocks, click "Deals"

  

• Step 3: Then config deal 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

• Hide product name
• Hide review
• Hide price
• Hide add to cart
• Hide add to wishlist
• Hide add to compare
• Hide short description

If you imported a demo homepage, you only need to enable the builder and edit it

IMPORTANT: you have to creat the blog item in admin first:

• Go to admin MGS -> Manage Posts then create your posts

Save Config and refresh Magento Cache

To create a new Latest Post block, click Add New Block then select Latest Post

In Post Config:

1. Set the number of posts display
2. The number of posts per row on the Desktop
3. The number of posts per row on the Tablet
4. The number of posts per row on the Mobile
5. We have some view modes, you can change them and select as you like

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.

The Claue theme has 9 homepages:

• Home Furniture
• Home Banner
• Home Minimalist
• Home Classic
• Home Video Banner
• Home Decor
• Home Digital
• Home Glasses
• Home Food

Go to Admin -> MGS -> Front-end Builder [General]

• Active Front-end Builder: Set "Yes" to use Front-end Builder
• Disabled Widgets on Homepage & CMS Pages: Enabled or Disabled
• Disabled Widgets on Category Pages: Enabled or Disabled
• Width of section container: Enter width of container
• Columns padding: Enter padding value for columns

Go to Admin -> MGS -> Front-end Builder [Social]

Setting to use Instagram block. Click here to see more detail

Go to Admin -> MGS -> Front-end Builder [OWL Slider (Single Slide)]

• Navigation: Setting navigation type, width, height, font-size, color, border, background
• Pagination: Setting width, height, border, background

Go to Admin -> MGS -> Front-end Builder [OWL Slider (Multiple Slides)]

Setting is the same with OWL Slider (Single Slide) however they apply for Multiple Silders

In Backend, go to MGS -> Front-end Builder -> [Custom Style] -> Custom Style

You can add your own custom style for your site.

In Backend, go to MGS -> Front-end Builder -> [Export - Import - Restore]

• Export: You can export any page by Choosing page to export -> click Export button
• Import: Click here to see more detail
• Restore Version: After import a xml page, theme will save it. Therefore you can use these pages anytime you want



• Delete Version: Click to Delete button to delete version unneccessary
• Import Static Block: Click here to see more detail

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

• 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.
• Display back to top icon: Enabled or Disabled
• Enable Lazy Load: Enabled or Disabled
• Lazy Load Image: Upload image for lazyload

Go to Admin -> MGS -> MGS Theme Settings [Header]

• Header version: You can choose one of 7 header versions
• Header absolute: Enable or Disable
• Logo on mobile: Upload logo for mobile
• Elements: Choose elements which appear on header
• Minicart type: Choose minicart type
• Search type: Choose search type
• Sticky menu: Enable or Disable
• Sticky menu on mobile: Enable or Disable
• My Account type: Choose my account type
• Display login form: Enable or Disable

Go to Admin -> MGS -> MGS Theme Settings [Footer]

• Footer version: You can choose one of 6 footer version
• Parallax: Enable or Disable
• Use Custom Copyright: Enable or Disable

Go to Admin -> MGS -> MGS Theme Settings [Catalog (General Setting of Category Page and Catalog Search Page)]

• New label: Enter name of new lable
• Sale label: Enter name of sale lable
• Display "Sale" label with Discount percent: Enable or Disable
• Hide Review: Enable or Disable
• Hide Add to Cart button: Enable or Disable
• Hide Add to Wishlist button: Enable or Disable
• Hide Add to Compare button: Enable or Disable
• Enable Hover Change Image: Enable or Disable

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

With Catalog Settings, you can config:

• Default Page Layout: 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 of product per row for product grid mode.

• Category Image position: Config position of image category

• Category Description position: Config position of description

• CMS Block position: Config position of CMS block

• Enable change product per row: You can change product show per row

• Values number product per row to show: Config number of product per row

• Default value number product per row: Config default number of product per row

With Catalog Breadcrumbs Settings , you can config:

• Page Title and Breadcrumb Layout : choose the breadcrumb design styles in the Category Page.

• Show Position Page Title: choose where to display page title when choosing layout Breadcrumbs display outside the page title

Go to Admin -> MGS -> MGS Theme Settings [Catalog Search Page]

• Default Page Layout: Choose layout for search page
• Number of Products per row (Desktop): Set number of product appear pew row on desktop
• Number of Products per row (Tablet): Set number of product appear pew row on tablet
• Number of Products per row (Mobile): Set number of product appear pew row on mobile

Go to Admin -> MGS -> MGS Theme Settings [Product Details Page]

With Product Details Settings, you can config product detail page:

• Default Page Layout: Choose layout for product detail page
• Default Template: Choose template for product detail page
• Show Sku: Enable or Disable
• Show Stock Status: Enable or Disable
• Show Reviews Summary: Enable or Disable
• Show Add to Wishlist Link: Enable or Disable
• Show Add to Compare Link: Enable or Disable
• Show Short Description: Enable or Disable
• Show Upsell Products: Enable or Disable
• Show Email to Friend: Enable or Disable

With Product Details Breadcrumbs Settings , you can config:

• Page Title and Breadcrumb Layout : choose the breadcrumb design styles in the Category Page.

• Show Position Page Title: choose where to display page title when choosing layout Breadcrumbs display outside the page title

Go to Admin -> MGS -> MGS Theme Settings [Product Image Dimention]

With Product Details Settings, you can config product detail page:

• Product detail (big images): Set dimension for big image on product detail page
• Product detail (small images): Set dimension for small image (thumbnail) on product detail page
• Product tabs: Set dimension for image on product tabs
• Grid mode: Set dimension for image on grid mode
• Default list mode: Set dimension for image on default list mode
• Mini Cart: Set dimension for image on mini cart
• Shopping Cart: Set dimension for image on shopping cart
• Small list mode: Set dimension for image on small list mode
• Width of 3D View: Set dimension for image 3D

Go to Admin -> MGS -> MGS Theme Settings [Shopping Cart Page]

• Show Coupon Code form: Enable or Disable
• Show Cross-Sell Products: Enable or Disable

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

You can enabled or disabled link on customer Navigation Links

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

Demo

Go to Admin -> MGS ->MGS Theme Settings [Contact Us Page]

• Page Layout: Choose layout for Contact page
• Display Google Map: Enable or Disable. If you set Enable, you must set Map Type and Embed Code

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 -> Theme Settings [Share This]

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

Go to Admin -> MGS ->MGS Theme Settings [Page Title and Breadcrumb]

• Page Title and Breadcrumb Layout: Choose layout for Page Title and Breadcrumb
• Background Type: Choose background type
• Background Repeat: Enable or Disable
• Use Category Image (Only current category: Enable or Disable

To increase performance and speed of website, you can go to Admin -> MGS ->MGS Theme Settings [Optimize Website] and Enable Optimize

Declare your font

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 -> Font Setting -> Custom Font Family

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

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

In Backend, go to MGS -> Font Settings -> [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 if you want. Input css selectors to textarea Element use font and choose font use for it.

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

You can set color for:

• Background (background color, background image)
• Text & Link (link color, text color, price color)
• Button (background color, border color, text color)

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

You can set color for:

• Header background (Background, border color text color, link color, link hover color)
• Top header (Background color, link color, link hover color, text color)
• Middle header(Background, border color, text color, link color, link hover color)
• Bottom header(Background, border color, text color, link color, link hover color)

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

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

You can set color for:

• Menu color
• Dropdown color

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 set color for:

• Top footer (Background, text color, link color, icon color)
• Middle footer (Background, text color, link color, icon color)
• Bottom footer (Background, text color, link color, icon color)

First, You must 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

Then change role of image to 3D Thumbnail

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.

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.

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

Search static block "mgs_product_detail_top_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-content" -> Edit code in this div

Category Landing Compatible With Magento 2.2+

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

On Edit Categoy page, scroll to MGS Category 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

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

• Page Title: Enter Page Title
• Page Template: Choose page template
• Number Of Product Per Row: Set number of product per row
• Show Brand Name: Enable or Disable
• Show Product Count: Enable or Disable
• Show Featured Brands: Enable or Disable
• Meta Keywords, Meta Description, Description: Enter keywords and description of brand list

View Page Settings

• Page Template: Choose template for brand page

Product Page Settings

Sidebar Settings

• Enable: Enabled or Disabled
• Show Product Count: Enabled or Disabled
• Default Number Of Brands Will Display: Set number of brand show on sidebar

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.

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

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

• Menu: Choose parent Megamenu
• Title: Title show on menu.
• Menu Type: You can select "Catalog Category" or "Static Content"
• Link: Url of this menu item ( please use an absolute url, for example: "your_url_site/about-us", not only "about-us" )
• Position: Position on this menu item with other items
• Columns: Column sub menu of this.
• Custom Class: If you want add orther style for this.
• Special Html: Add label for menu item, like this http://prntscr.com/my3n5w with sameple data: <span class="label-menu">New</span>

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:

    

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 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 of comments show first and number of comments 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 wull be auto created 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 will be auto created 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

  • Filter post by category: Choose category post

  • Grid:

  • List:

• Hide Thumbnail
• Hide Short Description

• 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

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

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.

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 will be auto created 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 will be created 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.

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.

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

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.

• Animation type: Choose type how minicart appear
• Message: Enter message after add product to cart
• Show upsell products: Enable or Disable
• Show "Checkout" button: Enable or Disable
• Show "View Shopping Cart" button: Enable or Disable

DEMO:

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 -> MGS -> Lookbook [Configuration]

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

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

• Enable / Disable Module: Choose Yes to use module
• Search results page: There are 2 result pages, you can choose one of them
• Number of search results dropdown: Set number of search result
• View more label: Enter text of lable

Additional Product Search

• Enable / Disable product search: Enable or Disable
• Products per Page on Grid Default Value: Set number of product per page
• Show Short Description: Enable or Disable
• Show Review: Enable or Disable
• Sort order: set order for result search

Additional Category Search

• Enable / Disable category search: Enable or Disable
• Categories per Page on Grid Allowed Values number of products per page which is allowed
• Categories per Page on Grid Default Value: number of products per page
• Allow All Categories per Page: Enable or Disable
• Sort order: set order for result search

Additional CMS Page Search

• Enable / Disable cms page search: Enable or Disable
• Categories per Page on Grid Allowed Values number of products per page which is allowed
• Categories per Page on Grid Default Value: number of products per page
• Allow All Categories per Page: Enable or Disable
• Sort order: set order for result search

Additional Blog Search

• Enable / Disable blog search: Enable or Disable
• Categories per Page on Grid Allowed Values number of products per page which is allowed
• Categories per Page on Grid Default Value: number of products per page
• Allow All Categories per Page: Enable or Disable
• Sort order: set order for result search

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

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

Steps to Create Child Theme in Magento 2:

• 1. Create a child theme folder named as {parent-theme-name}_child in the following folder pathName your child theme related to the parent theme. It can be anything that is developer friendly!
• 2. Create file theme.xml inside the child theme to specify the parent theme inherited by the child theme <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>{Child Theme Name}</title> <parent>{parent-theme-vendor-name}/{parent-theme-name}</parent> <media> <preview_image>media/preview.png</preview_image> </media> </theme>
• 3. Create a registration.php file for registering your child theme <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Meetanshi/luma_child', __DIR__ );
• 4. The admin panel shows the created child theme

  

  

• 5. Take a backup of pub/static folder for images, CSS, and js. Also, delete the static folder and run static content deploy.
• 6. Go to the Magento root folder in your terminal and deploy static content using the following command php bin/magento setup:static-content:deploy -f

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

General Setting

• Use Ajax: Enable or Disable
• Default Expanded Filter: Enable or Disable
• Remove Shopping By :

Demo:



• Filter By Text :

Demo:



• Filter Price button text:

Demo:

On Home page builder, click Add New Block button.

On popup list blocks, click "Text Content & Images"

Step 1: Create element html:

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

Banner Video Demo Code:

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.

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/supro if you want use Supro 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/Fbuilder/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 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() ?>

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>