Getting Started

Welcome to Porto Magento Theme!

We would like to thank you for purchasing Porto Magento Theme! We are very pleased you have chosen Porto Magento Theme(or interested in ) for your website, you will be never 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 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 Theme!

Compatible with Magento:

Porto Magento Theme is fully compatible with Magento Community Edition 1.7.x, 1.8.x, 1.9.3.x, 1.9.4.x, 2.0.x, 2.1.x, 2.2.x, 2.3.x and Magento Enterprise Edition

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

Please refer this Installation Guide.

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. Enable all caches in your magento.

    Important!

    It's very important to enable the caches, Because, sometimes, some of the extensions of the theme were installed incorrectly. So you should enable the caches during upload the theme files, then you should disable or clear the caches, when complete to upload the theme files.

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 1.x > Porto Theme.zip and upload all directories(There are 5 directories - app, js, lib, media and skin) to magento root directory.

    If you're not using configurable swatches, skip this step. If you're using Magento 1.9.1 above and you're going to use the configurable swatches, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Configurable Swatches.zip file. It includes 2 directories - app and skin, and it will overwrite preuploaded files.

    If you're using Magento 1.9.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.x and above.zip file. It includes 1 directory - app, and it will overwrite preuploaded files.

    If you're using Magento 1.9.2.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.2 and above.zip file. It includes 1 directory - app, and it will overwrite preuploaded files.

    - Upload via CPanel

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

    Upload Theme Package > Theme Files > Magento 1.x > Porto Theme.zip to your magento root directory and unzip its content.

    If you're not using configurable swatches, skip this step. If you're using Magento 1.9.1 or above and you're going to use the configurable swatches, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Configurable Swatches.zip file. It may ask for overwritting files, please choose "Yes".

    If you're using Magento 1.9.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.x and above.zip file. It may ask for overwritting files, please choose "Yes".

    If you're using Magento 1.9.2.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.2 and above.zip file. It may ask for overwritting files, please choose "Yes".

  2. Disable compilation mode in System > Tools > Compilation.

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

    Important!

    To apply the your changes working, you should disable or clear all of cache related sections, such as magento default cache, magento cache extension or CDN etc. The best choice is to disable all of them and enable it after you finish your work.

  4. Log out from magento admin panel and log in again. Its essential to Logout/Login again to refresh your control panel.

Theme Activation
  1. Get the purchase code

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

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

Add block permissions for magento 1.9.2.2 and above

You should add block types for block permissions in System > Permissions > Blocks on magento 1.9.2.2.

  1. filterproducts/featured_home_list

  2. filterproducts/latest_home_list

  3. filterproducts/newproduct_home_list

  4. filterproducts/sale_home_list

  5. filterproducts/mostviewed_home_list

  6. filterproducts/bestsellers_home_list

  7. blog/last

  8. newsletter/subscribe

  9. tag/popular

  10. zeon_manufacturer/home

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 Theme Settings > Theme Installation.


