Sconto 2 Documentation v1.0

ArrowHiTech Jsc has achieved more than 6 years of experience working on Magento commerce and completed 2000+ Magento projects so far. Thanks to our rich experience in the realm, our proficient team of Magento developers and managers have designed and developed a lot of useful extensions exploiting great features of Magento.

Sconto eCommerce is fully compatible with Magento Community Edition 2.1.x

Please always check our online document here: http://magesolution.com/themes/sconto/magento2/docs/index.html

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 Sconto Responsive Magento theme.

If you already have installed Magento you can skip this section

To install Magento, follow these steps:

To import full demo, first, you need install Magento, install theme (Please read Install Magento and Install Theme) then download database and media of the theme:

Database: https://www.dropbox.com/s/6dmgixn362qneu4/sconto2.sql.zip?dl=0

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

After download sql file and media file, please import sql file you have downloaded to your phpmyadmin:

• Go to Cpanel -> My SQL Database
  
  
  
• Create new database
  
  
  
• Create new account of database
  
  
  
• Assign database to user
  
  
  
• Set permissions for user
  
  
  
• Go back to cpanel and go to phpmyadmin
  
  
  
• Click to database you have created
  
  
  
• Click Import
  
  
  
• Click "Browse..." button and choose the database you have downloaded
  
  
  
• Click "Go" button to import database
• After import database, please find and go to database table name core_config_data
  
  
  
• Find 2 records with path are web/unsecure/base_url and web/secure/base_url
  
  
  
• Edit value of them to your site url, eg:
  
  
  
• Open the file: app/etc/env.php on your host:
  
  
  
• Edit user, password, database name of the database you have created:
  
  
  
• Save this file and upload to your host again
• Unzip media.zip file you have downloaded then you will get an folder name pub/media
• Upload this folder to your magento root folder on your host
• Done, now the full demo data of the theme have installed on your site

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

Change value to config:

• Max Width of Product images (px): Config size of image product (on category page)
• Max Width of Product Images (px) Config size of image product (on product detail page)
• Active Preload
• And more...

From Admin panel, go to MGS → General Setting → [Form Mini Search]

Change value of "Show Categories For Search" to enable or disable search with categories

Enable

Disable

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

You can show or hide content (SKU, REVIEW, Add to Wishlist, Add to Compare, Short Description, Upsell product) on product detail page

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

You can show or hide tab (Description, Additionnal Information, Reviews) on product detail page

From Admin panel, go to MGS → General Setting → [Customer Navigation Links]

You can show or hide link on navigation link (My account page)

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

To show map on contact page. You can change "Display Google Map" to yes first. After that, you can input address & google map api key.

To get google map api key, please go to https://developers.google.com/maps/documentation/javascript/get-api-key.

Layout contact page: Classic Layout

Layout contact page: Google Map Full Screen

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

Change value to config:

• With (1024px,1200px, 1366px or Fullwidth)
• Breadcrumb 2 layout options
• Layout Product 5 types product hover
• Header Change header version
• Show Login, Register form (header) with full page layout

  

  

• Show Minicart with full page layout

  

• Footer Change footer version
• Enable or disable Sticky menu
• Enable or disable Back to top icon
• Enable or disable NewsLetter Popup
• Display static block id at frontend (Header + Footer + Subpage)

From Admin panel, go to MGS → Theme Setting → [Background]

Options for background of pages, you can to use color code or images to set background

From Admin panel, go to MGS → Theme Setting → [Font]

Options for fonts of page elements: default font, heading 1, heading 2, heading 3, heading 4, heading 5, heading 6, button, price, menu heading, menu link

We use google font for them

You can add font for special class or id if you want. Input css selectors to textarea "Element use font" and choose font use for it.

To add other google font. You must edit php function. Open file app\code\MGS\Mpanel\Helper\Data.php with code editor and find function getFonts(). add new row follow old font.

From Admin panel, go to MGS → Theme Setting → [Custom Style]

If you know how to use style sheet, you can can add font family (Not support on google font) and add style sheet for your site.

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

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

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

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

You can setting color for:

• Top Links Section (Background, text color, link color, link hover color, dropdown background color, dropdown link color, dropdown link hover color)
• Middle Section (Background color)
• Top Search Section (config color for input, button)
• Top Cart Section (Config color for mini top cart)
• Menu Section (Background color, link level 1 color, dropdown color)
• Sticky menu (Background color, link level 1 color, dropdown color)

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

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

You can setting color for:

• Text & link
• Breadcrumb (Background, link, link hover color)
• Top Search Section (config color for input, button)
• Default Button (Change color for btn-default)
• Primary Button (Change color for btn-primary)
• Secondary Button (Change color for btn-secondary)

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

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

You can setting color for:

• Top Section (Background color, text color, border color, link color, heading color, link hover color)
• Middle Section (Background color, text color, border color, link color, heading color, link hover color)
• Bottom Section (Background color, text color, border color, link color, heading color, link hover color)
• Social (Social color, social hover color)
• Footer newsletter (Input color, input background, input border)

Sconto theme use Bootstrap for layout.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

View Bootstrap Documentation at http://getbootstrap.com/css

