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, 2.2.x, 2.3.x and Magento 2.4.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.
- System Requirements - Required system credentials for your magento installation.
- Installation Guide - Installation guide that describes how to install magento2.
- Online Magento 2 guide - Online magento documentation that describes about magento2 in detail.
- Magento Forum - Magento forum site.
- stackoverflow.com - You can also get some useful articles from stackoverflow.
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
-
We recommend you to duplicate your live store on a development store and try installation on it in advance.
-
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.
-
Disable all cache related section that you have in your magento.
Theme Installation
-
Theme Files Upload
- Upload via FTPLog 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 you are using Magento 2.0.x, please only install
patch magento 2.0.x.zip
. - If you are using Magento 2.1.x, no need to apply any theme patch.
- If you are using Magento 2.2.0-2.2.3, please install
patch magento 2.2.x
- If you are using Magento 2.2.4 or above, please install
patch Magnto 2.2.x
andpatch Magento 2.2.4 & above
- If you are using Magento 2.3.x (< 2.3.3) please install
patch magento 2.3.x
- If you are using Magento 2.3.3 and above, please install
patch Magento 2.3.x
first, then upload patch Magento 2.3.3 & above- If you are using Magento Enterprise, please install
patch Magento EE.zip
. - If you are using Magento 2.2.4 or above, please install
- If you are using Magento 2.0.x, please only install
patch magento 2.0.x.zip
. - If you are using Magento 2.1.x, no need to apply any theme patch.
- If you are using Magento 2.2.0-2.2.3, please install
patch magento 2.2.x
- If you are using Magento 2.2.4 or above, please install
patch Magnto 2.2.x
andpatch Magento 2.2.4 & above
- If you are using Magento 2.3.x (< 2.3.3) please install
patch magento 2.3.x
- If you are using Magento 2.3.3 and above, please install
patch Magento 2.3.x
first, then upload patch Magento 2.3.3 & above- If you are using Magento Enterprise, please install
patch Magento EE.zip
. - If you are using Magento 2.2.4 or above, please install
-
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. - Select
Smartwave Porto
theme.in
Stores > Configuration > General > Design > Design Theme > Design Theme
forMagento 2.0.x version
select
Smartwave Porto
theme inContent > Design > Configuration
page for Magento 2.1.x or 2.2.x version
You can selectSmartwave Porto RTL
theme, if you want to build a RTL site. - Note:
Until Backend returns success message, Go to
System -> Cache management
. Select all, choose refresh action and submit. Porto theme has been applied for Front-end.
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.
Theme Activation
-
Get the purchase code
You can get the purchase code from https://themeforest.net/downlaods.
-
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
.
-
Click two
Import
buttons to prepare demo installation. -
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. DEMO VIDEO: <
Patch Installation
- If you are using Magento 2.0.x, please only install
patch magento 2.0.x.zip
. - If you are using Magento 2.1.x, no need to apply any theme patch.
- If you are using Magento 2.2.0-2.2.3, please install
patch magento 2.2.x
- If you are using Magento 2.2.4 or above, please install
patch Magnto 2.2.x
andpatch Magento 2.2.4 & above
- If you are using Magento 2.3.x (< 2.3.3) please install
patch magento 2.3.x
- If you are using Magento 2.3.3 and above, please install
patch Magento 2.3.x
first, then upload patch Magento 2.3.3 & above- If you are using Magento Enterprise, please install
patch Magento EE.zip
. - If you are using Magento 2.2.4 or above, please install
Theme Customization
Make the Child Theme and Customize the Theme
-
We recommend you to create the child theme, if you need to customize the theme.
-
Make the child theme in the same directory with "porto". Sample "porto_child" theme was already provided in the theme package. You can refer this sample
https://www.dropbox.com/s/ckm9lg1srobtuvy/child_theme.zip?dl=0
./app/design/frontend/Smartwave/porto_child
-
Go to
Content > Design > Themes
- Make sure that your child themeSmartwave Porto Child
appears within the theme list. -
Go to
Stores > Configuration > Design
, click on theDesign Theme
tab, select the themeSmartwave Porto Child
within the dropdown list, clickSave Config
.If your magento version is 2.1.x or 2.2.x, go to
Content > Design > Configuration
, click on theEdit
link for your own store in the grid, select the themeSmartwave Porto Child
within the dropdown list which the label isApplied Theme
, clickSave Config
. -
Add the only changed files, not all files into the child theme's directories.
-
It's better to add your own custom css styles into
Stores > Configuration > Porto > Porto - Settings Panel > Customization
. -
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.
-
We recommend you to duplicate your live store on a development store and try installation on it in advance.
-
Backup magento files and the store database.
-
Disable all cache related section that you have in your magento.
Theme Installation
-
Theme Files Upload
- Upload via FTPLog into your hosting space via a FTP software. ie, FileZilla.
Unzip
- Upload via CPanelTheme 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 withPatch for Magento 2.0.x.zip
.
If your magento version is 2.1.x, you should patch the theme withPatch for Magento 2.1.x.zip
If your magento version is 2.1.6, you should patch the theme withPatch 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 withPatch for Magento 2.2.x.zip
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 you are using Magento 2.0.x, please only install
patch magento 2.0.x.zip
. - If you are using Magento 2.1.x, no need to apply any theme patch.
- If you are using Magento 2.2.0-2.2.3, please install
patch magento 2.2.x
- If you are using Magento 2.2.4 or above, please install
patch Magnto 2.2.x
andpatch Magento 2.2.4 & above
- If you are using Magento 2.3.x (< 2.3.3) please install
patch magento 2.3.x
- If you are using Magento 2.3.3 and above, please install
patch Magento 2.3.x
first, then upload patch Magento 2.3.3 & above- If you are using Magento Enterprise, please install
patch Magento EE.zip
. - If you are using Magento 2.2.4 or above, please install
-
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
.
DEMO VIDEO: How to import demo on Porto Magento 2 theme.
-
Click 2
Import
buttons to prepare demo installation. -
Click
Demo X
button to install demo version that you prefer to install.
Quick Start Package
Package Installation
-
Package Files Upload
- Upload via FTPLog into your hosting space via a FTP software. ie, FileZilla.
Unzip
- Upload via CPanelTheme 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.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. -
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. -
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. -
Select
Smartwave Porto
theme inStores > Configuration > General > Design > Design Theme > Design Theme
for Magento 2.0.x version, and selectSmartwave Porto
theme inContent > Design > Configuration
page for Magento 2.1.x version.
You can selectSmartwave Porto RTL
theme, if you want to build a RTL site.
Smartwave Porto theme
in Content > Design > Configuration > Edit your store
.
Demo Installation
Porto provides extremely easy - one click demo installation. In order to do demo installation, you should disable all the cache first, then import Static Blocks and CMS pages in Porto - Settings Panel > Installation
.
DEMO VIDEO: How to import demo on Porto Magento 2 theme.
-
Click 2
Import
buttons to prepare demo installation. -
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" product_type="1" 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">
require([
'jquery',
'owl.carousel/owl.carousel.min'
], function ($) {
$("#featured_product .owl-carousel").owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
loop: true,
navRewind: true,
margin: 0,
nav: false,
navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"],
dots: true,
responsive: {
0: {
items:2
},
640: {
items:3
},
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.
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.
-
Go to the Manage Categories page to follow
Products > Inventory > Categories
. -
Select
Default Category
in the treeview area at the left side. -
Click
Add Subcategory
button, then input Category name, Description, etc. Notes: set the optionsIs Active
to "Yes",Include in Navigation Menu
to "Yes" inGeneral Information
tab. -
If you want to display banner image, please set image in
Content
tab. -
In order to display banner with static block, please set
Display Mode
to "Static block and products" inDisplay Settings
tab and setAdd CMS Block
inContent
tab. -
In order to display full width banner, please input html codes for the full width banner in
Content
tab. Please don't forget, the configurationCategory Description Position
should beAs Full Width below the Header
inStores > 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>
- Click "Save Category" button, to update your changes.
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>
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
DEMO VIDEO: How to add custom tab on Porto Magento 2 theme
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.
Product Variations Configuration
General Information
Porto eCommerce provides serveral variations of the product detail page, Default Type
, Extended Type
, Full Width
, Grid Images
, Sticky Right Info
, Vertical Tumbnail Images
.
You can choose one of the product page types, please go to Stores > Settings > Configuration > Porto Settings Panel > Product View > Product Page Type
and choose option as your choice. Those types will work well with 1 column page layout.
Products > Catalog > [Add or Edit your product]
. custom_block
, custom_block_2
won't work with some of the product page types, so custom_block
will work with Extended Type
, Full Width
, Sticky Right Info
and custom_block_2
will work with only Extended Type
.
Default Type
Extended Type
Product Images will be shown with owl carousel, you can input below sample custom blocks for this type as demo.
<div class="custom-block custom-block-1">
<div>
<i class="porto-icon-shipped"></i><h3>FREE<br/>SHIPPING</h3>
</div>
<div>
<i class="porto-icon-us-dollar"></i><h3>MONEY BACK<br/>GUARANTEE</h3>
</div>
<div>
<i class="porto-icon-online-support"></i><h3>ONLINE<br/>SUPPORT 24/7</h3>
</div>
</div>
- Custom Block 2
<div style="background:url({{media url="wysiwyg/smartwave/porto/product/extended_product_video.jpg"}}) no-repeat;background-size: cover;padding:100px 0; text-align:center;margin-top:-50px;">
<h3 style="font-family:'Open Sans';font-size: 35px;font-weight: 600;color: #21293c;">Concept Film</h3>
<a style="font-weight: 600;color: #7b858a;font-size: 20px;line-height: 36px;text-transform:uppercase;text-decoration:none;" href="javascript:void(0)">Watch <img src="{{media url="wysiwyg/smartwave/porto/product/extended_product_playicon.png"}}" alt="" style="opacity: 0.6;margin-left: 5px;position: relative;top: -2px;width:38px;vertical-align:middle;" /></a>
</div>
Full Width
Product page content will be shown with full width, you can input below sample custom blocks for this type as demo.
<div style="background:url({{media url="wysiwyg/smartwave/porto/product/shop1_fullwidth_product_video.jpg"}}) center no-repeat;background-size:cover;padding:100px 0;padding:5vw 0;text-align:center;margin-top:-50px;">
<a href="javascript:void(0)"><img src="{{media url="wysiwyg/smartwave/porto/product/shop1_fullwidth_product_playicon.png"}}" alt="" /></a>
</div>
Grid Images
Sticky Right Info
Product informations will be shown by sticky at right side of the product images list, you can input below sample custom blocks for this type as demo.
<div class="custom-block custom-block-1">
<div>
<i class="porto-icon-shipped"></i><h3>FREE<br/>SHIPPING</h3>
</div>
<div>
<i class="porto-icon-us-dollar"></i><h3>MONEY BACK<br/>GUARANTEE</h3>
</div>
<div>
<i class="porto-icon-online-support"></i><h3>ONLINE<br/>SUPPORT 24/7</h3>
</div>
</div>
Vertical Thumbnails
Product Variations Configuration
General Information
Porto eCommerce provides serveral variations of the product detail page, Default Type
, Extended Type
, Full Width
, Grid Images
, Sticky Left Right Info
, Sticky Right Info
, Vertical Tumbnail Images
.
You can choose one of the product page types, please go to System > Configuration > Porto Settings Panel > Product View > Product Page Type
and choose option as your choice. Those types will work well with 1 column page layout.
Catalog > Manage Products > [Add or Edit your product]
. You should assign the attributes for your attribute sets, product_page_type
, product_image_size
, custom_block
, custom_block_2
, if there is no options. custom_block
, custom_block_2
won't work with some of the product page types, so custom_block
will work with Extended Type
, Full Width
, Sticky Left Right Info
, Sticky Right Info
and custom_block_2
will work with only Extended Type
.
Default Type
Extended Type
Product Images will be shown with owl carousel, you can input below sample custom blocks for this type as demo.
<div class="custom-block custom-block-1">
<div>
<i class="icon-shipped"></i><h3>FREE<br/>SHIPPING</h3>
</div>
<div>
<i class="icon-us-dollar"></i><h3>MONEY BACK<br/>GUARANTEE</h3>
</div>
<div>
<i class="icon-online-support"></i><h3>ONLINE<br/>SUPPORT 24/7</h3>
</div>
</div>
- Custom Block 2
<div style="background:url({{media url="wysiwyg/porto/product/extended_product_video.jpg"}}) no-repeat;background-size: cover;padding:100px 0; text-align:center;">
<h3 style="font-family:'Open Sans';font-size: 35px;font-weight: 600;color: #21293c;">Concept Film</h3>
<a style="font-weight: 600;color: #7b858a;font-size: 20px;line-height: 36px;text-transform:uppercase;text-decoration:none;" href="javascript:void(0)">Watch <img src="{{media url="wysiwyg/porto/product/extended_product_playicon.png"}}" alt="" style="opacity: 0.6;margin-left: 5px;position: relative;top: -1px;width:38px;" /></a>
</div>
Full Width
Product page content will be shown with full width, you can input below sample custom blocks for this type as demo.
<div style="background:url({{media url="wysiwyg/porto/product/shop1_fullwidth_product_video.jpg"}}) center no-repeat;background-size:cover;padding:100px 0;padding:5vw 0;text-align:center;">
<a href="javascript:void(0)"><img src="{{media url="wysiwyg/porto/product/shop1_fullwidth_product_playicon.png"}}" alt="" /></a>
</div>
Grid Images
Sticky Left Right Info
Product informations will be shown by sticky at both side of the product images list, you can input below sample custom blocks for this type as demo.
<div class="fullwidth-row" style="background-color: #f4f4f4; padding: 100px 0;">
<div class="container">
<div class="row">
<div class="col-md-4">
<div style="overflow:hidden;">
<h3 style="font-size: 20px; color: #21293c;position: relative;display: inline-block;font-weight:700;line-height:32px;margin-bottom:20px;">INCREDIBLE QUALITY<span style="position: absolute;border-top: 1px solid #21293c;top: 50%;margin-top: -0.5px;left: 100%;margin-left: 25px;width: 50vw;"></span></h3>
<p style="line-height:24px;margin-bottom:20px;font-size:14px;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
<div style="overflow:hidden;">
<h3 style="font-size: 20px; color: #21293c;position: relative;display: inline-block;font-weight:700;line-height:32px;margin-bottom:20px;">ADVANCED SOUND<span style="position: absolute;border-top: 1px solid #21293c;top: 50%;margin-top: -0.5px;left: 100%;margin-left: 25px;width: 50vw;"></span></h3>
<p style="line-height:24px;margin-bottom:20px;font-size:14px;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</div>
<div class="col-md-4 a-center">
<img src="{{media url="wysiwyg/porto/product/shop1_sticky_both_info_bottom-1.jpg"}}" alt="" style="max-width: 100%;"/>
</div>
<div class="col-md-4 text-right">
<div style="overflow:hidden;">
<h3 style="font-size: 20px; color: #21293c;position: relative;display: inline-block;font-weight:700;line-height:32px;margin-bottom:20px;"><span style="position: absolute;border-top: 1px solid #21293c;top: 50%;margin-top: -0.5px;right: 100%;margin-right: 25px;width: 50vw;"></span>ULTRA BOOST</h3>
<p style="line-height:24px;margin-bottom:20px;font-size:14px;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
<div style="overflow:hidden;">
<h3 style="font-size: 20px; color: #21293c;position: relative;display: inline-block;font-weight:700;line-height:32px;margin-bottom:20px;"><span style="position: absolute;border-top: 1px solid #21293c;top: 50%;margin-top: -0.5px;right: 100%;margin-right: 25px;width: 50vw;"></span>NOISE REDUCTION</h3>
<p style="line-height:24px;margin-bottom:20px;font-size:14px;">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</div>
</div>
</div>
</div>
Sticky Right Info
Product informations will be shown by sticky at right side of the product images list, you can input below sample custom blocks for this type as demo.
<div class="custom-block custom-block-1">
<div>
<i class="icon-shipped"></i><h3>FREE<br/>SHIPPING</h3>
</div>
<div>
<i class="icon-us-dollar"></i><h3>MONEY BACK<br/>GUARANTEE</h3>
</div>
<div>
<i class="icon-online-support"></i><h3>ONLINE<br/>SUPPORT 24/7</h3>
</div>
</div>
Social Feeds
This is amazing Social Feeds extension, eg: Facebook Fanbox, Flickr Photos.
Facebook Fanbox
Flickr Photos