You may experience 404 Error when you try to open Theme Settings Panel. In this case, please log out and log in again to make the page working.

  1. Click two Import buttons to prepare demo installation.

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

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".

    Example

    /app/design/frontend/smartwave/porto_child

    /skin/frontend/smartwave/porto_child

  3. Input "porto_child" into System > Configuration > General > Design > Themes > Templates, Skin(Images/CSS), Layout.

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

    Example

    Create custom.css file into /skin/frontend/smartwave/porto_child/css/ directory, then add custom css styles into that file.

  5. 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 1.x > Porto Theme.zip and upload all directories(There are 5 directories - app, js, lib, media and skin) to magento root directory.

    If you're not using configurable swatches, skip this step. If you're using Magento 1.9.1 above and you're going to use the configurable swatches, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Configurable Swatches.zip file. It includes 2 directories - app and skin, and it will overwrite preuploaded files.

    If you're using Magento 1.9.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.x and above.zip file. It includes 1 directory - app, and it will overwrite preuploaded files.

    If you're using Magento 1.9.2.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.2 and above.zip file. It includes 1 directory - app, and it will overwrite preuploaded files.

    - Upload via CPanel

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

    Upload Theme Package > Theme Files > Magento 1.x > Porto Theme.zip to your magento root directory and unzip its content.

    If you're not using configurable swatches, skip this step. If you're using Magento 1.9.1 or above and you're going to use the configurable swatches, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Configurable Swatches.zip file. It may ask for overwritting files, please choose "Yes".

    If you're using Magento 1.9.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.x and above.zip file. It may ask for overwritting files, please choose "Yes".

    If you're using Magento 1.9.2.2 or above, please do same step for Theme Package > Theme Files > Magento 1.x > Patch for Magento 1.9.2.2 and above.zip file. It may ask for overwritting files, please choose "Yes".

  2. Disable compilation mode in System > Tools > Compilation.

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

    Important!

    To apply the your changes working, you should disable or clear all of cache related sections, such as magento default cache, magento cache extension or CDN etc. The best choice is to disable all of them and enable it after you finish your work.

  4. Log out from magento admin panel and log in again. Its essential to Logout/Login again to refresh your control panel.

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.

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 1.9.3.6 > porto_3.0.0.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 1.9.3.6 > porto_3.0.0.zip to your magento root directory and unzip its content.

  2. Restore sql dump file

    Unzip Theme Package > Quick Start Package > Magento 1.9.3.6 > database_porto_3.0.0.sql.zip and create a new database, and import the sql file into your database.

  3. Disable compilation mode in System > Tools > Compilation.

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

    Important!

    To apply the your changes working, you should disable or clear all of cache related sections, such as magento default cache, magento cache extension or CDN etc. The best choice is to disable all of them and enable it after you finish your work.

  5. Log out from magento admin panel and log in again. Its essential to Logout/Login again to refresh your control panel.

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.

Theme Configuration

Homepage Configuration

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 > CMS > Static Blocks and select necessary static block. You can modify slider content by custom HTML based on sample content.

How to show products in homepage?
  • Bestsellers - It shows the products by selling automatically.

    {{block type="filterproducts/bestsellers_home_list" ... }}
  • Featured Products - It shows the products which "Is Featured" attribute is "yes".

    {{block type="filterproducts/featured_home_list" ... }}
  • Most Viewed - It shows the products by selling automatically.

    {{block type="filterproducts/mostviewed_home_list" ... }}
  • New Products - It shows the products which "New from Date" or "New to Date" attributes are inputed.

    {{block type="filterproducts/newproduct_home_list" ... }}
  • Latest Products - It shows the products which all products sort by latest input automatically.

    {{block type="filterproducts/latest_home_list" ... }}
  • Sale Products - It shows the products which "Special Price" is inputed.

    {{block type="filterproducts/sale_home_list" ... }}

Classic Design


Morden Design

You can add the block code into the cms content field like below.

Below example is for showing new products block with 4x3 grid mode of one category which its id is 23.

{{block type="filterproducts/newproduct_home_list" name="newproduct_list" product_count="12" column_count="4" category_id="23" template="filterproducts/grid.phtml"}}

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

"column_count" attribute will work with only grid.phtml and "lazy_owl" attribute will work with only list.phtml.

You can use the template files like "filterproducts/grid.phtml"(for grid mode), "filterproducts/list.phtml"(for owl-slider mode), "filterproducts/sidebar_list.phtml"(for sidebar mode), "filterproducts/small_list.phtml"(for small list mode).

Above image is the screenshot for "owl-slider mode and small list mode, and below image is the screenshot for grid mode.

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

<script type="text/javascript">
    jQuery(function($){
        $("#bestsellers_product .filter-products .owl-carousel").owlCarousel({
            lazyLoad: true,
            itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 3]],
            responsiveRefreshRate: 50,
            slideSpeed: 200,
            paginationSpeed: 500,
            scrollPerPage: false,
            stopOnHover: true,
            rewindNav: true,
            rewindSpeed: 600,
            pagination: false,
            navigation: true,
            autoPlay: true,
            navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
        });
    });
</script>
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 type="core/template" padding_item="10px" template="socialfeeds/instagramphotos.phtml" }}

