MGS Frontend CMS Builder Documentation

MGS Frontend CMS Builder for Magento 2 Documentation v1.0

Click here to see our Builder introduction.

Magento 2 CMS Builder is an extension allowing you to edit CMS pages effortlessly and visually at front-end. As a result, you can see what you've performed instantly whether it is a minimal adjustment right on user interface. No coding knowledge requires.

Fully compatible with Magento 2.1.x, Magento 2.2.x, Magento 2.3.x.

To install our extension, follow these steps:

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

With General Settings, you can config:

• Active Front-end Builder: Enable or Disable Builder extension

• Disable Widgets on Homepage & CMS Pages: Make widgets for homepage and cms page be invisible in CONTENT > Widgets

• Width of section container: Set default width for the container of section builder.

• Columns padding: Set padding left and right values for columns builder

Go to Admin -> MGS -> Front-end Builder [Html Structure]

With Html Structure Settings, you can config:

• Grid Mode: Custom Config layout for Grid Mode of catalog elements.

• List Mode: Custom Config layout for List Mode of catalog elements.

• Deal Product Grid Mode: Custom Config layout for Grid Mode of Deal Product elements.

• Deal Product List Mode: Custom Config layout for List Mode of Deal Product elements.

• Single Product: Custom Config layout for Single Product elements.

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

With Social Settings, you can config:

• Instagram [Access Token]: Insert Access Token for your Instagram Shop

• Snapppt [Embed Code]: Insert Embed Code for your Snapppt

• Google [Google API Key]: Insert the Google API Key

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

With OWL Slider (Single Slide) Settings, you can config:

• Navigation section: Settings for the navigation.

  • Navigation Type: Choose between Use Front Icon or Use Image.

  • Next font class and Previous font class:Insert the class CSS for your previous and next icon.

  • Width - Height - Font size: Config the width height value of your navigation, and the font size used in it.

  • Border radius: Set value for the navigation radius border.

  • Default section: Settings for the navigation without any mouse effects.

  • Hover section: Settings for the navigation once.

• Pagination section: Settings for the pagination of slider with: Width, Height, Border radius, Background.

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

Similar to OWL Slider (Single Slide) Settings, you can config Navigation, Pagination and others detailed settings.

• Navigation section: Settings for the navigation.

  • Navigation Type: Choose between Use Front Icon or Use Image

  • Next font class and Previous font class:Insert the class CSS for your previous and next icon

  • Width - Height - Font size: Config the width height value of your navigation, and the font size used in it

  • Border radius: Set value for the navigation radius border

  • Default section: Settings for the navigation without any mouse effects

  • Hover section: Settings for the navigation once

• Pagination section: Settings for the pagination of slider with: Width, Height, Border radius, Background.

Go to Admin -> MGS -> Front-end Builder [Font & Style]

With Font & Style Settings, you can config:

• Include font Awesome: Choose to include font Awesome 4.7.0 style if you have not had fontAwesome

• Custom style: Quickly put any additional custom style here.

• In backend, go to MGS → General Settings.

• On General section, you can see field Active Front-end Builder. Change value to Yes.

• You may need to choose allowed pages in the next step, click here to see more details

• 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 switcher Active Builder on top panel. Click to turn on it and activate Front-end Builder.

• MGS Front-end Builder is Ready to be used!

This is rule applying for all builder's account. When you active builder account, you can see a list of available CMS pages

• Click to choose the page you want to apply builder. You can hold Ctrl button on your keyboard to choose multiple items



• In case you want apply Builder for all pages, you should choose All CMS Pages option



• Click Save customer to finish the setting.

• Now you can see that only selected page can apply Builder. Others cannot active Builder in any case

• When builder is active, go to the pages that you apply editing rule.

• Should you see a switcher Active Builder on top panel, click it to enable Builder Frontend Editor



• Wait for page to reload, You can see Builder frontend editor is ready.

The section defines blocks in home page content.

• Right after you enable Builder, you can see the button Add New Section

• Click this button to create a new section. After waiting for a while, 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.
• Copy button: Duplicate this section.
• Remove button: Remove this section. If section has child blocks, remove section means that you agree to remove all child blocks).

