How to change/add the banner for each category?

[nix]

Hello, as shown in the image below, I want to change this category banner image in each category page that represents the products of that page/category.

I am currently using Claue theme, Magento 2.4.2.

[Heemin]

Hi, nix,

If you want to customize each category page, you can do that. I have done it myself. I advise to do these changes in dev mode and not minimize or merge css:

The first step is creating you custom CSS file.

1. Create a file mycustom.css in app\design\frontend\Mgs\claue\web\css\ folder

2. Declare it in \app\design\frontend\Mgs\mgsblank\Magento_Theme\layout\default.xml as the way we declared other css files (see screenshot)
   

   

3. You can add your css to the mycustom.css file but you must deploy again to your change reflect the frontend. Note to remove the content of var and pub/static/frontend/ folder before deploying

4. If you don’t want to deploy again each add css to file, you can add your css to mycustom.css file in pub/ folder directly but note after editing Preformatted text, you must copy the changes to mycsutom.css file in app/design/ folder

Then you can add your customer CSS the way I did it below for my website. Just customize it for your purposes.

Hope that helps,
He’emin

[nix]

Hey @Heemin thanks for your reply. I am gonna try it, just one more question that I am confused about is that… how am I gonna target certain category page? this CSS file will be loaded for all the pages.

Now how will I want to display class .category-page-men to be displayed under the Mega Menu of category page Men.

Also, about putting CSS in pub, you mean then in the web/css directory I need to put src as http://www.magento2-website.com/custom.css ???

[Heemin]

Hi Nix,

See the response from Ketika M. He or she explains how to target unique classes for each page.

Is it possible to change styles in only specific page in Magento 2?

If you need me to show you how to do it with the example I send you, I can send you some screenshots tonight.

About your question with the pub folder: This only applies if you want to see the changes right away, without having to run the static deploy command over and over. However keep in mind, if you want to save your css changes permanently, you will have to edit it in the mycustom.css in the app\design\frontend\Mgs\claue\web\css\

The mycustom.css file will get deployed in your /pup folder, each time you run the command > > >

bin/magento s:s:d (in production mode)
bin/magento s:s:d -f (in developer mode)

in my case it looks like this for my two custom CSS files in the apps folder:

and for the pub folder:

The min in the file name xxx.min.css shows up because I have minimized my css files for production mode. As I wrote you above I would advise you to not do so as long you are changing CSS code.

cheers,
He’emin

[nix]

@Heemin please check the image, I am trying to add the banner in Men category, and found this class name in the body tag. But the page doesn’t have this the banner, even though its being loaded in the merged css.

So I used ::before to display this above the breadcrumbs.

[nix]

Alright I finally got it. And was able to change the header image. I had to target the page-title-wrapper class.

[Heemin]

Nix,
Is your website accessible publicly? I could have a look and test it for you with developer tools on the browser.

He’emin