•  07-10-2020
  •  | 
  •  

Question

I Have one "HTML" theme and want to Integrate into Magento2. I am Already Created Folder structure of the theme. But Don't know how to add header part, footer part in which files. and in which file define theme's "CSS", "JS" etc..

"My Theme Structure" enter image description here

I have ".css" files for adding css.

Output

enter image description here

I Want to Like This: enter image description here

So can anyone help me? I am using Magento version: 2.2.0

Was it helpful?

Solution

Templates

You need to overwrite the header and footer templates from the modules (or parent theme if you're using one). You can find these in magento/module-theme/view/frontend/templates/html:

magento/module-theme/view/frontend/templates/html/header.phtml
magento/module-theme/view/frontend/templates/html/footer.phtml

So you will need to create

app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/header.phtml
app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/footer.phtml

And add your markup in there, but please note it isn't a case of copying and pasting. You will need to convert your markup into Magento friendly markup, such as using the PHP translations and adding static blocks if it needs to be managed through the admin.

Static files

To extend your parent theme styling you will need to create this file:

app/design/frontend/PartyShowroom/default/Magento_Theme/web/css/source/_extend.less

And add any of your JS into app/design/frontend/PartyShowroom/default/Magento_Theme/web/js and load it via Require JS.

Notes

This is the basics to adding your content to a Magento theme, there is too much for me to give a full answer on how to convert your theme. The dev docs are your friend for this.

OTHER TIPS

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top