Adding a hero image

Add a hero image on a catalogue page by using the below combination of profile.config and css.

Step 1

Add a class to the type of catalogues you wish to have a hero on using PresentationSettings in profile.config.

<PresentationSettings>
  <!-- Add css class product to all catalogues -->
  <Presentation template="catalogue" class="product">
    <Trigger base-type="Catalogue"/> 

    <!-- Whatever settings for products -->
    
  </Presentation>
</PresentationSettings>

Step 2

Add css code for the hero image.

<!-- Add hero image on all catalogues with class product -->
.catalogue-view.product:before {
    content: '';
    background-image: url("hero.png");
    grid-row: header;
    grid-column: left / end;
    z-index: -1;
}

<!-- Add hero image also on small screen -->
@media all and (max-width: 575.98px) {
    .catalogue-view.product > header {
        background-image: url("hero.png");
    }
    .catalogue-view.product:before {
        display: none;
    }
}