Config Section

After clicking the Config button of section, a popup to config section will be shown:

General Tab

• Class name: Add custom class for section
• Full width: Choose Yes to config width of section to 100%;
• No padding: Choose Yes to remove padding of section
• Background gradient: Choose Yes to config the gradient color effect for background
• Background color: Config background color for section. You can input Hexadecimal color values to field or use Color picker tool on the right.

• Background image: Config background image for section. You can upload an image from your computer.

  If you add background image, you can see checkbox Remove background to remove background image next time.

  

• 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 Tab

• On config column, you can see options for layout section (border red on the demo image). This config applies for most desktop resolution.

• Based on the illustration, choose the best division that suitable with your requirement.



MGS Front-end Builder use bootstrap grid

• Or you can input the number by yourself, provide that the sum of 2 columns must equal to 12.



• After choosing config column, there will be a more detailed configuration for tablet and mobile resolution for you to set if you need.

• On CMS page, for any section, you can see Add New Block button



• Click this button to add new block

You can see 25+ available elements divided into 4 main groups. Click to see the details.

• Static Content: General contents which are designed for various different purposes.

  • Headings
  • Text content & Images
  • Images
  • Owl Carousel Slider
  • Masonry Gallery
  • Promo Banner
  • Profile
  • Accordion
  • Video
  • Google Map
  • Content Box
  • Counter Box
  • Countdown Box
  • Chart
  • Progress Bar
  • Progress Circle
  • Divider
  • List
  • Button
  • Table
  • Tabs
  • Modal Popup
  • Form

• Catalog: Elements related to category and products.

  • Category List
  • Category Products
  • New Products
  • Products by Attribute
  • Sale Products
  • Top Rate Products
  • Daily Deals
  • Product Tabs
  • Single Product

• Social: CMS blocks support popular social networks.

  • Facebook Fanbox
  • Twitter Timeline
  • Instagram
  • Instagram Shop

• Mageplaza Extensions: Extra extensions from Mageplaza that we recommend you to use.

  • Banner Slider
  • Blog Post
  • Countdown Timer
  • Daily Deal
  • Brands
  • Product Slider

Each block will have different settings, but there are some similar settings on General tab.

General Tab settings for all Builder Element

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

  

  Explanation of how block col works in any resolution

• Hidden: Choose to hide the block on any resolution of desktop, tablet of mobile.
• Custom class: Add CSS class of block for styling.
• Block Animation: Animation effect of the block when page load. Click to choose one in the list.
• Animation Delay: Delay of animation effect

After configuring & saving block, you can see the demonstration of this element, also the group button to edit this block.

• Arrows button: You can drag & drop block to change position. Remember that, the block can't be moved out section or section col.
• Pencil button: Edit settings of that block.
• Copy button: Duplicate that block
• Columns button: Shortcuts to change the Block col
• Trash button: Remove block.

After finishing creating and editing your cms page, click Publish button at the top left of the page

Wait for the page to reload, now you can see the page is still in editing mode, but it has saved all your data

If you want to get out of editing mode, switch off Active Builder button to see your result

• Go to Catalog -> Categories and click the category you want to edit at the left category tree.
• In the tab Content find out Description field.
• Shoud you see the Copy Description Template button, click it and you will see a pop up box.


• This box allows you to enter the Category Id of the Source Category. It means that this is the category which has the landing page built by Builder that you want to duplicate.

• Click Check button to start searching processs.

  • If the Category Id you entered exists, button Apply will be shown. Click it the to let the system know your request.

  

  • Otherwise, there is nothing changed, you should check the Category Id again.

• After you have done, click Save button at the top to finish the process.

This way of uploading image can be applied for all Builder elements related to images

Images Tab

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



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



• Click Upload button and wait for the system to 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 to remove image, tick checkbox on image row.



• Click Submit button then this image will be successfully removed.

Demo

The Heading Element,from h1 to h6 with many options (text align, font, color, border...) helps to make the heading as you want.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Heading" item.

Heading Config Tab