Besides, you can config the Instagram Feed on Homepage by going to Admin Panel > System > Configuration > 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.

  1. Go to the Manage Categories page to follow Catalog > Manage 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 General Information tab.

  5. In order to display banner with static block, please set CMS Block in Display Settings tab.

  6. In order to display full width banner, please input html codes for the full width banner in General Information tab. Please don't forget, the configuration Show Category Description below of the Header should be "Yes" in System > Configuration > Porto > Porto - Settings Panel > Category View.

    <div class="full-width-image-banner" style="background: url({{media url="wysiwyg/porto/category/banner/full-width-banner.jpg"}}) 50% 50% no-repeat;background-size:cover;">
        <div class="content" style="position:absolute;z-index:1;top:50%;width:100%;text-align:center;">
            <h2 style="color: #fff;font-weight: 600;">CATEGORY <b style="font-weight: 800;">BANNER</b></h2>
            <p style="color: #fff;font-weight: 300;">Set banners and description for any category of your website.</p>
        </div>
    </div>

  7. Click Save Category button, to update your changes.
Category Grid Mode Configuration

Porto eCommerce provides lots of category variation. For example, 2~8 columns mode, show or hide necessary button and links("Add to Cart", "Add to Compare" and "Add to Wishlist"), and show them inside or under product image.

Category Layout Settings

You can choose 1 Column(without sidebar), 2 Columns(left sidebar or right sidebar) and 3 Columns Layout mode(left sidebar and right sidebar) by magento's default features, please go to Catalog > Manage Categories > Custom Design tab > Page Layout option and choose the layout as your choice.

Category Column Settings

You can choose any column mode between 2~8, please go to System > Configuration > Porto Settings Panel > Category View(Grid Mode) and choose options as your choice.

Button, Links Setttings

Please go to System > Configuration > Porto Settings Panel > Category View, Category View(Grid Mode) and choose options as your choice. All setting's names will give you their meaning enough.

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.

You can also set the product page type for only one product in 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.

- Custom Block
<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.

- Custom Block
<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.

- Custom Block
<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.

- Custom Block
<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>
Vertical Thumbnails

Custom Tabs Configuration

General Information

Porto eCommerce provides powerful and most advanced product custom tabs, we're going to describe detailed instructions how to use this powerful custom tab features as our demo site.

Custom Tab Settings

For general tab settings, please go to Porto - Settings Panel > Custom Tabs on Product View and follow instructions there. It describes how to:

  1. Set "Show Custom Tabs" to "Yes".
  2. Set "Show Tabs by Settings from Parent Categories" to "Yes", if you want to show the custom tabs by category settings.
  3. Set "CMS Block Tab #1-5" to "Enable", if you want to show the custom tabs with the static block contents, then input the static block ids into "Static Block ID #1-5".
  4. Set "Attribute Tab #1-5" to "Enable", if you want to show the custom tabs with the product attributes, then input the attribute codes into "Attribute Code #1-5".

For show the custom tabs by category settings, please go to Catalog > Manage Categories and follow instructions there. It describes how to:

  1. Select dropdowns to "Yes", if you want to show the custom tabs for the children products in this category.
  2. Select dropdowns to "No", if you want to don't show the custom tabs for the children products in this category.
  3. Select dropdowns to "From Parent", you can determine whether to show or not the custom tabs, according to parent category settings.

Translation

Theme Translation

