1

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.

Improve this question

1 Answer 1

Reset to default
0

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.

Update:

To override files and customize:

  1. Check Parent theme, in this case, Luma theme under vendor theme-frontend-luma and look for your Magento_Catalog module and see what can you copy from there and paste under your theme-under same module directive.
  2. 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.
  3. If there isn't a style file that can help you, you should create your own under your Magento_Catalog directive, web/css/source and _module.less and you will be on the path to get it.
Improve this answer
5
  • I am keeping Luma theme as my parent theme because i can use many features but my question is how to override product listing page like this pi001.pagayo-theme.com/women.html example. if you can help me with how to remove hover effect (I need to show the "add to cart" when user landed in the page for desktop and mobile) using custom Less file will very helpful
    – GeorgeM
    Commented Apr 4, 2019 at 0:33
  • I am telling you how above. Follow the fallback directives from Magento 2 and you will be fine. Let me update some steps for you. But reading to the devdocs shouldn't harm you @GeorgeM
    – Ezequiel Alba
    Commented Apr 4, 2019 at 19:02
  • I updated with some steps. My recommendation for you, read before coding. You are not actually following the steps accordingly from the Magento original documentation. I checked your other questions and you have several problems regarding fallback inheritance and local development symlinks deployments. There's no magic solution for your custom styling, and there's no copy & paste and voilá. Good luck in your learning process!
    – Ezequiel Alba
    Commented Apr 4, 2019 at 19:11
  • Thanks for the tips, when i use step 3, i get error while deploy static content, but i find a solution to work.
    – GeorgeM
    Commented Apr 4, 2019 at 20:31
  • @GeorgeM if step 3 doesn't work, check exactly how are you deploying and if you have developer mode enabled. Check that to deploy symlinks you should dev-source theme instead on the bin/magento CLI. devdocs.magento.com/guides/v2.3/config-guide/cli/… Please mark my answer as correct if this helped you. Thanks.
    – Ezequiel Alba
    Commented Apr 9, 2019 at 1:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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