Download Magento 2 Theme Porto v4.0.5 for free + install FULL demo data. Porto is a popular theme in the Magento community. It was designed and developed by SmartWave company on the Bootstrap 4 platform. Porto provides many page optimization functions and features for e-commerce websites to enhance user experience and interactivity. It has an intuitive, flexible, and easy-to-use interface that users can customize and adjust to their liking.
Step-by-step: Install FULL demo data Magento 2 Theme Porto v4.0.5
In this article, ItsmeIT will share how to install the Magento 2 Porto 4.0.5 FULL demo and fix some installation errors, as well as a theme bug.
Step 1: Preparation and requirements before installing a Magento theme Porto
To be able to install the Porto v4.0.5 theme successfully, you need to meet the following requirements:
- Operating system, Ubuntu or Debian, CentOS. RAM is at least 2GB but should be 8GB or more.
- PHP Version 7.4 or 8.1
- MySQL 8.0 or MariaDB 10.4
- Composer version 1.x
- Elasticsearch 7.9
- Nginx or Apache2
You can read the system requirements here.
Step 2: Download and Extract the Theme
Due to its complexity and requirement of programming knowledge, Magento 2 has certain prerequisites to meet before installing a theme such as Porto v4.0.5. Ensuring each version is installed correctly is crucial to the successful installation of the theme.
If you have downloaded the zip file, unzip it to get the “Porto Magento2 4.0” folder. The folder contains the source code for both Magento 1 and Magento 2 versions 2.0.x up to 2.4.2, including Magento EE. In this tutorial, itsmeit will be installing version 2.4.2.
Step 3: Choose and Configure the Path for Magento 2 Source Code
Look for the folder “Quick Start Package->Magento 2.4.2”, this is the FULL source + database file so you can install the Porto v4.0.5 theme for Magento 2 FULL demo. Of course you can also install them individually depending on the Magento version you want to use, not necessarily 2.4.2. However ItsmeIT recommends installing the “Quick Start Package” to make it easier. Based on that, you can easily customize and develop your website or your clients.
To copy the porto2_4.0.0 file to the Magento 2 source code directory, ItsmeIT goes to the /var/www/ directory, which is where the source code is placed on their Nginx server. Specifically, the directory is located at “/var/www/vhosts/dev. itsmeit.co/httpdocs”.
- The “vhosts” directory, short for “Virtual Hosts,” provides a professional name for the directory.
- “dev. itsmeit.co” is the domain name that will be used to run the website and install the Porto v4.0.5 theme for Magento 2.
- “httpdocs” is the main directory in the web server’s directory structure. This folder contains the files and folders necessary to display the website’s content.
Of course, the folder name containing the source code Magento 2 Theme Porto v4.0.5 is up to you to set, not necessarily the same as ItsmeIT.
If you install Magento 2 Theme Porto v4.0.5 on a VPS, you can use Filezilla to upload the source and extract it similarly.
Step 4: Create Database, Assign Directory Permissions, and Configure MySQL
1. Login to the MySQL server with the command sudo mysql or mysql -u (USER) -p:
sudo mysql
2. Run command to create database, user and assign permissions:
CREATE DATABASE dev_itsmeit; CREATE USER 'itsmeit'@'localhost' IDENTIFIED BY "Password123@#"; GRANT ALL PRIVILEGES ON dev_itsmeit.* TO "itsmeit"@"localhost"; GRANT ALL PRIVILEGES ON *.* TO "itsmeit"@"localhost" WITH GRANT OPTION; FLUSH PRIVILEGES; \q;
If you use MariaDB then run the command to assign permissions to the user as follows:
CREATE DATABASE dev_itsmeit; CREATE USER 'itsmeit'@'localhost' IDENTIFIED BY "Password123@#"; GRANT ALL PRIVILEGES ON dev_itsmeit.* TO 'itsmeit'@'localhost' IDENTIFIED BY 'Password123@#'; FLUSH PRIVILEGES; \q
After creating the database, you can import the “database_porto2_4.0.0.sql” file from the “Quick Start Package/Magento 2.4.2” folder. Make sure to extract the SQL file before importing it. The file is relatively small, around 3.2Mb, so you can import it directly through phpMyAdmin or by using a terminal command like the one shown below:
- Open the terminal from the folder containing the extracted SQL file and log in to MYSQL. If you are working on a VPS, you need to use the “cd” command to move to that directory.
- Use the command: use database_name; and import the file according to the path
use database_name; source porto-v4.0.sql;
While waiting for the SQL import process to complete, you can move on to step 3 to continue the configuration.
3. PHP Configuration and Directory Permissions
Magento 2 is very tightly secured so you also need to configure php properly. Please open the file www.conf under the path /etc/php/7.4/fpm/pool.d. Then change www-data to the user you will use it with. For example, my user is itsmeit, I will change www-data to itsmeit with the following 2 configuration values:
user = www-data
group = www-data
listen.owner = www-data
listen.group = www-data
user = itsmeit
group = www-data
listen.owner = itsmeit
listen.group = www-data
To learn more, you can read more in this article.
4. Directory permissions:
In step 3, you configured the username (Linux). Now, you will need to set the read and write permissions and execute files for the directories containing the Magento 2 source code for that user. (Change the path to the directory for your Linux user accordingly.)”
sudo chown -R itsmeit:www-data /var/www/vhosts/dev. itsmeit.co/httpdocs sudo find /var/www/vhosts/dev. itsmeit.co/httpdocs -type f -exec chmod 644 {} + sudo find /var/www/vhosts/dev. itsmeit.co/httpdocs -type d -exec chmod 755 {} +
The above commands will set permissions for files and directories, allowing the USER to execute them. This will be useful when running commands in Magento 2, such as “php bin/magento…”. If you did not configure PHP in step 3, your permissions and directory will require root or www-data to process, and you will continue to receive permission error messages.
Step 5: Install Porto 4.0.5 Theme and Import Full Demo Content
Now that you have completed all of the previous steps, you are ready to install the Magento 2 Theme Porto v4.0.5 by using the following command: (Make sure to double-check your URL and username changes before proceeding with the installation.)
bin/magento setup:install \ --base-url=http://dev. itsmeit.co/ \ --db-host=localhost \ --db-name=magento2 \ --db-user=magento2 \ --db-password=magento2@#$ \ --admin-firstname=admin \ --admin-lastname=admin \ --admin-email=buivanloi.2010@gmail.com \ --admin-user=admin \ --admin-password=admin123 \ --language=en_US \ --currency=USD \ --timezone=Asia/Ho_Chi_Minh \ --use-rewrites=1 \ --search-engine=elasticsearch7 \ --elasticsearch-host=localhost \ --elasticsearch-port=9200 \ --elasticsearch-index-prefix=magento2 \ --elasticsearch-timeout=15
When done you will get the admin_xxx URL as shown in the screenshot.
Step 6: Resolve Incorrect URL After Importing Demo in Magento 2
There are 2 ways to do this, you can add the following configuration in the last env.php file after the comma “,” of the “install” variable: (remember to change the URL)
'system' => [ 'default' => [ 'web' => [ 'unsecure' => [ 'base_url' => 'https://dev. itsmeit.co/', 'base_link_url' => 'https://dev. itsmeit.co/' ], 'secure' => [ 'base_url' => 'https://dev. itsmeit.co/', 'base_link_url' => 'https://dev. itsmeit.co/', 'use_in_frontend' => '1', 'use_in_adminhtml' => '1' ] ] ] ]
Then run the command import config and setup from the directory where the magento 2 source code is located:
cd {magento_dir} php bin/magento app:config:import php bin/magento setup:upgrade
Or open phpMyadmin and run the SQL command then find and correct the values:
SELECT * FROM `core_config_data` WHERE `path` LIKE '%web%'
- web/unsecure/base_url: Your site URL including http example (http://dev. itsmeit.co/)
- web/secure/base_url: Your site URL including example http (https://dev. itsmeit.co/)
- web/secure/use_in_frontend: value “1” with https or “0” without https
- web/secure/use_in_adminhtml: value “1” with https or “0” without https
cd {magento_dir} php bin/magento cache:clean
After completing the above steps, you have successfully installed the Porto v4.0.5 theme for Magento 2.4.2, then you can login to the admin page and start customizing the website. The admin URL you got in step 5, or you can also see it in the env.php file (‘frontName’ => ‘admin_xxxxx’)
Step 7: Configure Nginx for Magento 2 Site
To configure Nginx you will need to create a .conf file located in the /etc/nginx/sites-available directory . Here ItsmeIT will create a file named: dev. itsmeit.co.conf and the configuration inside it as follows:
sudo nano /etc/nginx/sites-available/dev. itsmeit.co.conf
upstream fastcgi_backend { server unix:/run/php/php7.4-fpm.sock; } server { listen 80; server_name dev. itsmeit.co; set $MAGE_ROOT /var/www/vhosts/dev. itsmeit.co/httpdocs; include /var/www/vhosts/dev. itsmeit.co/httpdocs/nginx.conf.sample; }
If your site uses https, the configurations in dev. itsmeit.co.conf should look like this:
# Redirect HTTP -> HTTPS server { listen 80; listen [::]:80; server_name dev. itsmeit.co www.dev. itsmeit.co; return 301 https://itsmeit.co$request_uri; } upstream fastcgi_backend { server unix:/run/php/php7.4-fpm.sock; } server { listen 443 ssl http2; listen [::]:443; server_name dev. itsmeit.co www.dev. itsmeit.co; ssl_certificate /etc/nginx/ssl/dev. itsmeit.co/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/nginx/ssl/dev. itsmeit.co/privkey.pem; # managed by Certbot include /etc/nginx/conf.d/ssl_options.conf.inc; # Path to document root set $MAGE_ROOT /var/www/vhosts/dev. itsmeit.co/httpdocs; include /var/www/vhosts/dev. itsmeit.co/httpdocs/nginx.conf.sample; # Overrides logs defined in nginx.conf, allows per site logs. access_log /var/log/nginx/dev. itsmeit.co.vhost.log; error_log /var/log/nginx/dev. itsmeit.co.vhost.err; }
If you are installing on localhost you can also set up a virtual domain that points to 127.0.0.1 by opening the file /etc/hosts and adding in the configuration:
sudo nano /etc/hosts
And restart nginx for the configuration changes to take effect, see details here .
sudo service nginx restart
Step 8: Log in to Magento Admin and Customize Your Site
For customization you can navigate to: Stores->Configuration-> PORTO 4.0.5
To import demo you can navigate to: PORTO 4.0.0->Porto – Settings Panel in “Configuration”, select the appropriate demo version and click ‘Import’.
Step 9: Troubleshoot Porto v4.0.5 Theme-Related Bugs on Magento 2.4.x
- If there is an error related to MSP_ReCaptcha then you can run the command to install the missing module: ( reference )
cd {magento_dir} composer require msp/recaptcha php bin/magento setup:upgrade
- If there is an error of the language icon image (flags icon) on the top of the page, open the link “pub/media/wysiwyg/smartwave/porto/flags” copy the default.png file and rename it “english.png”.
- If there is a minicart display error related to knockout js, open the file app/design/frontend/Smartwave/porto/Magento_Checkout/web/template/minicart/content.html, edit lines 8-16 to the following:
<strong> <span class="text" translate="'My Cart'"/> <span class="qty empty" text="getCartParam('summary_count')" data-bind="css: { empty: !!getCartParam('summary_count') == false }, attr: { title: $t('Items in Cart') }"> </span> </strong>
Congratulations! You have now completed all the steps to install the FULL demo Magento 2 Theme Porto v4.0.5 on Ubuntu or Debian. If you encounter any errors during the installation process or have any questions about the steps outlined above, please leave a comment below.
– Advertising –