Most of themes require some additional touches to be fully translated, because they add their own CMS content or express default magento words in other words. In this page, we're going to show you 6 easy steps to make a theme fully translated. Just follow them up and let us know if you still have any issues with theme translation.

  1. Get Translation Files For Default Magento Interface

    The first step is to go ahead and download the official Magento translation packages. Be sure to download the actual package and not the inline or string list. We won't be using those translation methods in this guide. Once that is done, decompress the file and upload the /app folder of your Magento store's root directory. It's easy-peasy.

  2. Create Store Views For Every Language

    Now that the Magento translation files have been uploaded on your serve, it's time to create the various store views associated with each language.

    First, navigate to System > Manage Stores which can be found easily by using the Magento backend's header menu. From here, you'll be able to create new store views as well as edit the names of the existing ones. We suggest you change the default store view's name to English to keep your naming convention convenient.

    Once, you've created the store the views. You will have to navigate to System > Configuration and ensure that you set the current configuration scope to your new language. Select the appropriate language from the locale dropdown on the General/General configuration page.

  3. Why Your Theme is not Fully Translated?

    After creating the store views and associating them with the appropriate locale file, you might notice that some text portions of your Magento theme have already been translated in the front end. This is because those particular strings use the same wording that is used in the default Magento theme. Yet, most good Magento theme developers will have modified the default text and added strings of their own. In addition, you'll most likely have created a number of static blocks and pages that will need translating as well.

    Don't worry! You're halfway through translating your Magento theme.

    Depending on how many pages and static blocks you have, that might have been a lie. This is where actual Magento translation grunt work actually begins.

  4. Translate All Static Blocks

    Navigate to CMS > Static Blocks. Go through every single block that currently exists, and set their store view to your default language. In our case, it's English.

    translating english static block Next, you'll want to start creating blocks that will replace them in your translated Magento theme. You're best bet is to come up with a naming convention that will make it easier when it comes to translating your pages. In my case, I tend to append a language code such as _en or _fr to all my static blocks. translating french static block Once that's done, verify that you have not forgotten to translate the actual content of any of your newly created

    static blocks for your new store views. If you don't translate them, you won't end up with a fully multilingual Magento theme.

  5. Translate All Pages

    Repeat the same process that you have just done with the pages found in CMS/Page. The only difference is that you'll have to keep an eye open for calls to your static blocks.

    Whenever you see something similar to {{block type="cms/block" block_id="static_block_1" template="cms/content.phtml"}}, you'll have to be sure to append the appropriate language code to the store view you have selected for the page.

  6. Complete a Magento Translate.csv For Your Theme

    Now that all the text that can be customized in the backend of your Magento theme has been translated, it's time to fix all other text. Open up Excel, or whatever spreadsheet editor you prefer, and start jotting down all the text lines lines that still do not appear translated in your theme in the first column. In the next column, write the translation as it should appear on the new store view.

    Save it as CSV and name it translate. Upload translate.csv to the appropriate language folder in your Magento theme's locale folder. In some cases, you will have to create a folder. This is often found in a similar path to app/design/frontend/default/theme_name/locale/language_name.

    Dealing With Variables

    Remember that not all information displayed in your theme is 100% static. In some cases, the code used to display the text includes a variable. Usually, you can use %s to take the place of that variable in your translate.csv. If that doesn't work, check the actually php code that is displaying the text and use the exact same variable that you see there.

Language Flag

If you have more than one store view in your store, the store view selector will be displayed at the top of the page as a selectbox. You can enable different language for each store view.

For each available lanugage a flat is displayed in the store view switcher. Flag images(PNG, 16*12 pixels) should be uploaded to skin/frontend/porto/default/images/flags folder.

Static Blocks Diagram

Homepage 1

Homepage 2

Homepage 3

Homepage 4

Homepage 5

Homepage 6

Homepage 7

Homepage 8

Homepage 9

Homepage 10

Homepage 11

Homepage 12

Homepage 13

Homepage 14

Homepage 15

Homepage 16

Homepage 17

Homepage 18

Homepage 19

Homepage 20

Homepage 21

Homepage RTL

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 pirckers or by specifying color value manually.

You can also apply textures(patterns) for the main sections of the page.

Go to System > 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 color 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" and "Quick View"(category page list mode only).

Product Labels: Porto eCommerce introduces "New" and "Sale" label for new and sale products that appears inside product image. You can set color values for those labels here.

Category Labels: Porto eCommerce introduces category labels such as "New" or "Hot" that you can see in the menu on our demo sites. You can set color options for those category labels here. To manage those label names, please check Smartwave Extensions > Megamenu > Category Labels.

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

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 System > 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.

RTL Support: In this option, you can turn your store into Right to Left language mode for entire section. Checkout our RTL Demo to see how it works.

Disable Responsive: You can disable the responsive mode on your mobile devices.

Maxium Page Width: Porto eCommerce provides 1024px, 1170px and 1280px 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.

Show Site Notice: You can show the custom block at the top of the page, above the header. Please checkout this Site Notice 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 21 header styles, you can choose one of them here.

Header Type 1

Header Type 2

Header Type 3

Header Type 4

Header Type 5

Header Type 6

Header Type 7

Header Type 8

Header Type 9

Header Type 10

Header Type 11

Header Type 13

Header Type 14

Header Type 15

Header Type 16

Header Type 17

Header Type 18

Header Type 19

Header Type 20

Header Type 21

Header Type 12

Show Flags in Language Switcher: You can show/hide the flag images in the lanugage switcher, you can checkout this hide language flags demo to see how it works.

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/hide the logo image in sticky header.

Sticky Header Logo Image Src: You can input the logo image src for only sticky header.

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

Footer

