Unable to match a Porto Demo with my setup

Magento 2 Setup
,
36

I decided to go ahead and do it tonight, to get it out the way… Installing, Testing and Documenting this took 2 hours.

Porto Theme Installation Steps

  1. Disabled All Cache Types (bin/magento cache:disable)
  2. Unzipped Porto File (themeforest-9725864-porto-ultimate-responsive-magento-theme.zip)
  3. Unzipped Porto Theme.zip and Uploaded
  4. Unzipped Patch for Magento 2.3.x.zip and Uploaded
  5. Installed the uploaded extensions/modules (bin/magento setup:upgrade)
  6. Enabled Porto in backend
  7. Saved Purchase code in backend
  8. Enabled All Cache Types (bin/magento cache:enable)

Setting a Demo

  1. Went to System > Configuration > Porto - Settings Panel > Installation
  2. Clicked Import Static Blocks
  3. Clicked Import CMS Pages
  4. Clicked Demo 20
  5. Clicked Save Config
  6. Went to System > Configuration > Porto - Design Panel > Installation and Clicked Save Config
  7. Cleared All Cache Types

Notes

  • Server already backed up
  • Server already in Developer Mode
  • Server already had Sample Data installed
  • Running Magento 2.3.1
  • I disabled the following cache types whilst I tweaked the theme settings (so I could see the changes):
    • Config
    • Layouts
    • Blocks HTML
    • Full Page

Observations

  • Remember, that Magento will be painfully slow whilst All Cache Types are disabled.
  • The Documentation isn’t presented very well. Porto should hire me to rewrite it :slight_smile:
  • When uploading files via FTP, make sure that you don’t have any Failed Transfers.
  • If you already have a Mageplaza module installed via Composer, you will get a conflict. This is because Porto attempts to duplicate the Mageplaza_Core module in a second location. Easy fix is to delete app/code/Mageplaza/Core.

Why doesn’t my Porto installation look like the Demo?

So, this is where is gets a bit messy. The Porto theme is essentially made up of 4 parts:

  1. The Blocks that contain some of the Demo content
  2. The CMS Pages that contain some of the Demo content
  3. The base CSS Styles
  4. The Theme Settings (which tweak CSS and layout)

However, when going through the steps to install the Demo they only setup Steps 1-3. The fourth step is not automated it seems. Therefore, you have to fine-tune the Theme Settings to complete the final touches.

Take for example Modern Demo 20. I selected and installed Demo 20 to match the bulk of the Demo. But my store and the Porto Demo did not quite match. So, then I started to tweak some of the Theme Settings. For example, I changed these three options which made a big difference:

  • Maximum Page Width = Full Width
  • Header Type = Type 13
  • New Skin = Yes

So, nothing is in fact broken here. It’s just that you need to fine-tune the settings after the installation.

What is the Quick Start Package for?

The Quick Start Package is their full demo store. To use it you would literally have to replace your current website (which isn’t really a problem if you haven’t started doing anything with your store yet). It’s like a complete backup of their Demo site. I guess that’s ok if you want to build a server for it to go on so that you can reverse engineer the settings. But not practical otherwise - In my opinion.

In Conclusion

I feel that Porto should add the ability to automate the fourth step. Thus cutting out the need to use the Quick Start Package - Which in my opinion is not a plausible solution because you essentially have to replace your entire website just to copy a few settings. This was never an issue for me, because I purchased Porto for the “ToolBox” as opposed to be sold on the idea that I wanted to directly imitate something.

Hopefully, this adds some insight into what’s going on here.