Please refer this Installation Guide.

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.

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.

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.

   

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

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.

1. Click two Import buttons to prepare demo installation.

   

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

   

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.

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.

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.

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.

   

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.

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.

   

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.

• 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>

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.

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

For general menu settings, please go to Smartwave Extensions > Mega Menu and follow instructions there. It describes how to:

1. set default menu type for all menu items
2. show "home" link
3. show category labels such as "New", "Hot" as our demo site
4. show custom links into menu, for example, "Features" menu that you can see from our demo

How to add a menu item that has fixed-width mega menu?

How to add a menu item that has full-width mega menu?

How to add a menu item that has classic dropdown menu?

1. Add new cateogry and necessary subcategories for dropdown content.

2. Select the menu item that you just created, and go to "Menu" tab.

3. Choose "Menu Type" field as "Classic".

How to Add or Remove a custom link in the menu?

After you finish theme installation, you can find a custom menu "Features" in your store. If you want to add/edit or remove this custom menu, please go to CMS > Static Blocks > porto_custom_menu, porto_custom_menu_mobile and edit html codes in static block.

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.

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.

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.

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>

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>

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>

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>

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.

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

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

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.

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.