Enable Fixed Position Footer: If you check our Home Version 1 in demos, you can see footer at fixed position in homepage only. If you enable this option, this fixed position footer will be applied in homepage only.

Footer - Top: You can show Twitter widget in this Footer-Top block or 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 Facebook, Flickr and 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 Facebook, Flickr and 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.

Alternative 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 Add to Compare Link: You can show/hide "Add to Compare" link in category page.

Page Layout: You can show the category page with other layouts, eg: 1 column, 2 columns with left sidebar, 2 columns with right sidebar, 3 columns.

Show Category Description below of the Header: You can show the category description content at the below of the header and above of the breadcrumbs to set this field to "Yes". If you set this field to "No", description content will be shown normaly.

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.

Show Add to Cart Button: You can show or hide "Add to Cart" button, this is for only Grid View mode.

Show Add to Links: You can show or hide "Add to Compare", "Add to Wishlist" button, this is for only Grid View mode.

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

Product View

Keep Image Aspect Ratio: You can keep natural ratio of product images or stretch it to a certain size. Its same as category ratio setting.

Show Prev/Next Products Links: You can show or hide links for previous and next links in the right of product name.

Previous Link Text: You can add text for previous product link, for example "Prev".

Next Link Text: You can add text for next product link, for example "Next".

Disable Product Zoom: You can enable or disable product zoom function.

Zoom Type: You can show the zoomed image at the right side or inner of the product image.

- Inner Zoom

- Right Side Zoom

Hide Single Smallthumb Image: You can hide small thumbnail image, if it has only one thumbnail image.

Enable Addtocart Sticky: You can enable to show the addtocart sticky, when scrolling the page.

Move Product Tabs at the Right of Product Image: You can checkout this page for moving product tabs.

Page Layout: You can show the product page with other layouts, eg: 1 column, 2 columns with left sidebar, 2 columns with right sidebar, 3 columns.

Product Label

In this tab, you can show or hide "New" and "Sale" product labels.

Show "New" Label: You can show or hide "New" label. To show this label, you should set "New from date" or "New to date" attributes in product information in Catalog > Manage Products.

"New" Label Custom Text: You can change the "New" label text.

Show "Sale" Label: You can show or hide "Sale" label. To show this label, you should set "Special Price" attribute in Catalog > Manage Products.

Show "Sale" Label with Discount Percent: You can show the discount percent number instead of "Sale" label to set this field to "Yes".

"Sale" Label Custom Text: You can show the product page with other layouts, eg: 1 column, 2 columns with left sidebar, 2 columns with right sidebar, 3 columns.

Custom Tabs on Product View

Show Custom Tabs: You can enable/disable to show the custom tabs in this option.

Show Tabs by Settings from Parent Categories: You can show/hide tabs by settings in Catalog > Manage Categories > [Parent Category] > Product Custom Tabs.

CMS Block Tabs: You can show the static blocks in the product tab.

Attribute Tabs: You can show the product attribute values in the product tab.

Google Rich Snippets

Rich Snippet shows information about a product, including price, availability, and review ratings to be highlighted among other search results in search engines.

Rich Snippets Testing Tool is at url: https://developers.google.com/structured-data/testing-tool/

Product Compare

You can show the product compare popup/link at the header.

Newsletter Popup

Enabled: You can enable or disable newsletter popup function, you can check this feature on our demo sites.

Logo Image: You can add logo path to show in newsletter popup.

Popup Content Text: In this option, you can edit the popup description.

Popup Width, Popup Height: You can set width and height of newsletter popup.

Popup Background Color, Popup Background Image: You can set background color and background for newsletter popup incase you do not use any background image.

Custom Style: You can add your own custom css tyle in this option.

Contact Us

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

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.

Patch Installation
  • If you are using Magento 1.9.2.x, please install the patches follow the order:
    1. patch magento 1.9.2.x
    2. patch magento 1.9.2.2
    3. patch config swatch
  • If you are using Magento Enterprise, please install patch Magento EE.zip.

Extensions

Smartwave Extensions

Homepage Slider

Smartwave Slider is an easy-to-use extension based on awesome OWL Slider. You can create any type of slider such as full screen, full width and boxed width slider.

Enable Slider: You can enable or disable slider in homepage. "Enable" is set by default.

Type: You can choose 2 types of homepage slider, one is standard slider method under header, another one is above header mode that you can see on Home Version 2.

