Getting Started

Welcome to Porto Magento 2 Theme!

We would like to thank you for purchasing Porto Magento 2 Theme! We are very pleased you have chosen Porto Magento 2 Theme(or interested in ) for your website, you will never be disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Porto Magento 2 Theme. Porto can only be used with Magento 1.x or 2.x and we assume that you already have Magento installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site CPanel(or FTP) and magento admin details. We're very happy to help you and you will get reply from us more faster than you expected. Thank you, we hope you to enjoy using Porto Magento 2 Theme!

Compatible with Magento:

Porto Magento Theme is fully compatible with Magento Community Edition 1.x, and new version 2.0.x, 2.1.x and 2.2.x .

Magento Information

To install this theme you must have a working version of Magento already installed. If you need help installing Magento, follow below sites and tutorials from magento.com, hope everything that you need are there.

Installation & Update

Magento Installation

Install from archive file

First and easiest way is to download it from Magento download page, https://www.magentocommerce.com/download.

You can choose from few different archive types (zip, tar.gz, tar.bz2) , with and without sample data.
Magento was kind enough to pack with all composer dependencies in the archive, so you don’t have to run Composer.

In this installation Magento core code is stored under /vendor directory and updating is possible through Magento admin.

So next steps are easy, just visit http://m2.loc/2.07/magento-website/ (in my case) and follow Setup Wizard.

Install via Composer

Second, but not the last, is installing Magento via composer. Composer is a tool for dependency management in PHP. To learn more visit this link, https://getcomposer.org/doc/00-intro.md.

In this installation, Magento core code is also stored under /vendor directory and updating is possible through Magento admin.

First you need authentication keys which can be obtained here, and you will need Magento account to login.
Once logged in, go to "My Access Keys", enter some descriptive "Name" and generate new set of keys. Magento uses this approach because, in future, extensions you buy from marketplace, will be available to you, through Magento admin interface.

Enter this command in terminal:

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

When prompted, your public key is username, and private key is password.

After that, Magento is ready for installation. Go through Setup Wizard and install it.

This was without sample data. So to install sample data, navigate to your Magento 2 root directory through terminal, and run the following command:

php bin/magento sampledata:deploy
php bin/magento setup:upgrade

These two commands will update your composer.json file and install sample data. If you get this message, after installing sample data – Please re-run Magento compile command, enter the following in terminal:

php bin/magento setup:di:compile

This command will take some time to complete.

Install via GitHub

Third, and the last one, is cloning or downloading release from GitHub repository.
In this installation, I will show you how to avoid setup wizard and install Magento through terminal. But, it is important to mention that in this installation Magento core code is stored under app/code not in vendor/ like in previous two examples.
When you try to update Magento through Admin interface, you will get error that this is a GitHub version and it’s not possible to update. GitHub releases are intended to be used by contributors/developers.

First we must clone Magento repo from here: https://github.com/magento/magento2 or you can download releases on https://github.com/magento/magento2/releases

Create empty directory and run:

git clone git@github.com:magento/magento2.git . 

After deploying has been finished, run:

composer install

Now it’s time to install Magento 2. My setup looks like this:

php -f bin/magento setup:install –base-url=http://m2.loc/2.07/github/ --backend-frontname=admin --db-host=localhost --db-name=m2git --db-user=root --db-password=inchoo --admin-firstname=Magento --admin-lastname=User --admin-email=ivan.veres@inchoo.net --admin-user=admin --admin-password=magento123 --language=en_US --currency=USD --timezone=America/Chicago –use-rewrites=1