To use widget, go to edit content of page or static block. click "Show/ Hide Editor" button to show button "Insert Widget..."

Click button "Insert Widget..." to show form

Choose a widget

Enter widget options. Finish, click button "Insert Widget"

With widget "MGS Product list", you can show product at cms page, cms static block. You can config when add widget to filter product with attribute (New, Sale, Top Rated or other attribute type as "Yes/No").

You can select categories to filter product.

Input or select value to config widget:

• Title: title of block
• View Mode: Grid or List mode
• Sort by: New, Sale, Top Rated, Filter by Attribute
• Category: Select category to filter
• By Attribute: (If you choose Sort by is Filter by Attribute you can show it). Choose a attribute to filter product. You can create new attribute (type must "Yes/No")
• Show with Owl Slider : Owl slider use on block
• Item per row:
• Number Product number product to show

With widget " MGS Product Tab", you can show categories product tab at cms page, cms static block.

You can filter product with attribute (New, Sale, Top Rated or other attribute type as "Yes/No").

Input or select value to config widget:

• Title: title of block
• View Mode: Grid or List mode
• Category: Select multiple category (a category select is a tab)
• Sort by: New, Sale, Top Rated, Filter by Attribute
• By Attribute: (If you choose Sort by is Filter by Attribute you can show it). Choose a attribute to filter product. You can create new attribute (type must "Yes/No")
• Show with Owl Slider : Owl slider use on block
• Item per row:
• Number Product number product to show

Demo

With widget " MGS Product Tab" (Attribute), you can show attribute product tab at cms page, cms static block.

Input or select value to config widget:

• Title: title of block
• Tabs: Choose attribute to show tab (an attribute select is a tab)
• Get by Category: Filter product with categories
• Show with Owl Slider : Owl slider use on block
• Item per row:
• Number Product number product to show

Demo

Step 1: Config deals product

Go to Product -> Catalog, edit a product. Click to Advanced Pricing. You must input Special price, Special to date and Special from date.

Step 2: Add widget to content

Input or select value to config widget:

• Title: title of block
• Custom class: Add class to custom style
• View mode: config layout of widget
• Choose Product : Product to show
• Item per row:
• Config Owl Slider

Demo

First you go to admin MGS -> Manage Banners ( under Promo Banners ) to create promo banner.

Then you go to Content -> Pages and edit cms, add promobanner with widget "MGS Promo Banner"

First you go to admin MGS -> Configuration ( under Blog ) to config setting for blog.

Then you go to admin MGS -> Manage Categories ( under Blog ) to create categories blog

Then you go to admin MGS -> Manage Posts ( under Blog ) to create blogs

Then you go to Content -> Pages and edit cms, add Latest Post Block with widget "Blog Latest Post"

Template Demo: Default Template

Template Demo: List Template

Template Demo: Default v2 Template

Note: If you show latest post with owl slider. To set position for button "Next & Prev". You can add custom class for widget.

• Custom class: "navigation-top" Show button under title  
  
• Custom class: "navigation-top-right" Show button on right title  
  
• Custom class: "navigation-left-right" Show button align center vertical, "Next" on left and "Prev" on right  
  

Demo:

First you go to admin MGS -> Manage Items ( under Testimonial ) to create testimonial.

Then you go to Content -> Pages and edit cms, add Testimonial Block with widget "Testimonial"

First you go to admin MGS -> Portfolio Categories ( under Portfolio ) to create Portfolio Categories.

Then you go to MGS -> Portfolio Items to create Portfolio

Then you go to Content -> Pages and edit cms, add Portfolio Block with code

{{block class="MGS\Portfolio\Block\Portfolio" title="Our Portfolio" portfolio_count="8" per_row="4" template="widget.phtml"}}

First you go to admin MGS -> Configuration ( under Shop By Brand ) to config for brand.

Then you go to admin MGS -> Manage Brands ( under Shop By Brand ) to create the brand you want.

Continue you go to Content -> Pages and edit cms page then you can add brand list to homepage by using widget

To setup Megamenu, you can go to admin -> Stores -> Configuration -> MGS -> Megamenu

You can enable or disable menu Home, change label menu Home at setting

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

Setting

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

Custom Setting

• Catalog Category:
  • Menu Type: Catalog Category
  • Categories: Choose Categories to show
    
  • Static Contents:
    
    
    • Top Content: Content on top megamenu
    • Bottom Content: Content on bottom megamenu
• Static Content:
  • Menu Type: Static Content
  • Static Contents:
    

If you use static content for menu. Add html to a tag

If you use categories menu. Go to Product ->Categories ->Edit this categories

You can see section MGS Megamenu. Insert label to field "Label in Megamenu"

Menu "Shop"

Change Background Color

To change Breadcrumb background color, from admin panel, go to MGS -> Color Setting -> [Main Content]

Change Use Custom to Yes, you can see Breadcrumbs Color section has show

Input value and save

Change Background Image

Only breadcrumb version 2 can use background image.

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

Upload an image at field "Background Image Breadcrumb".

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

Change : "Display static block id at frontend (Header + Footer + Subpage)" to "Yes".

 

Clear cache

Reload frontend page to view identifier or id of static block (Background red)