Static Block ID: Choose static block id which one to use for homepage slider. We have 12 demos at the moment, if you want to use sample static blocks as our demo, please specify the static block id as porto_homeslider_[Home Version Number].

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 Catalog > Manage Categories > Menu tab.

Display Empty Categories: You can show or hide empty categories that has no products. "Yes" is set as default.

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.

Show the link "Home": You can choose to show/hide "Home" link in the menu. If set to "Yes", "Home" link will be shown as 1st item.

Show "Home" Icon: You can choose to show home icon in "Home" link.

Replace spaces with Non-breaking spaces: If you have any category name that includes space such as "Samsung Galaxy", this function will make it as "Samsung Galaxy".

Popup Settings > Width: You can set width of classic menu, 270px will be set by default.

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.

Catalog Category Search

Porto ecommerce comes with advanced category search extension, that allows you to search product by categories.

Enable: Enable or Disable this extension. If you disable, magento standard search will be applied.

Select Category on Category Pages: If you choose "Yes", when you visit a category page, that category will be chosen in search category list.

Show Subcategories: You can choose to show just main categories or as well as sub categories in category list.

Subcategory Indentation: You can add identification character to recognize sub category level.

Ajax for Full Page

Porto eCommerce includes new revolutionary feature - awesome full page ajax extension that is really first for magento. You can confirm this feature on our demo site.

Important!

We strongly recommend you to enable this extension once you finish your site development and speed optimization. Otherwise, you may experience some issues with this extension while development.

Enabled: You can enable or disable this full page ajax extension.

Except Elements: This FullPage Ajax extension may occur some conflict issues with other premade ajax extensions such as Ajax Catalog Search, Ajax Cart etc. As those extensions loads only specific amount of data by ajax, it would be better to use those extension features instead of loading full page content by ajax. When any ajax extension is installed, it adds css class for its functional elements tag or form such as <a class="fancybox">. If you add this css class into this Except Elements list, FullPage Ajax extension won't work for those links/elements.

Except Form IDs: Same as above, you can add form id that which does not require FullPage Ajax extension.

Ajax Catalog

This extension provides ajax navigation and nice price slider features. There are detailed comments for each settings that will give you exact meaning.

Ajax Cart

Loader Image: You can choose any type of png, gif, jpg and jpeg file for the preloader image that appears while ajax call is working.

Custom CSS: You can add custom css style for this extension such as, for loader image, success popup message etc.

Auto Close Message Popup(Seconds): When ajax add to cart is successfully completed, it shows a success popup message. You can set time to auto close this popup.

Add to Cart(Enable for Category Page): You can enable or disable this ajax add to cart feature in category page.

Add to Cart(Enable for Product Page): You can enable or disable this ajax add to cart feature in product page.

Goto Cart Text: You can replace your own words for go to cart button.

Continue Shopping Text: You can replace your own words for continue shopping button.

Add to Links(Enable for Category Page): You can enable or disable ajax feature for "Add to Wishlist" and "Add to Compare" links in category page.

Add to Links(Enable for Product Page): You can enable or disable ajax feature for "Add to Wishlist" and "Add to Compare" links in product page.

Quick View

Enable Quick View: You can Enable or Disable quickview feature.

Dialog Width: You can set the width of quickview dialog box.

Dialog Max Height: You can set the max height of quickview dialog box. Content will be shown by vertical scrolling.

Social Icons

Porto shows social icons in bottom of the footer. You can choose any amount of social icons and add links for each of them.

Social Feeds

Porto eCommerce also supports for Twitter, Facebook and Flickr Stream widgets. In this extension you can set options to link your account for each widget.

Sharing Tool

In this extension, you can set options related to social sharing tool that is shown on product page and quick view. Every fields are quite easy to understand and has detailed comments.

Very Important!

We removed this Smartwave_SharingTool extension from the theme version 1.5.2. You should remove below files and directories on your site, if you're using Porto theme version 1.5.1.2 or below.

/app/code/local/Smartwave/SharingTool/ directory

/app/design/frontend/smartwave/default/layout/smartwave_sharingtool.xml file

/app/design/frontend/smartwave/default/template/sharingtool/ directory

/app/design/frontend/smartwave/porto/layout/smartwave_sharingtool.xml file

/app/etc/modules/Smartwave_SharingTool.xml file