General

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

Content Config

Here you can configure the heading content as follows:

• Heading: Type of heading. H1 is the biggest heading and H6 is the smallest one.
• Heading text: Content of heading.
• Text align: 3 types of align: Left, Center and Right.
• Font Size, Font Color, Font Bold, Font Italic, Uppercase: Configuration to customize the heading.
• Show border: Enable to display a border under heading.

After completing your configuration, just click Submit button to save your block.

Demo:

Demo of 4 "Text and images" blocks in a section

Demo of "Text and images" block applied for Newsletter section

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 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 to the content in Content tab

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

Demo

Image element includes 2 types of image frames ("Single Image" and "Before & After") with 7 hover effects to help your images stand out.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Images" button.

Config Block

View Config Tab

• Block Type: Choose display type for your image.
• Image: Click the button to choose the image file from your computer.
• Effect: Click to choose the effect for your image.
• Use Lightbox: Choose Yes to display the Lightbox.
• Url: Enter the Url that you want your image to be linked to.
• Border Width: Enter the width value you want for your image border. (px unit)
• Border Color: Enter the HEX color value you want for your image border. Or you can choose the color picker tool nearby.
• Border Radius: Enter the radius value you want for your image.
• Box Shadow: Choose Yes to display the shadow of your image.

Click SUBMIT button to save config and create image block.

Demo

OWL Carousel element helps to create a beautiful, responsive carousel slider for your webpage.

To see the visual demonstration, click here.

- Click here to set backend configurations for Single Slide OWL Carousel.

- Click here to set backend configurations for Multiple Slides OWL Carousel.

On Home page builder, click Add New Block button.

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

Config Block

Manage 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 for more details.

Manage Slide Tab

• Click the Add New Slide button to add a new slide for your slider.

• Choose the image you want to add to slide, and then click Submit button.



• Do it respectively to add more slides.

Slider Config Tab

• Number of items on slide (3 resolutions): Default value is 1 image on a slide for correlative resolution.
• Preload: Choose Yes to enable the preload.
• Height Preload: Enter the height value for the preload
• Margin right: The value of the right margin on each item.
• RTL: Choose Yes to enable the Right to Left layout.
• Full Height: Choose Yes to let the slider be full its height.
• Auto play: Choose Yes to let the slider auto play.
• Auto play speed: Display when auto play is Yes. Insert the value of auto play speed among slides.
• Stop auto play on mouse hover: Choose Yes to stop the slider from playing when user hover their mouse.
• Display navigation: Choose Yes to show the navigation icon on slide.
• Navigation position: Choose the place where navigation icons will be displayed.
• Auto hide navigation: Choose Yes to let the navigation disappear while no mouse hover event.
• Display pagination: Choose Yes to display the indicator on slide.
• Loop: Choose Yes to let the slide play in loop among images.

Click SUBMIT button to save config and create owl slider.

Demo

The Masonry Gallery element is perfect way to showcase a set of images.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Masonry Gallery" button.

Config Block

Manage Images Tab

See how to upload image here.

Masonry Config Tab

• Number of columns: Number of columns displayed in Gallery.
• Item margin: Enter the margin value among images.
• Hover effect: Choose the effect when hover on image.
• Use LightBox: Choose Yes to use lightbox for the Gallery.
• Border Width: Enter the width value you want for your image border. (px unit)
• Border Color: Enter the HEX color value you want for your image border. Or you can choose the color picker tool nearby.
• Border Radius: Enter the radius value you want for your image.
• Box Shadow: Choose Yes to display the shadow of your image.

Click SUBMIT button to save config and create Masonry Gallery.

Demo

The Promo Banner element helps to create catchy banners with 11+ nicer effects.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

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

Banner Config Tab

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 completing your banner, just click Submit button to save your banner.

Demo

The Profile element with several customization options to utilise you have the power to display your staff, team or favourite people with style and ease.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Profile" button.

Config Block

Profile Config Tab

See how to upload image here.

Besides, you can make some configurations related to Name, Subtitle, Color... to customize your block.

Click SUBMIT button to save config and create Profile block.

