Override Magento 2 Storefront View Files in Theme

When developing an online store based on Magento 2, you might face the problem of extending the standard Magento 2 or Magento 2 extensions functionality.

Editing Magento core files or modules is not allowed because these changes will be overwritten during the upgrade.

So, how to make changes to the storefront (frontend) template file, css, js?

WARNING! The following instructions cannot be used to override the layout files.

Override module view-files in the app/code folder.

Let's say you need to change this file:

app/code/Magefan/Blog/view/frontend/templates/post/view.phtml

Make its copy in the theme folder with the following path:

app/design/frontend/ThemeVendor/themename/Magefan_Blog/templates/post/view.phtml

Make the necessary changes to the newly created theme file.

If your own theme is missing from your Magento installation, create new theme.

Override module view-files in the vendor folder.

Let's say you need to change this file:

vendor/magefan/module-blog/view/frontend/web/css/blog-custom.css

Make its copy in the theme folder with the following path:

app/design/frontend/ThemeVendor/themename/Magefan_Blog/web/css/blog-custom.css

Note: the name of the module folder (e.g. Magefan_Blog) is not always formed from the module folder name in the vendor (e.g. magefan/module-blog). It's better to take this value from the registration.php module file.

<?php
/ * registration.php file code of Magento 2 blog module by Magefan * /
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
         'Magefan_Blog',
        __DIR__
);

Override parent theme files.

Let's say you need to change this file:

app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/list.phtml

Make its copy in the theme folder with the following path:

app/design/frontend/ThemeVendor/themename/Magento_Catalog/templates/product/list.phtml

Note: in this case, only the theme path is changed.

Important: if your store is in the production mode (which should be avoided when developing Magento), run the deployment after all changes in the view files.

To avoid website breakdown during deployment check the extension that reduces the deployment time to ZERO — Magento 2 Zero Downtime Deployment.