Filter Products

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

  • Bestseller Products - It shows the products by selling automatically.

    {{block type="filterproducts/bestsellers_home_list" ...}}
  • Featured Products - It shows the products which "Is Featured" attribute is "yes".

    {{block type="filterproducts/featured_home_list" ...}}
  • MostViewed Products - It shows the products which most viewed automatically.

    {{block type="filterproducts/mostviewed_home_list" ...}}
  • New Products - It shows the products which "New from Date" or "New to Date" attributes are inputed.

    {{block type="filterproducts/newproduct_home_list" ...}}
  • Latest Products - It shows the products which all products sort by latest input automatically.

    {{block type="filterproducts/latest_home_list" ... }}
  • Sale Products - It shows the products which "Special Price" is inputed.

    {{block type="filterproducts/sale_home_list" ... }}

{{block type="filterproducts/newproduct_home_list" name="newproduct_list" product_count="12" column_count="4" category_id="23" template="filterproducts/grid.phtml"}}

You can add the block code into the cms content field like below.
Below example is for showing new products block with 4x3 grid mode of one category which its id is 23.

{{block type="filterproducts/newproduct_home_list" name="newproduct_list" product_count="12" column_count="4" category_id="23" template="filterproducts/grid.phtml"}}

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

"column_count" attribute will work with only grid.phtml and "lazy_owl" attribute will work with only list.phtml.

You can use the template files like "filterproducts/grid.phtml"(for grid mode), "filterproducts/list.phtml"(for owl-slider mode), "filterproducts/sidebar_list.phtml"(for sidebar mode), "filterproducts/small_list.phtml"(for small list mode).

Above image is the screenshot for "owl-slider mode and small list mode, and below image is the screenshot for grid mode.

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

<script type="text/javascript">
    jQuery(function($){
        $("#bestsellers_product .filter-products .owl-carousel").owlCarousel({
            lazyLoad: true,
            itemsCustom: [[0, 1], [320, 1], [480, 2], [768, 3], [992, 2], [1280, 3]],
            responsiveRefreshRate: 50,
            slideSpeed: 200,
            paginationSpeed: 500,
            scrollPerPage: false,
            stopOnHover: true,
            rewindNav: true,
            rewindSpeed: 600,
            pagination: false,
            navigation: true,
            autoPlay: true,
            navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
        });
    });
</script>

Instagram

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

Here is the Instagram configuration field:

Compatible Extensions

Mageplaza Extensions

Porto theme is compatible with almost Mageplaza extensions here.

The most popular One Step Checkout for M2 by Mageplaza helps reduce the abandonment rate as well as increase the conversion rate dramatically. Ignore the back and forth that are the redundant motions when standing on your site.

- 10% Discount: Use coupon PORTOTHEME for any Mageplaza extensions.

- Up to 33%: Get Mageplaza deals.

IWD Onepagecheckout

You can download this OPC extension and see its details here.

One Page Checkout extension is one of the most popular extensions in magento customers. It dramatically reduces the steps required in the checkout process. Porto eCommerce provides custom css style to make this extension fully working with Porto's beautiful design. You can download OPC extension from above link.

Once you install the extension, you can just use it same as our demo site.

Mango Attribute Swatches

This is a PAID Extension, you can purchase this OPC extension and see its details here.

- Display color swatches in the catalog product listing, to have a preview of the product options.

- This extension can be used to display swatches for color, brand, type, size or any other configurable attribute, only one attribute can be selected to be displayed as swatches.

- Configurable options: attribute to display as swatches, and option to display swatches or small images of the child products.

- The swatches can also be displayed in the layered navigation, the admin can choose the attributes to display as swatches in the layered navigation.

- Preselect images in the catalog when the layered navigation filters are applied, e.g.: shows only red models when the filter is set to color: red.

- Option to display a second row of available options as text, this can be used to display available sizes of a configurable product.

- The swatches can be images or hexadecimal colors.

- This extension can be used to display swatches for color, brand, type, size or any other configurable attribute.

and much more...

Zeon Shop By Brands Extension

This is a FREE Extension, you can download this OPC extension and see its details here.

This extension is developed primarily for the people who trust some brands and want to buy products of that brand only. It allows you to create new brands and connect products to those brands. The extension generates a landing page with all created brands. Clicking on any brand link takes you to that specific brand landing page.

