I am building a custom theme, Luma is the parent theme. I am trying to customize the product listing page (category page) like this . Can you please help me which less file that I need to update also how to add custom less file.
First of all, you shouldn't base on Luma Theme unless you are willing to keep almost all of those styles in your custom one. Luma Theme is an example theme from Magento in order to show how can it be used.
If your case is actually that one, you should follow as the devdocs say:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.html -> create an
_extend.less file in which you are going to locate your new properties or by overriding (which is my personal recommendation) every file that you need to customize from parent theme and apply it to your new one -> https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/debug-theme.html
Check the guidance from them and you will see that the fallback is not that hard to understand in theming perspectives.
To override files and customize:
- Check Parent theme, in this case, Luma theme under vendor
theme-frontend-lumaand look for your
Magento_Catalogmodule and see what can you copy from there and paste under your theme-under same module directive.
- If Luma doesn't have it, check the Blank theme (which is the parent of it) and do the same. If you find what you need, copy and repeat under your theme.
- If there isn't a style file that can help you, you should create your own under your
_module.lessand you will be on the path to get it.