Demo

The Accordion element are perfect for adding multiple sections of varied content to your website, and actively selecting which to show or hide at any time.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Accordion" button.

Config Block

Content Config Tab

• Click Add New Item button to add a new accordion item.

• Insert the title, position and content of accordion in the blanks

• Do it similarly to add more accordion items.

  .

View Config Tab

Enter values that you want to set for the accordion style, about color, title, icon, font style...

Click SUBMIT button to save config and create Masonry Gallery.

Demo

The Video element helps to embed Youtube and Vimeo videos to your webpage with many options.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On Home page builder, click Add New Block button.

On popup list blocks, click "Video" item.

Banner Config Tab

General

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

Video Config

Here you can:

• Video URL: Paste Youtube video URL or Vimeo video URL.
• Full Width: Enable to set your video as full screen width. If not, you can enter the fixed width and height value in px unit
• Autoplay: Enable to let the video play automatically.
• Hide video information: Enable to the video information be hidden.
• Hide video controls: Enable to the video control panel be hidden.
• Loop video: Enable to the video repeat.
• Mute: Enable to mute the video.

After completing your configuration, just click Submit button to save your block.

Demo

The Map element helps to add Google map to your webpage.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Google Map" button.

Config Block

Map Config Tab

Enter values also needed settings that you want to set for the Google Map style.

Click Submit button to save your data.

Demo

The Content Box element helps to create content box with many options for your webpage.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Content Box" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Content Box style, about the icon, title, description...

Click Submit button to save your data.

Demo

The Counter Box element helps to create animated counter elements for your webpage with many options.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Counter Box" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Counter Box style, about the icon, title, description...

Click Submit button to save your data.

Demo

The Countdown Box element helps to show your visitors a countdown to a special event, sale, anniversary.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Countdown Box" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Countdown Box style, about the date and text.

Click Submit button to save your data.

Demo

The Chart element is an elegant, powerful and beautiful tool that allows you to publish gorgeous charts.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Chart" button.

Config Block

Content Config Tab

• Type: Choose type of chart.

• Width and Height: Set width and height for the chart.

• Timeline: Click Add timeline point button to add a new timeline point to the chart. Enter its label above.

• Items: Click Add item button to add a new item to the chart. Enter its information above.

Demo

The Progress Bar element is a graphical control element used to visualize the progression of an extended operation such as a download, file transfer, or installation.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Progress Bar" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Progress Bar style, about the percent, title...

Click Submit button to save your data.

Demo

The Progress Circle element is a great way to visually attract the viewer and display content eg: sales percentages, skill levels, promotional levels.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Progress Circle" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Progress Circle style, about the percent, title, progress...

Click Submit button to save your data.

Demo

The Divider element are perfect to use to break up content and draw the users eye to the next section.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Divider" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Divider style.

Click Submit button to save your data.

Demo

The Checklist element allows you to easily add beautifully styled lists anywhere to your site.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "List" button.

Config Block

Content Config Tab

Click Add new item button to add a new list item. Enter its content in the blank above.

View Config Tab

Enter values also needed settings that you want to set for the List style.

Click Submit button to save your data.

Demo

The Button element are an integral part of your site, and we’ve made sure you have the options you need to add beautiful buttons to any page.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Button" button.

Config Block

Content Config Tab

Enter values also needed settings that you want to set for the Button style.

Click Submit button to save your data.

Demo

The Table element helps to create eye-catching tables to display various kinds of content with unlimited columns.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Table" button.

Config Block

Table Config Tab

Click the table button to add a new table, or edit an existed one

Insert the table information in the box. Click Insert button to confirm.

View Config Tab

Enter values also needed settings that you want to set for the Table style.

Click Submit button to save your data.

Demo

The Tabs element are perfect for displaying a bunch of organized information in a small area.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Tab" button.

Config Block

Content Config Tab

Click Add new item button to add a new tab. Enter its content in the blank above.

View Config Tab

Enter values also needed settings that you want to set for the Tab style.

Click Submit button to save your data.

Demo

