I override the module_catalog from template and put it in following directory


(gogparent is my custom theme)that inherit to blank theme. It works fine, the question is how can I override css for Module_catalog from blank theme to my gog theme and have some changes..



There are two ways to do this:

  1. You can copy the original LESS file from vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/_module.less to your custom theme. This can be used when you want to override a lot of stuff in that file.
  2. You can create a new file called app/design/frontend/gog/gogparent/Magento_Catalog/web/css/source/_extend.less. In this file you can add all your custom styling, which comes on top of the default styling of Magento_Catalog that's in the Blank theme.

Personally I'm more a fan of option 2, since that reduces the number of work you have when upgrading Magento, because if the styling of a module changes in the Blank theme, you don't have to copy the entire file. And I like to add an addition to option 2 as well. What I normally do is this:


@import 'extend/_grid';
@import 'extend/_productview';

Now I put all my customisations into these separate files, which gives me a much better overview of the changes per pagetype. You only need to create a folder app/design/frontend/gog/gogparent/Magento_Catalog/web/css/source/extend and put all these separate less files in there.

  • Thanks for helping.how I know home page read which of style?a original style or overrided style? – mahsaabdev Feb 27 '18 at 11:47
  • I don't really understand your question. Can you specify it a bit more so I can answer your question. – Arjen Miedema Feb 27 '18 at 12:25
  • I cant find path of css for changing them,how I can find css path of specific part of page? – mahsaabdev Feb 27 '18 at 16:14
  • The extend files don't exist in the Blank theme (at least not for Magento_Catalog, I'm not 100% sure if that goes for all cases). You need to create a new file for that in your own theme: app/design/frontend/gog/gogparent/Magento_Catalog/web/css/source/_extend.less. Magento will automatically detect that file and use if for generating your stylesheets. – Arjen Miedema Feb 27 '18 at 22:13

You need to override .less files from vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source in your custom theme. Then flush cache and run deploy command.

For example you can copy _module.less file from that folder to your custom theme folder app/design/frontend/gog/gogparent/Magento_Catalog/web/css/source/ and then you can do required customization in it.

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.