Change your base-url, db-name, db-password, admin-email, admin-password to match your local setup.
If your visit you local link through browser (http://m2.loc/2.07/github/), Magento 2 should be installed.

If you need sample data, follow along.
In your web root (not magento2) run:

git clone git@github.com:magento/magento2-sample-data.git

Navigate into cloned directory and execute:

php -f dev/tools/build-sample-data.php -- --ce-source="your Magento CE install dir"

This will create symlinks to your Magento 2 installation.
Set ownership and permissions if you are on Linux machine:

chown -R :your web server group name
find . -type d -exec chmod g+ws {} \;

Then you need to clear static files (cache).
Navigate to Magento 2 var/ folder and enter following:

rm -rf cache/* page_cache/* generation/*

In Magento 2 documentation there are no further instructions. However you need to install sample data.

php bin/magento setup:upgrade
php bin/magento setup:di:compile

After that you should have sample data installed.

If you have some problems reference at: http://devdocs.magento.com/guides/v2.0/install-gde/bk-install-guide.html.

Theme Installation

Prepare Installation
  1. We recommend you to duplicate your live store on a development store and try installation on it in advance.

  2. Backup magento files and the store database.

    Important!

    It's very important to backup all of themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not omit this step.

  3. Disable all cache related section that you have in your magento.

Theme Installation
  1. Theme Files Upload

    - Upload via FTP

    Log into your hosting space via a FTP software. ie, FileZilla.

    Unzip Theme Package > Theme Files > Magento 2.x > Porto Theme.zip and upload all directories(There are 2 directories - app, pub) to magento 2 root directory.
    If your magento version is 2.0.x, you should patch the theme with Patch for Magento 2.0.x.zip.
    If your magento version is 2.1.x, you should patch the theme with Patch for Magento 2.1.x.zip
    If your magento version is 2.1.6, you should patch the theme with Patch for Magento 2.1.x.zip and Patch for Magento 2.1.6.zip.
    If your magento version is 2.2.x, you should patch the theme with Patch for Magento 2.2.x.zip

    - Upload via CPanel

    Log into your CPanel(Control Panel) by your hosting account or cpanel user information.

    Upload Theme Package > Theme Files > Magento 2.x > Porto Theme.zip to your magento root directory and unzip its content.
    If your magento version is 2.0.x, you should patch the theme with Patch for Magento 2.0.x.zip.
    If your magento version is 2.1.x, you should patch the theme with Patch for Magento 2.1.x.zip
    If your magento version is 2.1.6, you should patch the theme with Patch for Magento 2.1.x.zip and Patch for Magento 2.1.6.zip.
    If your magento version is 2.2.x, you should patch the theme with Patch for Magento 2.2.x.zip

  2. Activate SW Extensions, open command line in folder root of magento and run commands via ssh using putty or others, php bin/magento setup:upgrade.

    Important!

    Sometimes your site is broken, after run this command, it's because of you ran this command with the incorrect user.
    If your site was broken, it's very important to set the file's permissions and ownership correctly, after run this command line.
    You can refer this command.
    chown -R <owner>:<group> <magento root directory path>
    Typical examples:
    chown -R apache:apache /var/www/html/magento2/porto
    chown -R www-data:www-data /home/domain/public_html
    And also please refer this, http://devdocs.magento.com/guides/v2.0/install-gde/prereq/integrator_install.html#perms-over.

  3. Select Smartwave Porto theme in Stores > Configuration > General > Design > Design Theme > Design Theme for Magento 2.0.x version, and select Smartwave Porto theme in Content > Design > Configuration page for Magento 2.1.x or 2.2.x version.
    You can select Smartwave Porto RTL theme, if you want to build a RTL site.
Theme Activation
  1. Get the purchase code

    You can get the purchase code from https://themeforest.net/downlaods.

  2. Input the purchase code in Stores > Configuration > Porto > Activate Theme, then save the configuration.

Demo Installation

Porto provides extremely easy - one click demo installation. In order to do demo installation, you should import Static Blocks and CMS pages in Porto - Settings Panel > Installation.


  1. Click two Import buttons to prepare demo installation.

  2. Click Demo X button to install demo version that you prefer to install.

Note: After choosing and importing the demo, please go to Porto Setting panel, save again and then, go to Porto Design panel, save again.

Patch Installation
  1. If you are using Magento 2.0.x, please only install patch magento 2.0.x.zip.
  2. If you are using Magento 2.1.x, please install patch magento 2.1.x.
  3. If you are using Magento 2.1.6, please install patch magento 2.1.x first, then install the patch magento 2.1.6.
  4. If you are using Magento 2.1.6, already do the patch installation as number 3 and update your Magento version to the newest version, please continue installing patch update 2.1.6 to 2.1.7.
  5. If you are using Magento 2.1.7, 2.1.8, 2.1.9, 2.1.10, 2.1.11, or later 2.1.x version, please install patch magento 2.1.x.
  6. If you are using Magento 2.2.x, please install patch magento 2.2.x.
  7. If you are using Magento Enterprise, please install patch Magento EE.zip.

Theme Customization

Make the Child Theme and Customize the Theme
  1. We recommend you to create the child theme, if you need to customize the theme.

  2. Make the child theme in the same directory with "porto". Sample "porto_child" theme was already provided in the theme package.

    /app/design/frontend/Smartwave/porto_child
  3. Go to Content > Design > Themes - Make sure that your child theme Smartwave Porto Child appears within the theme list.

  4. Go to Stores > Configuration > Design, click on the Design Theme tab, select the theme Smartwave Porto Child within the dropdown list, click Save Config.

    If your magento version is 2.1.x or 2.2.x, go to Content > Design > Configuration, click on the Edit link for your own store in the grid, select the theme Smartwave Porto Child within the dropdown list which the label is Applied Theme, click Save Config.

  5. Add the only changed files, not all files into the child theme's directories.

  6. It's better to add your own custom css styles into Stores > Configuration > Porto > Porto - Settings Panel > Customization.

  7. We provide the theme customiztion service with additional cost, please contact us in Item Support Page.

Theme Version Update

Prepare Update

Important!

Since we did significant structural changes in 3.0 including Bootstrap version upgrade, you may experience some problems after theme upgrade. You need to update your prior customization according to Porto's new structure.
It's very important to backup all of themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not omit this step.

  1. We recommend you to duplicate your live store on a development store and try installation on it in advance.

  2. Backup magento files and the store database.

  3. Disable all cache related section that you have in your magento.

Theme Installation
  1. Theme Files Upload

    - Upload via FTP

    Log into your hosting space via a FTP software. ie, FileZilla.

    Unzip Theme Package > Theme Files > Magento 2.x > Porto Theme.zip and upload all directories(There are 2 directories - app, pub) to magento 2 root directory.
    If your magento version is 2.0.x, you should patch the theme with Patch for Magento 2.0.x.zip.
    If your magento version is 2.1.x, you should patch the theme with Patch for Magento 2.1.x.zip
    If your magento version is 2.1.6, you should patch the theme with Patch for Magento 2.1.x.zip and Patch for Magento 2.1.6.zip.
    If your magento version is 2.2.x, you should patch the theme with Patch for Magento 2.2.x.zip

    - Upload via CPanel

    Log into your CPanel(Control Panel) by your hosting account or cpanel user information.

    Upload Theme Package > Theme Files > Magento 2.x > Porto Theme.zip to your magento root directory and unzip its content.
    If your magento version is 2.0.x, you should patch the theme with Patch for Magento 2.0.x.zip.
    If your magento version is 2.1.x, you should patch the theme with Patch for Magento 2.1.x.zip
    If your magento version is 2.1.6, you should patch the theme with Patch for Magento 2.1.x.zip and Patch for Magento 2.1.6.zip.
    If your magento version is 2.2.x, you should patch the theme with Patch for Magento 2.2.x.zip

  2. Activate SW Extensions, open command line in folder root of magento and run commands via ssh using putty or others, php bin/magento setup:upgrade.

    Important!

    Sometimes your site is broken, after run this command, it's because of you ran this command with the incorrect user.
    If your site was broken, it's very important to set the file's permissions and ownership correctly, after run this command line.
    You can refer this command.
    chown -R <owner>:<group> <magento root directory path>
    Typical examples:
    chown -R apache:apache /var/www/html/magento2/porto
    chown -R www-data:www-data /home/domain/public_html
    And also please refer this, http://devdocs.magento.com/guides/v2.0/install-gde/prereq/integrator_install.html#perms-over.

Demo Installation

Recently, Porto updated the new design version of some demos so you now can import both new and old demos.

Porto provides extremely easy - one click demo installation. In order to do demo installation, you should import Static Blocks and CMS pages in Porto - Settings Panel > Installation.


  1. Click 2 Import buttons to prepare demo installation.

  2. Click Demo X button to install demo version that you prefer to install.

Quick Start Package

Package Installation
  1. Package Files Upload

    - Upload via FTP

    Log into your hosting space via a FTP software. ie, FileZilla.

    Unzip Theme Package > Quick Start Package > Magento 2.1.1 > porto_demo_2.3.4.3.zip and upload all directories and files to your root directory.

    - Upload via CPanel

    Log into your CPanel(Control Panel) by your hosting account or cpanel user information.

    Upload Theme Package > Quick Start Package > Magento 2.1.1 > porto_demo_2.3.4.3.zip to your magento root directory and unzip its content.

  2. Restore sql dump file

    Unzip Theme Package > Quick Start Package > Magento 2.1.1 > database_porto2_2.3.4.3.sql.zip and create a new database, and import the sql file into your database.

  3. Activate SW Extensions, open command line in folder root of magento and run commands via ssh using putty or others, php bin/magento setup:upgrade.

    Important!

    Sometimes your site is broken, after run this command, it's because of you ran this command with the incorrect user.
    If your site was broken, it's very important to set the file's permissions and ownership correctly, after run this command line.
    You can refer this command.
    chown -R <owner>:<group> <magento root directory path>
    Typical examples:
    chown -R apache:apache /var/www/html/magento2/porto
    chown -R www-data:www-data /home/domain/public_html
    And also please refer this, http://devdocs.magento.com/guides/v2.0/install-gde/prereq/integrator_install.html#perms-over.

  4. Select Smartwave Porto theme in Stores > Configuration > General > Design > Design Theme > Design Theme for Magento 2.0.x version, and select Smartwave Porto theme in Content > Design > Configuration page for Magento 2.1.x version.
    You can select Smartwave Porto RTL theme, if you want to build a RTL site.

Demo Installation

Porto provides extremely easy - one click demo installation. In order to do demo installation, you should import Static Blocks and CMS pages in Porto - Settings Panel > Installation.


  1. Click 2 Import buttons to prepare demo installation.

  2. Click Demo X button to install demo version that you prefer to install.

Important!

After importing Demo, please go to Porto- Design Panel > Save Configure, and Porto- Setting Panel > Save Configure.

Theme Configuration

Homepage Configuration

Select a Homepage

To configure the default home page for your store, go to Store > Configuration > General > Web > Default Pages tab, select the desired page in the CMS Home Page field and save configuration.

To edit the content of the home page, go to Content > Elements > Page and open the active home page. Content can be found in the main field of the Content tab:

To change the layout of the page, go to Content > Pages, select the page, select one of the options in the Layout field and click Save Page button:

How to edit homepage slider?

Once you finish demo installation, you can get same slider content as our demo sites. To edit these slider content, please go to Admin Panel > Content > Elements > Blocks and select necessary static block. You can modify slider content by custom HTML based on sample content.

To make the slide image clickable, you can use this HTML as a block content:

<a href="#"><img src="{{media url='wysiwyg/smartwave/porto/homepage/07/slider/slide3.jpg'}}" alt="Sample slide" /></a>
How to show products in homepage?
  • Featured Products - It shows the products which "Is Featured" attribute is "yes".

    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" ...}}
  • Latest Products - It shows the products which all products sort by latest input automatically.

    {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" ... }}
  • Bestseller Products - It shows the products by selling automatically.

    {{block class="Smartwave\Filterproducts\Block\Home\BestsellersList" name="hot_product" ... }}
  • Sale Products - It shows the products which have the "Special Price".

    {{block class="Smartwave\Filterproducts\Block\Home\SaleList" name="sale_product" ... }}

Available Attributes

product_count - Limit of the Products to show.
aspect_ratio - Keep Product Image Aspect Ratio(1 or 0).
image_width - Product Image Width(eg: 300).
image_height - Product Image Height(eg: 400).
category_id - Showing products from specific category.
move_actions - "Add to cart", "Add to compare" and "Add to wishlist" buttons will be moved into the product image area(1 or 0).
lazy_owl - Product Image Lazy Load, this will work with only owl carousel mode(1 or 0).

Available Template Files

owl_list.phtml - OWL Carousel Mode

grid.phtml - Grid Mode

side_list.phtml - Sidebar Mode

small_list.phtml - Small List Mode

You can add the block code into the cms content field like below. Below example is for showing featured products of one category which its id is 21.

<div id="featured_product" class="owl-top-narrow">
    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" category_id="21" template="owl_list.phtml"}}
</div>

You can add the attributes "product_count", "category_id", "aspect_ratio", "image_width", "image_height" into the filter products blocks as above code.
You can use the template file like "owl_list.phtml"(for owl-carousel mode), "sidebar_list.phtml"(for sidebar mode).
Above image is the screenshot for owl-carousel mode.
If you're using owl-carousel mode, you should add also the script for owl-carousel like this.

<script type="text/javascript">
jQuery(function($){
    $("#featured_product .owl-carousel").owlCarousel({
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        loop: true,
        navRewind: true,
        margin: 10,
        nav: true,
        navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
        dots: false,
        responsive: {
            0: {
                items:2
            },
            768: {
                items:3
            },
            992: {
                items:4
            },
            1200: {
                items:5
            }
        }
    });
});
</script>
How to show Home Banners?

Here you can see some examples of banners. Banners can be placed on any CMS page, also on the home page. Each banner is a simple image inside a link.

By default images are uploaded to wysiwyg/smartwave/porto/homepage/07/content directory. You can upload images via FTP or by using Magento's WYSIWYG editor. WYSIWYG editor will create a HTML tag with correct path to the image, for example:

<img src="{{media url="wysiwyg/25.png"}}" alt="" />

In some Homepage version of Porto, banners will be inserted directly in CMS Homepage. Below are some sample content.

- Homepage 5 - New

<div class="grid-images" style="margin:20px 0;">
<div class="row">
<div class="col-sm-4">
<div class="grid1">
<a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid1.jpg"}}" alt="" /></a>
</div>
<div class="grid2">
<a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid2.jpg"}}" alt=""></a>
</div>
</div>
<div class="col-sm-8">
<div class="grid3">
<a href="#"><img src="{{media url="wysiwyg/smartwave/porto/homepage/05/content/grid3.jpg"}}" alt=""></a>
</div>
</div>
</div>
</div>
</div>

Note: To add the link to the image and make it to be clickable, please replace the # in the tag href=" " by the link.

- Homepage 7 - New

<div class="single-images" style="padding: 30px 0 15px;">
<div class="row">
<div class="col-sm-4 col-xs-12" style="padding-bottom:15px;">
<a class="image-link" href="#">
<img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid1n.jpg"}}" alt="" />
</a>
</div>
<div class="col-sm-4 col-xs-12" style="padding-bottom:15px;">
<a class="image-link" href="#">
<img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid2n.jpg"}}" alt="" />
</a>
</div>
<div class="col-sm-4 col-xs-12" style="padding-bottom:15px;">
<a class="image-link" href="#">
<img src="{{media url="wysiwyg/smartwave/porto/homepage/07/content/grid3n.jpg"}}" alt="" />
</a>
</div>
</div>
</div>

- Homepage 8

- Homepage 9- New

How to show Featured Brands?

Brand feature shows brand logo and brand slider on homepage. By default images are uploaded to wysiwyg/smartwave/porto/brands/ directory.

You can use below block code to show featured brand:

Homepage 8 - New

You can use below block code to show featured brand:

<div class="brands-slide">
<h2 class="filterproduct-title" style="margin-bottom: 4px;"><span class="content"><strong>Featured Brands</strong></span><span class="title_line"></span></h2>
<div id="brands-slider-demo-8" class="brands-slider owl-side-narrow">
<div class="owl-carousel">
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand1.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand2.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand3.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand4.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand5.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand1.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand2.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand3.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand4.jpg"}}" alt="" /></div>
<div class="item" style="padding-top:10px;"><img src="{{media url="wysiwyg/smartwave/porto/brands/brand5.jpg"}}" alt="" /></div>
</div>
<script type="text/javascript">
require([
'jquery',
'owl.carousel/owl.carousel.min'
], function ($) {
$("#brands-slider-demo-8 .owl-carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
margin: 20,
nav: true,
navText: ["<em class='porto-icon-left-open-big'></em>","<em class='porto-icon-right-open-big'></em>"],
dots: false,
loop: true,
responsive: {
0: {
items:2
},
640: {
items:3
},
768: {
items:4
},
992: {
items:5
},
1200: {
items:5
}
}
});
});
</script>
</div>
</div>
How to show Latest Blog Slider in homepage?

Porto is compatible with MageFan_Blog extension. You should install this extension to show Latest Blog Slider.

Please try to use below example code in your cms contents.

Homepage 14 - New

Please try to use below example code in your cms contents.

<div style="background-color: #efefef; padding: 76px 0 85px;">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2 style="margin:0 0 18px 0;font-size:18px;font-weight:600;text-align:center" class="theme-color a-center">FROM THE BLOG</h2>
        <div class="owl-top-narrow">
          <div class="recent-posts">
            <div id="latest_news" class="owl-carousel owl-theme">
              <<iv class="item">
                <div class="post-image">
                  <img src="{{media url="wysiwyg/smartwave/porto/blog/01n.jpg"}}" width="225" height="280" alt="">
                </div>
                <div class="post-content">
                  <div class="postTitle">
                    <<2><a href="#">Post Format – Video</a></2>
                  </div>
                  <div class="post-date">
                    08-DEC-2016
                  </div>
                  <div class="postContent"><p>Lorem Ipsum is simply dummy text the printing and type setting...</p></div>
                  <a class="read-more" href="#">Read More <i class="porto-icon-right-open"></i></a>
                </div>
              </div>
              <div class="item">
                <div class="post-image">
                  <img src="{{media url="wysiwyg/smartwave/porto/blog/02n.jpg"}}" width="225" height="280" alt="">
                </div>
                <div class="post-content">
                  <div class="postTitle">
                    <h2><a href="#">Post Format – Video</a></h2>
                  </div>
                  <div class="post-date">
                    08-DEC-2016
                  </div>
                  <div class="postContent"><p>Lorem Ipsum is simply dummy text the printing and type setting...</p></div>
                  <a class="read-more" href="#">Read More <i class="porto-icon-right-open"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          require([
              'jquery',
              'owl.carousel/owl.carousel.min'
          ], function ($) {
              var owl_5 = $("#latest_news").owlCarousel({
                  items: 2,
                  autoplay: true,
                  autoplayTimeout: 5000,
                  autoplayHoverPause: true,
                  margin: 20,
                  navRewind: true,
                  animateIn: 'fadeIn',
                  animateOut: 'fadeOut',
                  loop: false,
                  nav: false,
                  dots: false,
                  navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],

                  responsive: {
                      0: {
                          items:1
                      },
                      768: {
                          items:2
                      },
                      992: {
                          items:2
                      },
                      1200: {
                          items:2
                      }
                  }
              });
          });
          </script>
      </div>
    </div>
  </div>
</div>

Note: if in case you want to show blog posts only from specific blog category you can use category_id tag e.g:

{{block class="Magefan\Blog\Block\Widget\Recent" name="blog.home.recent"  number_of_posts="4" category_id="135"  custom_template="recent_home.phtml"}}

Note: if in case you want to show blog posts only from specific blog category you can use category_id tag e.g:

{{block class="Magefan\Blog\Block\Widget\Recent" name="blog.home.recent"  number_of_posts="4" category_id="135"  custom_template="recent_home.phtml"}}
How to add Instagram on Homepage?

Porto Magento theme does support you to add the Instagram Feed on the Homepage.

Please try to use below example code.

{{block class="Smartwave\Porto\Block\Template" name="instagram" padding_item="10px" template="Smartwave_SocialFeed::instagramphotos.phtml"}}

Besides, you can config the Instagram Feed on Homepage by going to Admin Panel > Smartwave > SW EXTENSION > Social Feeds > Instagram


To get the Instagram Feed works, you need to insert the right AccessToken and UserID of your Instagram account.
Ahout how to get those info, please follow this guide.

Header and Footer

Header

  1. Logo: You can change the theme’s logo by accessing the Theme Options and uploading your logo(GIF, PNG, JPG, or SVG file type) with the uploader under the Store > Configuation > General Tab > General > Header section.
    The default Magento 2 logo in the sample data is an SVG file, which is a scalable XML-based vector graphic format. By default logo image will be uploaded to app/design/frontend/Smartwave/porto/Smartwave_Porto/web/images

  2. Search

  3. Minicart

  4. User Menu: This block is a container that groups a few elements. By default it contains the following blocks: Mini Cart drop-down, Mini Compare drop-down, Top Links (set of links: Account, Wishlist, Log In/Log Out).

  5. Sticky menu: If enabled, the main menu will not disappear when the user scrolls down the page. You can enable/disable this option in Porto - Setting Panel > Header.

Footer

Static blocks below will be displayed in the footer section of the page: Content > Blocks.

  1. Porto - Footer Links – this block can substitute Magento's default Footer Links.

  2. Porto - Footer Features

  3. Porto - Custom Block for Footer Bottom Area

  4. Porto - Custom Block for Footer Bottom Area(for Home 3)

  5. Porto - Footer Top Custom Block

  6. Porto - Footer Top Custom Block for Home4

  7. Porto - Footer - About Porto

  8. Porto - Footer - Featured Products

  9. Porto - Footer Middle Twitter Widget

  10. Porto - Footer - 2nd Row - Shop

  11. Porto - Footer - 2nd Row - Popular Tags

  12. Porto - Footer - 2nd Row - My Account

  13. Porto - Footer - 2nd Row - Contact Information

  14. Porto - Custom Block for Footer Bottom Area for Home 8

  15. Porto - Footer Top Custom Block for Home 11

Category Page Configuration

Category Page Banner Configuration

Porto eCommerce provides several types of category banner mode, static image, slider, full width, boxed width etc. You can choose one as your choice.

  1. Go to the Manage Categories page to follow Products > Inventory > Categories.

  2. Select Default Category in the treeview area at the left side.

  3. Click Add Subcategory button, then input Category name, Description, etc. Notes: set the options Is Active to "Yes", Include in Navigation Menu to "Yes" in General Information tab.

  4. If you want to display banner image, please set image in Content tab.

  5. In order to display banner with static block, please set Display Mode to "Static block and products" in Display Settings tab and set Add CMS Block in Content tab.

  6. In order to display full width banner, please input html codes for the full width banner in Content tab. Please don't forget, the configuration Category Description Position should be As Full Width below the Header in Stores > Settings > Configuration > Porto > Porto - Settings Panel > Category View.

    Morden Design - Full Width banner

    <div class="full-width-image-banner" style="background: url({{media url="wysiwyg/smartwave/porto/category/banner/full-width-banner5.jpg"}}) 50% 50% no-repeat;background-size:cover;">
      <div class="container">
        <div class="content" style="position:absolute;z-index:1;top:35%;text-align:left;color:#fff;">
          <p style="color: #fff;">check out over <b style="font-size:26px;font-family:'Oswald';color:#fff;">200+</b></p>
                <h2 style="color: #fff;">incredible deals</h2>
                <a href="#" class="btn btn-default">shop now</a>
        </div>
      </div>
    </div>

    Morden Design - Static banner

    <div class="container">
      <div class="full-width-image-banner" style="background: url({{media url="wysiwyg/smartwave/porto/category/fashion/electronic-banner8.jpg"}}) 50% 50% no-repeat;background-size:cover;margin-bottom: 10px;">
        <div class="content" style="position:absolute;z-index:1;top:35%;left:5%;text-align:left;color:#1e3636;">
          <p style="color: #2f2727;">check out over <b style="font-size:26px;font-family:'Oswald';color:#2f2727;">200+</b></p>
            <h2 style="color: #2f2727;">incredible deals</h2>
            <a href="#" class="btn btn-default" style="background-color:#2f2727;color:#fff;">shop now</a>
        </div>
      </div>
    </div>
  7. Morden Design - 2 banners

    /p>

    <div class="row" style="margin:0 -10px;">
        <div class="col-sm-6" style="padding: 0 10px;">
            <img src="{{media url="wysiwyg/smartwave/porto/category/onepagecategory/banner_2n_1.jpg"}}" alt="" style="">
        </div>
        <div class="col-sm-6" style="padding: 0 10px;">
            <img src="{{media url="wysiwyg/smartwave/porto/category/onepagecategory/banner_2n_2.jpg"}}" alt="" style="">
        </div>
    </div>
  8. Click "Save Category" button, to update your changes.
Layered Navigation ("Shop By" filters)

The Layered Navigation feature in Magento 2 gives customers a comfortable and efficient way to search the store catalog by providing filters for product category, price range, color, brand or any other available attribute. Please refer to [Magento documentation] for more details.

Custom Block for Category Sidebar

Porto allows to show a block at the sidebar of category page. You can edit its content in Content > Blocks > Porto - Custom Block for Category Page Side bar.

Custom Tabs Configuration

Porto eCommerce provides several types of Custom Product Tabs. You can add the custom tabs in Stores > Settings > Configuration > Porto > Porto - Settings Panel > Product View > Product Custom Tabs.

- Product Custom Static Block Tabs: You can input static block's id and category ids, product skus.

- Product Custom Attribute Tabs: You can input attribute code and category ids, product skus.

Admin Options

Porto Design Panel

About Porto Design Panel

Porto eCommerce is equipped with administrative module which gives you the ability to configure the visual appearance of your store. You can change any colors for each elements by using color pickers or by specifying color value manually. You can also apply background image for the main sections of the page.

Go to Stores > Configuration > Porto > Porto - Design Panel section to start your own design configuration. Names of all settings are pretty self-explanatory.

We recommend you to disable magento cache before you start configuration in Porto Design Panel. Otherwise, you will need to flush the cache everytime to see your changes.

General

Theme Colors: In this option, you can set main color of entire store, and you can apply specific color settings in below options.

Font

Custom: Choose "Yes" to start your own font configuration in detail.

Colors

Custom: Choose "Yes" to start your own color configuration in detail.

Basic Colors: In these options, you can set color values for general elements - text, link and link hover color.

Buttons: In these options, you can set color values for buttons in detail - background, text, background hover and text hover colors.

Add to links: In these options, you can set color values for Add to Links - "Add to Wishlist", "Add to Compare".

Breadcrumbs: In these options, you can set color values for breadcrumbs in detail - background, text, links and links hover colors.

Header

Custom: Choose "Yes" to start your own color configuration in detail.

Color Settings: In these options, you can set color values for each elements inside header area in detail. Attached a screenshot to make you easy to understand.

Footer

Custom: Choose "Yes" to start your own color configuration in detail.

Color Settings: In these options, you can set color values for each elements inside header area in detail. Attached a screenshot to make you easy to understand.

Page Wrapper

Custom: Choose "Yes" to start your own color configuration in detail.

Background Color: You can set page background color that will be applied for all pages.

Background Image: You can set page background image that will be applied for all pages.

Custom Style: You can add your own custom style for background. For example, background-position: center center; background-repeat: no-repeat; etc.

Main Container

You can set color options for main container only, compared to above page settings - it means the main content part except header and footer area from entire page.

Custom: Choose "Yes" to start your own color configuration in detail.

Background Color: You can set page background color that will be applied for all pages.

Background Image: You can set page background image that will be applied for all pages.

Custom Style: You can add your own custom style for background. For example, background-position: center center; background-repeat: no-repeat; etc.

Porto Settings Panel

About Porto Settings Panel

Porto eCommerce is equipped with administrative module which gives you the ability to configure most of the functionality in powerful admin panel. Using this pwerful settings panel, you can configure your store easily without any coding.

Go to Stores > Configuration > Porto > Porto - Settings Panel section to start your own design configuration. Names of all settings are pretty self-explanatory.

We recommend you to disable magento cache before you start configuration in Porto - Settings Panel. Otherwise, you will need to flush the cache everytime to see your changes.

General

Boxed/Wide: You can choose boxed or wide layout of entire store.

Maxium Page Width: Porto eCommerce provides 1170px, and Full Width max width mode, you can choose one as you prefer. You can apply this option to any home versions.

Disable All Border Radius: If you choose "Yes", border radius will be applied for all elements. Please checkout this border-radius enabled demo and border-radius disabled demo to see how it works.

Speed Optimization Setting

Load Original Bootstrap: porto 3.0 comes with Bootstrap optimization by removing some unnecessary codes & resource. By choosing "Yes" you can load original Bootstrap library.

Load Original jQueryUI: porto 3.0 comes with jQueryUI optimization by removing some unnecessary codes & resource. By choosing "Yes" you can load original Bootstrap library.

Load Original animate.css porto 3.0 comes with animate.css optimization by removing some unnecessary codes & resource. By choosing "Yes" you can load original Bootstrap library.

Header

Header Type: Porto eCommerce provides 20 header styles, you can choose one of them here.

Static Block Id: You can match static block id here to show the custom block in the header.

Sticky Header: You can enable Sticky Header.

Show Logo Image in Sticky Header: You can show the logo image in your sticky header.

Logo Image: You can upload the logo image for the sticky header.

Sticky Header on Mobile: You can enable or disable Sticky Header for mobile devices.

Show Only Short Currency Code in Currency Switcher: You can show only short code for currency switcher.

Show Flag Images in Language Switcher: You can show/hide flag images for the language switcher.

Footer

Footer - Top: You can show your own CMS blocks like the right image.

Footer - Middle: Footer - Middle consists of 4(upto 4) blocks, you can control each block's size and link static blocks to show in each block. You can also show Newsletter Subscribe widget as a block. Just choose option as your choice.

Footer - Middle - 2nd Row: Footer - Middle - 2nd Row also consists of 4(upto 4) blocks, you can control each block's size and link static blocks to show in each block. You can also show Newsletter Subscribe widget as a block. Just choose option as your choice.

Footer - Bottom: You can choose necessary options for Footer-Bottom, like logo image url, social icons, payment methods and copyright text etc.

Category View

In this tab, you can set options for the category view page.

Show Alternative Product Image: When you mouse hover on a product, you can see a thumbnail image. You can enable/disable this function in this option.

Keep Image Aspect Ratio: If set to Yes, shows product image with uploaded image's size ratio.

Keep Image Aspect Ratio - Yes

Keep Image Aspect Ratio - No

Image Width, Image Height: If you set "Keep Image Aspect Ratio" field to "No", product image will be shown on this size.

Show Rating Stars: You can show/hide rating stars and reviews summary in category page.

Show Product Price: You can show/hide product prices in category page.

Show Action Links: You can show/hide "Add to Compare" and "Add to Wishlist" links in category page.

Show Add to Compare Link: You can show/hide "Add to Compare" link in category page.

Show Add to Wishlist Links: You can show/hide "Add to Wishlist" link in category page.

Category Description Position: You can change the category description block's position as you want.

Custom Block Id for Sidebar: You can show a static block at the sidebar in category page.

Enable Filter Toggle: You can show/hide filter toggle link at the top of the toolbar in category page.

Category View(Grid Mode)

In this tab, you can set products grid columns to show as default in the category page.

Product Grid Columns: Porto eCommerce provides flexible grid system, 2~8 products per row. You can choose one as your choice.

One Column of Products Grid on Phone Devices: You can show 1 column / 2columns products on phone devices.

Flex Grid: You can enable flex grid mode.

Move Actions: You can move the "Add to Cart", "Add to Compare", "Add to Wishlist" buttons into the product image area.

Product View

Product Image Size: You can change the product image's width.

Custom Block Id for Sidebar Custom Block: You can show a static block at the sidebar in product page.

Previous Link Text, Next Link Text, Show Prev/Next Product Links: You can show the prev/next links and change the links text for prev/next links in product page.

Enable Addtocart Sticky: You can enable/disable Addtocart Sticky.

Product Tabs Style: You can show the product tabs by horizontal/vertical/accordion/sticky tab.

Move Product Tabs at the Right of Product Image: You can move the product tabs at the right of the product image.

Product Label

You can show "New","Sale" labels in the product image area.

Newsletter Popup

Contact Us

Show Google Map: You can enable or disable google map in Contact Us page.

Full Width: You can show google map as full widh or static width.

Address: You can edit address name to show in google map.

Latitude: You can add latitude value of your store position.

Longitude: You can add longtitude value of your store position.

Zoom: You can set zoom value for the google map.

Contact Info: You can see contact information in the right of contact form containing phone number, email and skype etc. You can manage this content by custom html.

Customization Settings

In this tab, you can put your own css styes without touching Porto eCommerce theme files.

As you can see there are two fields, so you can add the global custom css styles into one field, and add your websites/store views own custom css styles into other one field.

Theme Installation

Import Static Blocks: By clicking this button, you can import static blocks that are used for our demo sites. In order to get same store as our demo, you should import all static blocks.

Import CMS Pages: By clicking this button, you can import CMS pages that are used for our demo sites. In order to get same store as our demo, you should import all CMS pages.

Import Demo Version Settings: Just click import demo button which you prefer to install. Once its completed, you will get same site as our demo.

Extensions

Smartwave Extensions

Mega Menu

This is amazing mega menu extension. You can create any type of mega menu with this extension, like several variations that you have seen on our demo site.

Enable: Enable or Disable this extension. If Disable is chosen, magento's default menu style will be applied.

Default Menu Type: With Porto eCommerce, you can create several types of menu - full-width mega menu, static-width mega menu and classic drop down menu. If you choose one in this option, it will be applied as default all of menu items. You can set another menu type for a certain category(or certain menu item) in Products > Categories > SW Menu tab.

Visible Menu Depth: You can set menu depth level. ie, if you set this option as "2", upto 2 depth sub categories will be shown in menu.

Custom Links & Blocks: You can display custom links/blocks in the menu such as "Features" menu on our demo sites, just link static block id that you want to show in the menu. "Static Block(before)" will be shown before default category menu items(eg: Home), "Static Block(after)" will be shown after default category menu items(eg: Features).

Category Labels: You can define texts of the category labels.

Filter Products

In this extensions, you can set options related to filter products such as featured products, best selling products etc.

  • Featured Products - It shows the products which "Is Featured" attribute is "yes".

    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" ...}}
  • Latest Products - It shows the products which all products sort by latest input automatically.

    {{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="latest_product" ... }}

- Available Attributes

product_count - Limit of the Products to show.

aspect_ratio - Keep Product Image Aspect Ratio(1 or 0).

image_width - Product Image Width(eg: 300).

image_height - Product Image Height(eg: 400).

category_id - Showing products from specific category.

move_actions - "Add to cart", "Add to compare" and "Add to wishlist" buttons will be moved into the product image area(1 or 0).

lazy_owl - Product Image Lazy Load, this will work with only owl carousel mode(1 or 0).

- Available Template Files

owl_list.phtml - OWL Carousel Mode

grid.phtml - Grid Mode

side_list.phtml - Sidebar Mode

small_list.phtml - Small List Mode

You can add the block code into the cms content field like below. Below example is for showing featured products of one category which its id is 21.

<div id="featured_product" class="owl-top-narrow">
    {{block class="Smartwave\Filterproducts\Block\Home\FeaturedList" name="featured_product" product_count="10" aspect_ratio="0" image_width="212" image_height="263" category_id="21" template="owl_list.phtml"}}
</div>

You can add the attributes "product_count", "category_id", "aspect_ratio", "image_width", "image_height" into the filter products blocks as above code.

You can use the template file like "owl_list.phtml"(for owl-carousel mode), "sidebar_list.phtml"(for sidebar mode).

Above image is the screenshot for owl-carousel mode.

If you're using owl-carousel mode, you should add also the script for owl-carousel like this.

<script type="text/javascript">
    jQuery(function($){
        $("#featured_product .owl-carousel").owlCarousel({
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            loop: true,
            navRewind: true,
            margin: 10,
            nav: true,
            navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
            dots: false,
            responsive: {
                0: {
                    items:2
                },
                768: {
                    items:3
                },
                992: {
                    items:4
                },
                1200: {
                    items:5
                }
            }
        });
    });
</script>

Social Feeds

This is amazing Social Feeds extension, eg: Facebook Fanbox, Flickr Photos.

  • Facebook Fanbox

    {{block class="Smartwave\Porto\Block\Template" name="facebook_fanbox" template="Smartwave_Socialfeeds::facebookfans.phtml"}}
  • Flickr Photos

    {{block class="Smartwave\Porto\Block\Template" name="facebook_fanbox" template="Smartwave_Socialfeeds::flickrphotos.phtml"}}

Instagram Photos

Porto Magento theme does support to add the Instagram Feed on the Homepage.

Here is the Instagram Photos configuration field:

Compatible Extensions

MageFan Blog

Porto is compatible with MageFan_Blog extension. You can show Latest Blog Slider, after install this extension.

Please try to use below example code in your cms contents.

<div style="background-color: #efefef; padding: 76px 0 85px;">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2 style="margin:0 0 18px 0;font-size:18px;font-weight:600;text-align:center" class="theme-color a-center">FROM THE BLOG</h2>
        <div class="owl-top-narrow">
          <div class="recent-posts">
            <div id="latest_news" class="owl-carousel owl-theme">
              <<iv class="item">
                <div class="post-image">
                  <img src="{{media url="wysiwyg/smartwave/porto/blog/01n.jpg"}}" width="225" height="280" alt="">
                </div>
                <div class="post-content">
                  <div class="postTitle">
                    <<2><a href="#">Post Format – Video</a></2>
                  </div>
                  <div class="post-date">
                    08-DEC-2016
                  </div>
                  <div class="postContent"><p>Lorem Ipsum is simply dummy text the printing and type setting...</p></div>
                  <a class="read-more" href="#">Read More <i class="porto-icon-right-open"></i></a>
                </div>
              </div>
              <div class="item">
                <div class="post-image">
                  <img src="{{media url="wysiwyg/smartwave/porto/blog/02n.jpg"}}" width="225" height="280" alt="">
                </div>
                <div class="post-content">
                  <div class="postTitle">
                    <h2><a href="#">Post Format – Video</a></h2>
                  </div>
                  <div class="post-date">
                    08-DEC-2016
                  </div>
                  <div class="postContent"><p>Lorem Ipsum is simply dummy text the printing and type setting...</p></div>
                  <a class="read-more" href="#">Read More <i class="porto-icon-right-open"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script type="text/javascript">
          require([
              'jquery',
              'owl.carousel/owl.carousel.min'
          ], function ($) {
              var owl_5 = $("#latest_news").owlCarousel({
                  items: 2,
                  autoplay: true,
                  autoplayTimeout: 5000,
                  autoplayHoverPause: true,
                  margin: 20,
                  navRewind: true,
                  animateIn: 'fadeIn',
                  animateOut: 'fadeOut',
                  loop: false,
                  nav: false,
                  dots: false,
                  navText: ["<em class='porto-icon-chevron-left'></em>","<em class='porto-icon-chevron-right'></em>"],

                  responsive: {
                      0: {
                          items:1
                      },
                      768: {
                          items:2
                      },
                      992: {
                          items:2
                      },
                      1200: {
                          items:2
                      }
                  }
              });
          });
          </script>
      </div>
    </div>
  </div>
</div>

IWD Onepagecheckout

Porto is compatible with [M2] ONE STEP / PAGE CHECKOUT extension.

Please refer this Installation Guide and User Guide.

Mageplaza LayeredNavigation

Porto theme is compatible with all Mageplaza extensions.

Porto includes MAGENTO 2 LAYERED NAVIGATION EXTENSION IMPROVED NAVIGATION extension, you can save up to $149.

WeltPixel Quickview

Porto is compatible with ADVANCE PRODUCT QUICK VIEW AND AJAX CART extension.

Webkul Marketplace Extension

This is a PAID Extension, you can build marketplace ecommerce site using this extension that is fully compatible with Porto

Others

Troubleshooting

General issues after installation

  1. After installing , Site cannot load CSS & JS

    A: If you are facing problem of css and js page load design after installation, then you pls follow the steps below:

    - Step 1: SSH to run command deploy: php bin/magento setup:static-content:deploy

    - Step 2: Reindex Magento, php bin/magento indexer:reindex

  2. After proceed step 2 now my website frontend and backend not showing.

    A: Change the owner of the uploaded files (pub and var) to the web server user and set correct file permissions for them. Login to Admin Panel, and Clear the cache.

  3. Get 500 internal error when I use: php bin/magento setup:upgrade.

    A: Change the owner of the uploaded files (pub and var) to the web server user and set correct file permissions for them.

  4. After installing, Everything is working even the import, but when opening the website I got the followinf error : For all the .css and .js I looked into the files, but its empty /pub/static/frontend/Smartwave/porto/en_US/owl.carousel/owl.carousel.min.js Failed to load resource: the server responded with a status of 403 (Forbidden).

    A: Change the owner of the uploaded files (pub and var) to the web server user and set correct file permissions for them.

  5. After installing, Not able to find the demo installation

    A: Pls make sure you did follow step 2 in this installation guide.

  6. Theme features don't work after installation or upgrade

    A: If some theme features don't work after installation or some resources (e.g. images) are not displayed in the frontend, it often indicates problems with file permissions – your Magento doesn’t have access to the theme files because of incorrect file permissions on your server.

  7. Fatal error: Uncaught exception 'Magento\Framework\Exception\LocalizedException'

    A: If you see the above error message, then pls try to set permission on pub and var directories.

  8. Error when select home version 9

    A: If you see the following error when selecting Home Version 9: We're sorry, an error has occurred while generating this email.

    - Then, pls go to Content > Blocks > Porto - Homepage 9 look for and remove category_id="21" from your content.

    - Clear Page Cache.

  9. In General > Design I dont see Smart Porto theme in package theme dropdown list.

    A: This may be an issue in your database. Pls insert a new row for "Smartwave Porto" theme into "theme" table in the database.

  10. Nothing changes on the frontend after make color changes in Porto- Design Panel?

    10. Nothing changes on the frontend after make color changes in Porto- Design Panel? A: Please remove this file pub/media/porto/configed_css/design_default.css, then go to Porto - Design Panel > Save Config. See the changes.

  11. When a user logs in, under the "my account" links, they links are all white and cannot be read (my account, my wishlist, etc)

    A: Pls insert the following content into Customization Setting.

    .customer-welcome .header.links {
        background-color: #666;
    }
    .customer-welcome ul:before {
        border-color: transparent transparent #666 transparent;
    }
  12. Menu dropdown doesnt show?

    A: In Cache Management, please try to flush the static files cache.

  13. After installing if we reload or refresh the page two three times so it will not appear correctly?

    A: Please try to enable merge javascript files in Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

  14. Top header (header 3/header 4) unclickable?

    A: Please try to use the following content in Customization Settings:

    body .page-header.type4 .header.panel {
        z-index: 9;
    }
  15. Why is your site not same with demo content?

    A: There are two options you need to check:

    Option 1: In many cases, customers want to have the site with same demo content as our demo. Please make sure you did install the quickstart package. Quick Start Package is included inside theme files that you can download from Themeforest. It is almost exact copy of our demo site.

    Option 2: Installed the template package but did not get the desired result. In this case, please try to go Porto- Setting Panel > Save Configure, Porto- Design Panel > Save Configure, then check the site again.

  16. How to call a custom font to the theme?

    A: To add custom fonts you would need to add those fonts with custom CSS in Customization Setting section. and input the font name into Theme Design > Font > Custom Field or call the custom font directly to app/design/frontend/Smartwave/porto/Magento_Theme/layout/default_head_blocks.xml

    If you are unable to do this by yourself, please contact us via helpdesk to get the help on this.

  17. How to disable the Zoom function from Product Page

    A: Zoom is core functionality of Magento default. It will need to disable directly in app\design\frontend\Smartwave\porto\Magento_Catalog\templates\product\view\gallery.phtml.

    Please remove the following content:

                                                <script type="text/javascript">
    require([
    'jquery'
    ], function ($) {
    var loaded = false;
    $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){
    $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) {
    //console.log('fotorama is loaded');
    loaded = false;
    $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) {
    if(!loaded){
    $('.product.media .fotoramastage .fotoramaloaded--img').trigger('zoom.destroy');
    $('.product.media .fotoramastage .fotoramaactive').zoom({
    touch:false
    });
    loaded = true;
    }
    });
    $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) {
    $('.product.media .fotoramastage .fotoramaactive').zoom({
    touch:false
    });
    });
    $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) {
    $('.product.media .fotoramastage .fotoramaloaded--img').trigger('zoom.destroy');
    $('img.zoomImg').remove();
    });
    $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) {
    $('.product.media .fotoramastage .fotoramaloaded--img').trigger('zoom.destroy');
    $('img.zoomImg').remove();
    $('img.fotoramaimg').not('.fotoramaimg--full').each(function(){
    $(this).after($(this).parent().children("img.fotoramaimg--full"));
    });
    $('.product.media .fotoramastage .fotoramaactive').zoom({
    touch:false
    });
    $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) {
    $('.product.media .fotoramastage .fotoramaloaded--img').trigger('zoom.destroy');
    $('.product.media .fotoramastage .fotorama__active').zoom({
    touch:false
    });
    });
    });
    });
    });
    });
    </script>
                                                
  18. Layered navigation sidebar only shows the top category items

    A: In file \Smartwave\porto\Mageplaza_LayeredNavigation\templates\layer\category_filter.phtml, please change:

    $subcategories = $category
    to
    getChildrenCategories();

Support & Customization

Thanks for using Porto Magento 2 Theme!

We would like to thank you for using Porto Magento 2 Theme! We are very pleased you have chosen Porto eCommerce for your website, we always provide best support for our customers, you can confirm it from our themeforest review rating - top 1 in themeforest!

If you have any difficulities with Porto Magento 2 Theme or need any additional service, do not hesitate to contact us. We provide 24/7 Support!

Regarding presale questions and free support for theme usage, please contact us through themeforest support page. We will provide you amazing one-by-one email support and you will get answers more faster than you expected. We also provide support in weekends, but may require some more hours than normal working days.

Regarding customization service based on our themes or other magento related, please contact us to nicework125@gmail.com. We have an amazing team to provide customization service who have done bunch of customization projects so far, will provide you reasonable quote before start.


Free Support for Questions and Issues

Themeforest Support Page

Customization Service(additional cost)

nicework125@gmail.com

Change Log

Version 3.0.3 (3/31/2018)

- Fixed

Fixed: minor css style issues.(M1, M2)

- Updated

Added: New 12 types of About Us Pages.(M1, M2)
Added: daily deal extension.(M2)
Updated: daily deal extension's styles.(M1)
Updated: the correct links of the footer.(M1,M2)

Version 3.0.2 (3/15/2018)

- Fixed

Fixed: compilation issue by layerednavigation extension.(M2)
Fixed: old header type style issues.(M2)

- Updated

Updated: daily deal extension's styles.(M1)
Updated: reorgnized header type variations, removed some unnecessary header types.(M2)
		removed old type 17 (you can use header type 2)
		removed old type 19 (you can use header type 6)
		removed old type 21 (you can use header type 17)
		removed old type 22 (you can use header type 10)
		removed old type 23 (you can use header type 7)
		removed old type 24 (you can use header type 5)
		removed old type 25 (you can use header type 8)
		removed old type 26 (you can use header type 13)
		removed old type 27 (you can use header type 19)

Version 3.0.1 (2/20/2018)

- Fixed

Fixed: the menu columns in the megamenu popup was not showing correctly.(M1)
Fixed: in demo 15, parallax images were not working properly in mobile devices.(M1)
Fixed: in demo 3's category page, layered navigation's expand/collapse button's activity was wrong.(M1)
Fixed: in demo 3's category page, toolbar button styles were not correctly.(M1)
Fixed: minor css style issues.(M1)
Fixed: license activation issue.(M1, M2)

- Updated

Updated: reorgnized header type variations, removed some unnecessary header types.(M1)
		removed old type 9, 20 (you can use header type 3)
		removed old type 21 (you can use header type 4)
		removed old type 22 (you can use header type 6)
		removed old type 23 (you can use header type 9)
		removed old type 24 (you can use header type 21)
		removed old type 25 (you can use header type 12)
		removed old type 26 (you can use header type 13)
		removed old type 27 (you can use header type 14)
		removed old type 28 (you can use header type 10)
		removed old type 29 (you can use header type 16)
		removed old type 30 (you can use header type 20)

Version 3.0.0 (1/16/2018)

- Fixed

Fixed: quickview link was not showing in category page list mode.
Fixed: configuration was not correct in theme files, different with demo site.(M2)
Fixed: styling issue when it has no brands attribute in product detail page.(M1)
Fixed: In category page's sidebar, maximize-minimize icons were reversed.
Fixed: styling issue in product detail page's add-to-cart sticky feature.
Fixed: In some case, left and right arrow position was not centered vertically in product detail page's image zoom box.
Fixed: In demo 8's product detail page, font icons in the right sidebar was not styled as main color.
Fixed: different background color issue in add cart popup.
Fixed: Minor styling issues.
Fixed: hover styling issue in demo 12's classic menu.
Fixed: styling issue in quickview popup in demo 2(M2)
Fixed: left navigation issue while scrolling(M1)
Fixed: an issue for full width demos(M2), it was being enlarged from boxed width while page load.

- Updated

Added: speed optimization tab, you can now minimize bootstrap, animate css and jquery ui files to speedup page download size.
Added: max-height for full screen sliders to make them nice on large screen resolutions.
Added: Made sidebar content as popup in below 991px width mode.
Added: min-height for demo 15's homepage blocks, to avoid breaking in mobile devices.
Added: jquery-ui js optimization option
Added: animate.css optimization option
Added: bootsrap optimization optioon
Updated: Bootstrap version to 4.0
Updated: rearranged demo order for Magento 2 version, all demo orders are now same as Magento 1 demos.
Updated: menu color of demo 1
Updated: RTL compatibility.
Updated: compare link to be always visible like M1 demos(M2)
Updated: menu position in mobile resolutions as original M1 demos(M2)
Updated: For modern designs, restored mini-cart popup as classic designs
Updated: gap space size between columns in modern demo 12
Updated: made filter popup under 991px mobile mode in category page.
Updated: right sidebar of product detail page smaller in full screen mode.
Updated: demo 18's homepage slider, works beautifully on any screen resolutions.(M1)
Updated: layout column option setting issue in admin option(M2)
Updated: mobile header for Magento 2 demos, mobile menu position is now same as Magento 1 demos
Updated: replaced related products with featured products in product detail page.(M2)
Updated: WeltPixel Quickview Extension(M2)
Updated: Made upsell products as owl carousel in product detail page.(M2)
Updated: quickview styling(M2)
Updated: mobile responsiveness for category page in 320~480px width mode.
Updated: quickstart package content(comes with Magento 1.9.3.6 and 2.2.1)
Updated: documentation
Removed: top bar in newsletter popup for all m2 demos

Version 2.7.0 (9/26/2017)

- Fixed

- The white space issue in the bottom of newsletter popup (M1)
- The issue with breadcrumb's position in detail pages (M1)
- The "Add to cart" button style issue. Make icon and text vertically aligned (M1)
- The style issue with sidebar content in detail page when viewing on 1366x768 mode
- When some of top header links font color is white.
- Style issue with Featured products in the sidebar of category page in Demo 8 (M1)
- Issue "the content not same as demo site" and style issues when importing some of Magento 1.x demo themes with quickstart package & template installer (M1 & M2)
- "Add to Cart" button in Quickview popup. Reduced space between icon and text, and made them vertically centered (M1 & M2)
- Style issues in Search Result Page (M2)
- Style issue in  bundle product page (M2)
- Issue with "Close button" in Quickview popup, made it's appearance look better (M2)
- Issue when importing demo content 12-14-17 (modern style) (M2)

- Updated

- New Skin and Design Demo 21  (M1 & M2)
- Add patch for Magento 2.2.x
- Compatible magento 2.2

Version 2.6.2 (9/26/2017)

- Fixed

- The white space issue in the bottom of newsletter popup (M1)
- The issue with breadcrumb's position in detail pages (M1)
- The "Add to cart" button style issue. Make icon and text vertically aligned (M1)
- The style issue with sidebar content in detail page when viewing on 1366x768 mode
- When some of top header links font color is white.
- Style issue with Featured products in the sidebar of category page in Demo 8 (M1)
- Issue "the content not same as demo site" and style issues when importing some of Magento 1.x demo themes with quickstart package & template installer (M1 & M2)
- "Add to Cart" button in Quickview popup. Reduced space between icon and text, and made them vertically centered (M1 & M2)
- Style issues in Search Result Page (M2)
- Style issue in  bundle product page (M2)
- Issue with "Close button" in Quickview popup, made it's appearance look better (M2)
- Issue when importing demo content 12-14-17 (modern style) (M2)

- Updated

- Rearrang the Demo Import section in Porto- Setting Panel > Demo Import (M1 & M2)
- Upgrade Mage_fan Blog extension to new version for quickstart package (M2)
- Compatible magento 2.1.8 & 2.1.9
- Updated documentation: screenshots and some instructions are updated
- Make quickstart pacakge for Magento 2.1.9 (M2)
- Make quickstart pacakge for Magento 1.9.3.6 (M1)

Version 2.6.1 (8/07/2017)

- Fixed

- Fixed the isue with mageplaza extension (M2)
- Fixed the isue when switching between language stores
- Fixed minicart icon's position is incorrect Demo 18 (M1)

- Updated

- Skin and Design update for Demo 12 (M1)
- Skin and Design update for Demo 19 (M1)
- Skin and Design update for Demo 20 (M1)
- Skin and Design update for Demo 12 (M2)
- Skin and Design update for Demo 19 (M2)
- Skin and Design update for Demo 20 (M2)
- Update Mobile Menu Skin (M1)

Version 2.6.0 (6/14/2017)

- Fixed

- Fix the RTL style issue on header type 21 (M1)
- Fix appearance of custom block in sidebar of product page (M2)
- Fix the style issue on header type 15 (M2)
- Fix the issue when cannot see see searchbox's "Search entire store here" text in search bar (M2)
- Fix the issue when buttons in product page dont respond to different screens (M2)
- Fix the issue with header of product page when it was not responsive on mobile (M2)
- Fix some responsive issues (M2)

- Updated

- Skin and Design update for Demo 14 (M1)
- Skin and Design update for Demo 15 (M1)
- Skin and Design update for Demo 16 (M1)
- Skin and Design update for Demo 17 (M1)
- Skin and Design update for Demo 18 (M1)
- Skin and Design update for Demo 6 (M2)
- Skin and Design update for Demo 8 (M2)
- Skin and Design update for Demo 11 (M2)
- Skin and Design update for Demo 13 (M2)
- Skin and Design update for Demo 16 (M2)
- Add social instagram photo (M1 & M2)
- Add patch magento 2.1.6 to 2.1.7 Only
- Compatible magento 2.1.7
- Update Mageplaza Layer Navigation extension

Version 2.5.0 (4/30/2017)

- Fixed

- Fix bug one page category link. (M1)
- Fix bug view lightbox gallery image product view. (M1)
- Fix bug quickview on ipad. (M1)
- Fix bug parallax on mobile and tablet. (M1)
- Fix bug toolbar aw blog on porto (M1)
- Align the menu icon on mobile: this change is applied to some of Porto demo, it focus providing a user-friendly mobile menu for users
- Fix bug header demo (M1)
- Fix style bugs in wishlist layout page  (M1)
- Fix the 500 error when enabling the flat catalog  categories and flat products option (M2)
- Fix the issue when you enter a search term in the standard search box and then select a autocomplete suggestion (M2)
- Fix the issue with infinity scroller (M2)
- Fix the style issue for cart icon on Safari (M2)
- Fix RTL bugs (M2)

- Updated

- Skin and Design update for Demo 7 (M1)
- Skin and Design update for Demo 11 (M1)
- Skin and Design update for Demo 13 (M1)
- Skin and Design update for Demo 4 (M2)
- Skin and Design update for Demo 10 (M2)
- Skin and Design update for Demo 18 (M2)
- Provide the ability to import the old skin of Porto demos
- Compatible with Magento 2.1.6 & Update theme patch for Magento 2.1.6.
* Magento 2.1.6 has released with importance change "optimized image resize". The users need to make the image resize with a command,
 no way to use the Aspect Ratio Image option in panel. In case of using Magento 2.1.6, please apply the patch above

Version 2.4.7 (3/20/2017)

- Fixed

- Some minor css issues (M2)
- The css style issue in Demo 14's Slider on mobile (M2)

- Updated

- Added "Infinite Scroller" option to Category View Setting (M2)
- Added "Show Qty Field" option to Category View Setting (M2)
- Added Google Right Snippets to Category View (M2)
- Skin and Design update for Demo 7 (M2)
- Skin and Design update for Demo 15 (M2)

Version 2.4.6 (2/20/2017)

- Fixed

- new/sale label not showing (M2)
- Mobile menu issue on Iphone 6/6plus (M2)

- Updated

- Skin and Design update for Demo 1 (M2)
- Skin and Design update for Demo 2 (M2)
- Skin and Design update for Demo 5 (M2)
- Skin and Design update for Demo 9 (M2)
- Skin and Design update for Demo 17 (M2)
- Skin and Design update for Demo 10 (M1)
- Add new header type (M1 & M2)
- Add fullwidth background for upsell products (M2)
- Add filter products block to work on detail page (M2)

Version 2.4.5 (1/20/2017)

- Fixed

- Minor css style issues (  M1 and M2)
- Some issues in RTL theme (M2)
- Product video didnot show in product detail page (M2)
- New/Sale label didnot show

- Updated

- Skin and Design update for Demo 2
- Skin and Design update for Demo 3
- Skin and Design update for Demo 4
- Skin and Design update for Demo 5
- Skin and Design update for Demo 6
- Skin and Design update for Demo 8
- Skin and Design update for Demo 9

Version 2.4.4 (12/3/2016)

- Fixed

- Revert Mageplaza Layered Navigation Extension with the old version.
- Minor CSS Style issues.

- Updated

- Updated Some CSS Styles Demo 3.

Version 2.4.3 (11/26/2016)

- Fixed

- Mobile menu was not working correctly on some of the demos.
- PHP issue in gallery.phtml file.
- Top Links Dropdown was not working in Demo 11.
- Minor CSS Style issues.

- Updated

- Updated Sample Demo 3.
- Added new Header Type 14.
- Added an option "Show Share Buttons at the Right Side" in Settings Panel.
- Added an option for Enable/Disable Login Popup in Settings Panel.
- Added options for change the page layout of Product Detail Page and Category Page in Settings Panel.
- Added new Custom Block into the Product Detail Page.
- Added an option for change the Upsell Products Grid Columns in Settings Panel.
- Added an option for change the Upsell Block's position in Settings Panel.
- Updated Mageplaza_LayeredNavigation Extension with the latest version.

Version 2.4.2.1 (11/11/2016)

- Fixed

- Changed one js file of Mageplaza_Core extension on this version for the issue that theme colors in design panel are all FFFFFF. It's located in /app/code/Mageplaza/Core/view/adminhtml/web/js/jscolor.min.js
- Revert 3 encoded php files.

Version 2.4.2 (11/10/2016)

- Fixed

- Minor CSS Style issues.
- Ajax Loader was not working correctly.
- Fixed Compilation issue.

- Updated

- Updated Theme Activation.
- Added options "Keep Image Aspect Ratio", "Image Width", "Image Height" for Product Media Gallery in Stores > Configuration > Porto > Porto - Settings Panel > Product View.

Version 2.4.1 (11/6/2016)

- Fixed

- Minor CSS Style issues.
- Added Empty Stars into Product Detail Page, if it has no reviews.
- Category list on sidebar was showing in the quickview for demo 19.

- Updated

- Added Notification Message Feature.
- Added Theme Activation Feature.
- Updated Home 20 with parallax.
- Changed some of the Ajax Loader Icons.
- Added "AddThis" social sharing icons in Product Detail Page.

Version 2.4.0.1 (10/26/2016)
No changes on this version.

Version 2.4.0 (10/26/2016)

- Fixed

- CSS Style issue for hover product images in product grid, when disable border radius.
- Filter toggle was not showing, when change grid/list mode on category page.
- Fatal error with New Order Email.
- Toolbar Style issue on category page for RTL version.
- Minor CSS Style issues.

- Updated

- Compatible with Magento 2.0.10.
- Compatible with Magento 2.1.2.
- Updated Mageplaza LayeredNavigation Extension.
- Added New Demo Version 20.
- Added New Header Type 13.
- Added Login popup.
- Changed Ajax Loader Icons.

Version 2.3.4.3 (9/21/2016)

- Fixed

- Mageplaza LayeredNavigation Extension issue on Magento 2.0.x.
- LayeredNavigation Filtered Items were showing duplicated items.

Version 2.3.4.2 (9/20/2016)

- Fixed

- Mageplaza LayeredNavigation Extension issue on Magento 2.0.x.

Version 2.3.4.1 (9/15/2016)

- Fixed

- Category Filter was not working on Category Page.
- Minor CSS Style issues.

- Updated

- Added color change options for Price Slider in LayeredNavigation.
- Updated Some CSS Styles for Color Swatches and Size Swatches, Price Slider.

Version 2.3.4 (9/5/2016)

- Fixed

- Some of the colors were not updating for Category Event Block on Magento EE.
- Minor CSS Style issues.

- Updated

- Implemented Mageplaza LayeredNavigation Extension.
- Compatible with WeltPixel Quickview Extension.

Version 2.3.3 (8/29/2016)

- Fixed

- Demo 7 Checkout Page Styles.
- Minor CSS Style issues.

- Updated

- Updated Demo 19 Styles.
- You can import sample cms pages and static blocks for only one demo version.
- Added a new product tab style "Sticky Tab" in Stores > Settings > Configuration > Porto > Porto - Settings Panel > Product View.
- Fully Compatible with Magento EE.
- Added QuickStart Package.

Version 2.3.2 (7/27/2016)

- Fixed

- Minor CSS Style issues.

- Updated

- Added Header Type 12.
- Added an Option "Show Category List on Left" in Stores > Configuration > Porto > Porto - Settings Panel > General.
- Added New Demo Version 19.

Version 2.3.1.2 (7/5/2016)

- Fixed

- Added "API Key" option for google map on contact us page.

- Updated

- Added "lazy_owl"(0 or 1) attribute for lazy load product images in owl carousel mode(Filterproducts).

Version 2.3.1.1 (6/29/2016)

- Fixed

- Socialfeeds extension's etc/adminhtml/system.xml file had a spell issue.
- "SW Menu" tab was not showing on Magento 2.1.0.

Version 2.3.1 (6/28/2016)

- Fixed

- Minor Sample CMS Contents.
- Minor CSS Styles.

- Updated

- Added Socialfeeds extension for Facebook Fanbox, Flickr Photos Blocks.
- Added an Option for show/hide flag images in language switcher.(You can add your own flag images into /pub/media/wysiwyg/smartwave/porto/flags/ directory.)
- Compatible with Magento 2.1.0.

Version 2.3.0 (6/14/2016)

- Fixed

- Sometimes megamenu was not working, when enable full page cache.
- Move Product Tab setting was not working, if it's accordion.
- Minor CSS Styles.

- Updated

- Added Bestseller products Block.
- Added Sale products Block.
- Home Version 12, 15, 2, 3, 16, 9, 11 from 1.x version are available as Home 12, 13, 14, 15, 16, 17, 18.
- Added Header Type 8, 9, 10, 11.
- Updated some of the sample cms contents.
- "New" and "Sale" Product Label.
- Added an option for showing short name of currencies.
- Added custom notice block.
- Compatible with IWD_Onepagecheckout extension.

Version 2.2.1 (5/23/2016)

- Fixed

- Megamenu was not working, when font icon was added for submenu items.
- Sometimes, minicart qty was not showing.
- Mobile menu couldn't be closed on Homepage type 9.
- Removed porto_child theme files from the theme package.
- Minor CSS Styles.

- Updated

- Added Custom Product Tabs feature.
- Added Sticky Header Feature.
- Added an Option for showing one column of products grid on Phone Devices.
- Added AddtoCart Sticky feature on Product Detail Page.
- Added 3 types of product tab styles, Accordion, Horizontal, Vertical.
- Added an Option for moving product tab at the right of the product image.
- Added Prev/Next Products feature.
- Added Newsletter Popup feature.
- Added Header and Footer in checkout page.
- Added RTL child theme version.
- Compatible with Magefan_Blog extension.

Version 2.2.0 (4/23/2016)

- Fixed

- Compile command was not running.
- Minor PHP errors.
- Minor CSS Styles.

- Updated

- Added Left side megamenu feature.
- Added Header Type 6.
- Added Header Type 7.
- Home Version 14, 6, 7, 17 from 1.x version are available as Home 8, 9, 10, 11.
- Added 1280px maximum page width mode.
- Added an option for disable all border radius.
- Added flex grid mode.
- Added small list template for filterproducts.

Version 2.1.0 (2/6/2016)

- Fixed

- Mini-cart Qty was not showing on mozilla.
- Minor CSS Styles.

- Updated

- Added Megamenu Extension.
- Added "All Categories" block for cms pages.
- Added Header Type 5.
- Home Version 8, 18, 10 from 1.x version are available as Home 5, 6, 7.
- Updated all javascript in the CMS Contents.
- Added an option for disable all border radius.
- Added grid template for filterproducts.
- Added example porto_child theme.

Version 2.0.0.2 (1/13/2016)

- Fixed

- Import CMS Sample Datas issue.
- Minor CSS Styles.

Version 2.0.0.1 (12/25/2015)

- Fixed

- Minor Css Styles.

Version 2.0.0 (12/23/2015)
Initialized