How do the changes to the frontend in magento 2.1

Question

How do the changes to the frontend For example, I want to make a new or Heder or Checkout or Search or Catalog...

What are the files and paths to allow me to amend the files?

Answer 1

• If you want to make a new Header or Checkout or Search or Catalog you can create your custom module in app/code and override the existing template of the specific which you want to override.
• you need to create layout file in your custom module and load your custom template which you want to override.

Another way is creating the new theme

• create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma theme
• You can also create new theme which inherites from Blank (inheritance is defined within theme.xml). If you are already using some theme then skip this step.
• Override the layout file and template file which you want to change
• If you have any css changes then Use grunt to compile your .less into deployment files

For more reference how to create theme refer this link - http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

Run below commands after creation of theme.

- php bin/magento cache:clean
- php bin/magento setup:static-content:deploy

Answer 2

Copy core magento file from

vendor/magento/module-theme/view/frontend/templates

create your theme and paste all file to:

app/design/frontend/MyModule/MyTheme/Magento_Theme/

Answer 3

You need to create the your own theme on the top of lumia/blank..

more you can find here..

If I override a template in core Magento 2, could it be removed when upgrading to future versions of Magento 2?

Answer 4

First you have to create new theme, refer this docs for How to create new theme?

Apply new created theme from backend given path below

Content -> Design -> Configuration

And then you have to configure compilation of style in admin path given below

Store -> Configuration -> Advanced -> Developer -> Front-end development workflow

change to

Client side less compilation

run below command to set developer mode

- php bin/magento deploy:mode:set developer

Then edit your theme styles module wise and other web/css/source (common style)

app/design/frontend/<vendor_name>/<theme_name>

and clear cache and deploy static-content

- php bin/magento cache:clean
- php bin/magento setup:static-content:deploy