You can use below contents for showing Shop By Brands on your homepage and cms pages.

<div id="brands-slider" class="owl-no-narrow brand-slider">
    {{block type="zeon_manufacturer/home" template="zeon/manufacturer/owl_list.phtml"}}
    <script type="text/javascript">
        jQuery(function($){
            $("#brands-slider .owl-carousel").owlCarousel({
                lazyLoad: true,
                itemsCustom: [ [0, 1], [320, 1], [480, 2], [640, 3], [768, 3], [992, 4], [1200, 5] ],
                responsiveRefreshRate: 50,
                slideSpeed: 200,
                paginationSpeed: 500,
                scrollPerPage: false,
                stopOnHover: true,
                rewindNav: true,
                rewindSpeed: 600,
                pagination: true,
                navigation: false,
                autoPlay: true
            });
        });
    </script>
</div>

CM Multivendor Extension

This is a PAID Extension, you can purchase this extension and see its details here. You can get the 15% discount code, when you purchased Porto eCommerce.

Webkul Marketplace Extension

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

Others

Frequently Asked Questions

  1. Why do I get 404 error when I try to enter admin panel options?

    A: Please logout/login again after theme activation.

  2. Some of the theme features don't work or give errors, why?

    - Magento cache (or external cache) was not flushed after installation of the theme.

    - Compilation mode was not disabled before installation.

    - Some of the theme files were not uploaded.

    - You edited theme files and accidentally removed or changed something in the files.

    - You have customized the theme by creating custom sub-theme and your modifications change/break the default behavior of the theme.

    - You have some elements that left from your previous theme (e.g. in Magento's "base" theme in app/design/frontend/base/) and that changes/breaks the default behavior of the theme.

  3. I've activated theme and imported static blocks, but my site is not same as demo site.

    A: In most case this is because you did not upload theme files correctly, please upload all files again and contact us if you get same issue.

  4. There is no theme admin tab in the admin panel, or I get a blank page, or Access Denied error.

    A: Log out from Magento admin panel, delete all files in var/cache/ directory, clear web browser cache/cookies for your store domain and log in again.

  5. Theme was installed but Magento doesn't see the theme files.

    A: This may be file permission issue or your Magento does not have access to the theme files because of incorrect file permissions on your server. You need to set correct file permissions for all theme files (the same permissions as for other Magento files).

  6. Some of the theme features don't work or give errors.

    - Theme files were not uploaded,

    - or they are not in the correct place,

    - or there is file permissions issue.

  7. After theme installation the store gives blank page or an error.

    A: This may be caused by jQuery conflict: one of your custom extensions is loading another version of jQuery. You need to remove that version of jQuery or remove that extension.

  8. Images (e.g. in the slideshow) are not displayed.

    A: First, check if images were uploaded and if correct paths to those files are specified.

    This may be file permissions issue, or your Magento does not have access to images because of incorrect file permissions on your server.

    You need to set correct file permissions for all images and folders (in most cases images are stored in media directory).

  9. Theme configuration changes do not appear on the frontend.

    A: Flush Magento cache in System > Cache Management, clear web browser cache/cookies for your store domain and refresh the page in your web browser.

  10. One of my extensions does not work with this theme.

    This theme may not be compatible with some third-party extensions.

    It is impossible for theme author to make the theme compatible by default with all existing extensions because there are thousands of available Magento extensions.

    Generally all extensions can work with all themes but sometimes they have to be integrated manually.

    That is because sometimes the extension and the theme override the same Magento template file so there can be a conflict.

  11. Newly installed extension does not work because of Porto's full ajax extension, how to fix it?

    Please try to add except elements selectors and except form ids in System > Configuration > SW Extensions > Ajax for Full Page.

    Please try to also merge js files and don not merge css files in System > Configuration > Advanced > Developer.

  12. Get the issue for "Failed generating CSS file", when save the configurations for Theme Setting or Theme Design.

    A: Please give file write permission for /skin/frontend/smartwave/porto/css/configed directory.

  13. After uploaded the theme files, got the mysql errors.

    A: Please check your mysql server was enabled innodb engine. As you can see magento system requirements, the InnoDB engine must be used with any version of MySQL.

Support & Customization

Thanks for using Porto Magento Theme!

We would like to thank you for using Porto Magento 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 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.1.7 (12/01/2018)

- Updated