Overview
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
Install Magento
If you haven't got a Magento website yet, you will have to install a copy of Magento Community Edition open source e-commerce web application before using Sconto Responsive Magento theme.
If you already have installed Magento you can skip this section
To install Magento, follow these steps:
Operating systems (Linux x86-64)
Linux distributions such as RedHat Enterprise Linux (RHEL), CentOS, Ubuntu, Debian, and so on
Composer (latest stable version)
Composer is required for developers who wish to contribute to the Magento 2 codebase or anyone who wishes to develop Magento extensions
Web servers
- Apache 2.2 or 2.4
In addition, the apache mod_rewrite module must be enabled. mod_rewrite enables the server to perform URL rewriting. For more information, see our Apache documentation
nginx 1.8 (or latest mainline version)
Database
MySQL 5.6 (Oracle or Percona)
PHP
- 5.6.x
- 5.5.x, where x is 22 or greater
- 7.0.2 up to 7.1.0, except for 7.0.5
There is a known PHP 7.0.5 issue that affects our code compiler; to avoid the issue, do not use PHP 7.0.5.
PHP documentation: CentOS, Ubuntu
Required PHP extensions:
- curl
- gd, ImageMagick 6.3.7 (or later) or both
- intl
- mbstring
- mcrypt
- mhash
- openssl
- PDO/MySQL
- SimpleXML
- soap
- xml
- xsl
- zip
-
PHP 7 only:
PHP OPcache
We strongly recommend you verify the PHP OPcache is enabled for performance reasons. The OPcache is enabled in many PHP distributions. To verify if it is installed, see our PHP documentation for CentOS or Ubuntu.
If you must install it separately, see the PHP OPcache documentation.
PHP settings
We recommend particular PHP configuration settings, such as memory_limit
, that can avoid common problems when using Magento.
For more information, see our recommendations for CentOS and Ubuntu.
SSL
- A valid security certificate is required for HTTPS.
- Self-signed SSL certificates are not supported.
-
Transport Layer Security (TLS) requirement
PayPal and
repo.magento.com
both require TLS 1.1 or later
Mail server
Mail Transfer Agent (MTA) or an SMTP server
Magento can utilize the following technologies:
- Redis version 3.0 for page caching and session storage (the latter supported by Magento version 2.0.6 and later only)
- Varnish version 3.5 or latest stable 4.x version for page caching
-
memcached latest stable version for session storage with either
memcache
ormemcached
PHP extensions (latest stable version)
Optional but recommended:
php_xdebug2.2.0 or later (development environments only; can have an adverse effect on performance)
There is a known issue with xdebug
that can affect Magento installations or access to the storefront or Magento Admin after installation.
PHPUnit (as a command-line tool) 4.1 or later
You can download magento 2 here: https://www.magentocommerce.com/download. If you want to use sample data please download "Full Release with Sample Data (ZIP with sample data)" package, if not please download "Full Release (ZIP with no sample data)" package
To transfer the Magento software archive to your server:
- 1. Install and configure a file transfer protocol (FTP) or secure copy protocol (SCP) client to transfer the Magento software from your computer to your server.
There are many ways to configure FTP and SCP. Following are a few packages you can use. Magento does not recommend particular software.
- 2. Create a connection to your Magento server.
Follow the prompts on your screen or consult the documentation provided with your FTP software for more information.
- 3. After you log in to your server, browse to locate the Magento CE or EE archive on your local system.
On the remote system, browse to locate the web server docroot directory.
The following figure shows an example.
- 4.Transfer the archive from your local system to the web server docroot directory.
On some FTP client software, you do this by dragging and dropping.
- 5. Wait while the transfer completes.
- 6. Log in to your Magento server, or switch to, the Magento file system owner.
- 7. Change to the web server docroot or the virtual host directory.
- 8. Create a subdirectory for the Magento software.
If you set up a virtual host, the subdirectory name must match the name in your virtual host.
For example,
mkdir magento2ce
mkdir magento2ee
You can also use a generic directory name
mkdir magento2
- 9. Copy the Magento archive to that directory.
For example,
cp /var/www/Magento-CE-2.0.0+Samples.tar.bz2 magento2
- 10.Continue with the next section.
Log in to your Magento server as, or switch to, the Magento file system owner and extract the software package in the web server docroot using one of the following commands:
File format | Command to extract |
---|---|
.tar.gz | tar zxf <filename> |
.zip | unzip <filename> |
.tar.bz2 | tar jxf <filename> |
This topic discusses how to set read-write permissions for the web server group before you install the Magento software. This is necessary so the Setup Wizard or command line can write files to the Magento file system.
The procedure you use is different, depending on whether you use shared hosting and have one user or if you use a private server and have two users.
If you're using a Magento version earlier than 2.0.6, see Appendix—Magento file system ownership and appendix (legacy) instead.
The Setup Wizard is a multi-page wizard that enables you to go back and forward one page at a time. You cannot skip pages, and you must enter all required information on every page before you can proceed to the next page.
In the event of errors, you can run the installer again or you can return to a previous page to fix errors on that page.
Getting started
To install the Magento software using the Setup Wizard:
- 1. Start a web browser.
- 2. Enter the following URL in the browser’s address or location bar:
http://<Magento host or IP>/<path to Magento root>/setup
For example, if the Magento server’s IP address is 192.0.2.10 and you installed Magento 2 in the magento2 directory relative to the web server’s docroot, and you did not configure a Virtual Host, enter:http://192.0.2.10/magento2/setup
- 3. On the initial page, click Agree and Set Up Magento.
- 4. Continue with the following topics in the order presented to complete the installation.
When your Magento installation is completed successfully you can start theme installation procedure.
Install Theme
Using a FTP client to upload content of upload folder to the root folder on your Web Server (usually named public_html). Attention: when you copy content of upload folder to the root folder, it will overwrite some files. Please accept it.
You need to upload all content files in folder Themes/Magento_2.x
Go to System -> Cache management. Select all, choose refresh action and submit.
- Login to your server with your SSH account
- Switch to apache user
- Change to magento root directory
- Run command line: php bin/magento module:enable MGS_Mpanel
- Run command line: php bin/magento module:enable MGS_Mmegamenu
- Run command line: php bin/magento module:enable MGS_Portfolio
- Run command line: php bin/magento module:enable MGS_Testimonial
- Run command line: php bin/magento module:enable MGS_Brand
- Run command line: php bin/magento module:enable MGS_Promobanners
- Run command line: php bin/magento module:enable MGS_StoreLocator
- Run command line: php bin/magento module:enable MGS_Blog
- Run command line: php bin/magento module:enable MGS_QuickView
- Run command line: php bin/magento module:enable MGS_Social
Run command line: php bin/magento module:enable MGS_Acm
Set permission for apache group allow write to folder app/code/MGS/Acm/view/frontend/templates/advanced_content (chown -R apache app/code/MGS/Acm/view/frontend/templates/advanced_content)
- Run command line: php bin/magento setup:upgrade
- Run command line: php bin/magento setup:static-content:deploy
Go to MGS -> Theme Setting
At Install Theme section, you can see a button call "Install Sconto theme", click to this button
Go to MGS -> Theme Setting [Import]
Click to "Sconto", you can see all homepages with thumbnail. Click to button to import homepage as you want, if you want to import homepage for special store view, please switch to store view first
Install Full Demo
To import full demo, first, you need install Magento, install theme (Please read Install Magento and Install Theme) then download database and media of the theme:
Database: 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
Setting Catalog Page
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...
Search with Categories
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
Product Detail Page Setting
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
Product Tabs (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
My Account Navigation links
From Admin panel, go to MGS → General Setting → [Customer Navigation Links]
You can show or hide link on navigation link (My account page)
Config Map on Contact 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
Setting layout your site
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)
Change Background Page
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
Font Setting
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.
Custom Style
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.
Change Color Content
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"
Change Color Header
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)
Change Color Content
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)
Content layout
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.row
s. - 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
Add Widget To CMS
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"
Widget: MGS Product list
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
Demo List Mode
Demo Multiple Mode
Demo Grid Mode
Widget: MGS Product Tab (Categories)
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
Widget Product Tab (Show tab with attribute)
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
Widget Deals Product
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
Advanced Content Manager
Advanced Content Manager Magento 2 extension by MGS assists administrator to create a variety of content types, eg. portfolio, testimonial, gallery, news, lookbook... and many other custom forms at light speed but effortlessly at the same time. This content builder is also a breakthrough in Magento 2 extension development owing to its uniqueness and multifunctional maneuver.
Download Document Extensions: http://magesolution.com/themes/sconto/magento2/docs/MGS_Advanced_Content_Manage_Document.docx
Latest Post Block
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
Testimonial
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"
Portfolio
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"}}
Featured Brands
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
Static Block Diagram
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)
Setup Multi Languages
To setup multi languages, you can go to admin -> Stores -> All Stores -> Create Store View
Example with French
- Name:
French
- Code:
fr
- Status:
Enable
Setup Currency
To setup currency, you can go to Store -> Configuration, choose Currency Setup tab. 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 then press Save.
If currency rate can't auto create, you can input value for it
Go to System -> Cache Management and refresh the cache. Now you should see currency dropdown on the top left corner.
Enable Translate Inline
To enable translate inline for any store view, go to Stores -> Configuration, Click to Advanced tag on left menu, click to Developer
Switch to store view you want to translate at top of page.
At Translate Inline section, choose "Yes" for "Enabled for Storefront"
Create Slider with Owl Carousel
To create slider, You must create a static block with all element of slider
Static block content
An example:
Next step: Use Widget MGS Owl Slider to insert slider to content.
- Block: Choose static block use for widget
- Full Screen:
- Height Loading: Config height slider when page not load complete
- Responsive: Setting number item for devices screen. Default use 1 item for all devices. If you want use default, blank to field.
- Slider Otion: Config owl slider (Animate, Auto Play, Auto Play Speed, Navigation, Pagination, Loop, Right to Left)
Click to button Insert Widget and Save Page.
Facebook like box on sidebar
To show facebook likebox on sidebar, go to admin MGS → Social → Configuration, you can see Facebook Setting
Input your app information (App Id, App Secret, Facebook Page URL), setting for facebook like box and save config. That done.
To get block on cms page, cms block, you can use code:
{{block class="MGS\Social\Block\FacebookLikeBox" template="MGS_Social::fb-page-plugin.phtml"}}