The Modal Popup element are perfect for displaying a bunch of organized information in a small area.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Modal Popup" button.

Config Block

Popup Content Tab

Using the editor, you can directly insert the content you want for your popup.

Otherwise, you can click Show/Hide Editor button to enter the content in HTML context.

Images Tab

See how to upload image here.

Popup Config Tab

Enter values also needed settings that you want to set for the Popup style.

Button Config Tab

Enter values also needed settings that you want to set for the button style. You can see the preview directly after you change values.

Finally, click Submit button to save your data.

Demo

The Form element helps to create send mail form with 8 different input types: text field, textarea, file, dropdown, radios, checkbox, multiple select, date.

To see the visual demonstration, click here.

On Home page builder, click Add New Block button.

On popup list blocks, click "Form" button.

Config Block

Fields Config Tab

Click Add new field button to add a new field to form. Enter its information in the blanks above.

Form Config Tab

Enter needed settings for your form:

• Send email to: Enter the email address of the recipient.

• Email subject: Enter the email subject for the mail.

• Use Captcha: Click to enable the captcha in the form.

• Email template top content: Enter the content for the top of the response email.

• Email template bottom content: Enter the content for the bottom of the response email.

• Success message: Enter the success message you want to show.

Button Config Tab

Enter values also needed settings that you want to set for the button style. You can see the preview directly after you change values.

Finally, click Submit button to save your data.

The Category List element helps to create list of categories with a lot of configurations.

To see the visual demonstration, click here.

• On Builder editor, click Add New Block button.



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

Config Block

Category Config Tab

• Click plus icon button to show sub categories.



• Choose categories to filter product by selecting categories.

View Config Tab

• View Mode: Choose the way to display your category list. There are 2 kinds of style:

  • Grid with Category Thumbnail Image:

    • Items per Row: Number of categories in a row.

    • Show Category Name: Choose Yes to show category name in the category list block.

    • Show Product Count: Choose Yes to show the number of products belonging to category.

    • Use Slider: Choose Yes to show list of category in a slider.

    • Category Name: Settings for category name including font size, font bold, font italic or uppercase.

    • Other text: Settings for other text appeared including font size, font bold, font italic or uppercase.

    • Colors: Set 5 color values used in category list.

  • List:

    • Items per Row: Number of categories in a row.

    • Title: Set the top title for category list.

    • Show Icon: Choose Yes to show the icon of category.

• Category Name: Settings for category name including font size, font bold, font italic or uppercase.

• Other text: Settings for other text appeared including font size, font bold, font italic or uppercase.

• Colors: Set 5 color values used in category list.

The Category Products element helps to show products by category with different view options (grid, list, slider, category tabs).

To see the visual demonstration, click here.

• On Builder editor, click Add New Block button.



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

Config Block

Product Config Tab

• Number of product to display: Limit the number of products shown.
• Item per row: Limit the number of items in a row on default resolution.
• Item per row (tablet): Limit the number of items in a row on tablet.
• Item per row (mobile): Limit the number of items in a row on mobile.

• View Mode:

  • Grid Mode

    

  • List Mode

    

• Hide Product Name: Choose Yes to let the product name disappear.
• Hide Review: Choose Yes to let the product review disappear.
• Hide Price: Choose Yes to hide the product price.
• Hide Add to Cart: Choose Yes to hide the Add to Cart button.
• Hide Add to Wishlist: Choose Yes to hide the Add to Wishlist button.
• Hide Add to Compare: Choose Yes to hide the Add to Compare button.

• Use Slider: Choose Yes to add Carousel Slider for block product.

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

  

  • RTL:Choose Yes to enable the Right to Left layout.
  • Number of row: The number of rows displayed in slider.
  • Auto play: Choose Yes to let the slide play automatically.
  • Stop autoplay on mouse hover: Choose Yes to stop the slide from playing when hover mouse.
  • Loop: Choose Yes to let the slide play in loop.
  • Display navigation: Choose Yes to display the navigation icons on the slide.
  • Display pagination: Choose Yes to display the pagination indicator on the slide.
  • Navigation slide by: Limit the number of items will be shown after each time you click on the navigation.
  
  

  Demo Product Slider:

  

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



