0

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

1

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.

  • For override app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/header.phtml simply create file and put code that's it? – H_Parekh Mar 16 '17 at 11:40
  • Yeah, you might need to clear cache as well. – Ben Crook Mar 16 '17 at 11:52
  • can you please tell me that My Account My Wish List Sign In Compare Products where to comes these and how to customize these links – H_Parekh Mar 16 '17 at 12:01
  • To find what file renders an element just search for the classes/IDs on the element, there's a good chance this will return a .phtml file. For example the sign in link is in magento/module-customer/view/frontend/templates/account/link/authorization.phtml so you'll need to copy that file into your theme: app/design/frontend/VENDOR/THEME/Magento_Customer/templates/account/link/authorization.phtml. Or you can use template hints, more info on those can be found here - devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/… – Ben Crook Mar 16 '17 at 12:52
0

I have followed below tutorials to create theme in magento2. I hope it will also work for you.

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html

https://www.cloudways.com/blog/create-custom-theme-magento-2-part-1/

https://www.mageplaza.com/kb/how-to-create-magento-2-theme.html

These all are good tutorials with detailed description you can follow steps.

Thanks.

  • Already Followed All Those Links – H_Parekh Mar 16 '17 at 10:10
  • then can you please tell me what exactly problem you are facing ? – Dhaval Solanki Mar 16 '17 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.