• There you can see more settings for tab slide:

  • Tab Style: Choose one of the 7+ style in the list. You can see the demo below.
  • Font Bold, font Italic, Uppercase: Choose Yes to let the text in bold, in italic or in uppercase.
  • Align: Choose among Left, Center or Right for text align.
  • Font Size: Enter the value of font size (in px unit).
  • Primary Color, Secondary Color and Third Color: Choose the 3 main color for your category tab. You can enter the hex code color directly in the blank or use color picker tool at the right.

Demo New Product With Tab:

The New Products element helps to show new products, new product by categories with different view options (grid, list, slider, category tabs).

The Products By Attribute element helps to show products by attribute (Yes/No) with different view options (grid, list, slider, category tabs).

The Sale Products element helps to show sale products, new product by categories with different view options (grid, list, slider, category tabs).

The Top Rate Products element helps to show top rate products with different view options (grid, list, slider, category tabs).

To see the visual demonstration, click here.

• On Builder editor, click Add New Block button.



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

Config Block

Product Config Tab

• Number of product to display: Limit the number of products shown.
• Item per row: Limit the number of items in a row on default resolution.
• Item per row (tablet): Limit the number of items in a row on tablet.
• Item per row (mobile): Limit the number of items in a row on mobile.

• View Mode:

  • Grid Mode

    

  • List Mode

    

• Hide Product Name: Choose Yes to let the product name disappear.
• Hide Review: Choose Yes to let the product review disappear.
• Hide Price: Choose Yes to hide the product price.
• Hide Add to Cart: Choose Yes to hide the Add to Cart button.
• Hide Add to Wishlist: Choose Yes to hide the Add to Wishlist button.
• Hide Add to Compare: Choose Yes to hide the Add to Compare button.

• Use Slider: Choose Yes to add Carousel Slider for block product.

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

  

  • RTL:Choose Yes to enable the Right to Left layout.
  • Number of row: The number of rows displayed in slider.
  • Auto play: Choose Yes to let the slide play automatically.
  • Stop autoplay on mouse hover: Choose Yes to stop the slide from playing when hover mouse.
  • Loop: Choose Yes to let the slide play in loop.
  • Display navigation: Choose Yes to display the navigation icons on the slide.
  • Display pagination: Choose Yes to display the pagination indicator on the slide.
  • Navigation slide by: Limit the number of items will be shown after each time you click on the navigation.
  
  

  Demo Product Slider:

  

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



• There you can see more settings for tab slide:

  • Tab Style: Choose one of the 7+ style in the list. You can see the demo below.
  • Font Bold, font Italic, Uppercase: Choose Yes to let the text in bold, in italic or in uppercase.
  • Align: Choose among Left, Center or Right for text align.
  • Font Size: Enter the value of font size (in px unit).
  • Primary Color, Secondary Color and Third Color: Choose the 3 main color for your category tab. You can enter the hex code color directly in the blank or use color picker tool at the right.

Demo New Product With Tab:

The Deal Products element helps to show deal products with different view options (grid, list, slider, category tabs).

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

The Product Tabs element helps to Display products as tabs with many options.

To see the visual demonstration, click here.

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

• On 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: Limit the number of products shown.
• Item per row: Limit the number of items in a row on default resolution.
• Item per row (tablet): Limit the number of items in a row on tablet.
• Item per row (mobile): Limit the number of items in a row on mobile.

• View Mode:

  • Grid Mode

    

  • List Mode

    

• Hide Product Name: Choose Yes to let the product name disappear.
• Hide Review: Choose Yes to let the product review disappear.
• Hide Price: Choose Yes to hide the product price.
• Hide Add to Cart: Choose Yes to hide the Add to Cart button.
• Hide Add to Wishlist: Choose Yes to hide the Add to Wishlist button.
• Hide Add to Compare: Choose Yes to hide the Add to Compare button.

• Use Slider: Choose Yes to add Carousel Slider for block product.

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

  

  • RTL:Choose Yes to enable the Right to Left layout.
  • Number of row: The number of rows displayed in slider.
  • Auto play: Choose Yes to let the slide play automatically.
  • Stop autoplay on mouse hover: Choose Yes to stop the slide from playing when hover mouse.
  • Loop: Choose Yes to let the slide play in loop.
  • Display navigation: Choose Yes to display the navigation icons on the slide.
  • Display pagination: Choose Yes to display the pagination indicator on the slide.
  • Navigation slide by: Limit the number of items will be shown after each time you click on the navigation.
  
  

  Demo Product Slider:

  

Category Config Tab

• Click plus icon button to show sub categories.



• Choose categories to filter product by select categories.

• On Builder editor, click Add New Block button.



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

Config Block

Product Config Tab

• Product:

  • Enter product name and wait for the system to search the product.

  • Choose product on suggested search results.

  

• Hide Product Name: Choose Yes to let the product name disappear.
• Hide Review: Choose Yes to let the product review disappear.
• Hide Price: Choose Yes to hide the product price.
• Hide Add to Cart: Choose Yes to hide the Add to Cart button.
• Hide Add to Wishlist: Choose Yes to hide the Add to Wishlist button.
• Hide Add to Compare: Choose Yes to hide the Add to Compare button.
• Hide Short Description: Choose Yes to hide the short description of product.
• Truncate short description: Insert directly the short description you want.

The Facebook Fanbox element helps to show Facebook Fanbox on your webpage.

To see the visual demonstration, click here.

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

• On Builder editor, click Add New Block button.



• On popup list blocks, click "Facebook Fanbox" item.

Config Block

Facebook Config Tab

• Facebook Page Url: Enter the facebook fanpage url.
• Width and Height: Enter the size for facebook box.
• Tabs: Choose tabs to show (timeline, events, messages).
• Hide cover: Choose Yes to hide the cover photo in the header.
• Show Facepile: Choose Yes to show profile photos when friends like this.
• Small Header: Choose Yes to use the small header instead.
• Fit Inside: Choose Yes to try to fit inside the container width.
• Hide call to button:: Choose Yes to hide the custom call to action button (if available).

Finally, click Submit button to save your changes.

The Twitter Timeline element helps to show Twitter timeline on your webpage.

To see the visual demonstration, click here.

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

• On Builder editor, click Add New Block button.



• On popup list blocks, click "Twitter Timeline" item.

Config Block

Twitter Config Tab

• Timeline Url: Enter the Twitter timeline url.
• Width and Height: Enter the size for Twitter timeline box.
• Theme: Choose theme to show timeline box. There are 2 options: Dark and Light.
• Link color: Enter the color of link in timeline box.
• Language: Choose among languagues for the imeline box .

Finally, click Submit button to save your changes.

The Instagram element helps to show Instagram images on your webpage with many options.

To see the visual demonstration, click here.

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

IMPORTANT: you have to fill your instagram's access token in admin, go STORES -> Configuration -> Front-end Builder [MGS] -> Social. Visit this link to get an instagram access token

To create an Instagram block, click Add New Block then select Instagram

In Instagram Config:

1. Number of images to display: Set the number of images to display

2. Items per row: The number of images per row to be displayed on some resolution.

3. Image resolution: Select the image quality from instagram.

4. Enable link: Choose Yes to enable the Instagram link on the image.

5. Show like count: Choose Yes to show the number of likes on image.

6. Show comment count: Choose Yes to show the number of comments on image.

7. Use Slider: Choose Yes to display Instagram images as a slider.

The Instagram Shop element helps to show Instagram shop on your webpage with many options.

To see the visual demonstration, click here.

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

• On Builder editor, click Add New Block button.



• On popup list blocks, click "Instagram Shop" item.

Config Block

Facebook Config Tab

If you haven't got any Instagram Shop yet, you can see an announcement like this:

Please follow our instruction in the box by go to Admin panel > MGS > Page Builder Setting > Social > Snapppt.

After that, you will not see Instagram Shop config anymore. Instead, everything you need to do now is to make needed settings in General Config tab.

Finally, click Submit button to save your changes.