Adjusting size of nodes

Size of nodes in catalogues are adjusted using 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 node sizes. Node sizes are defined using three values to allow them to scale.

Preferred-width - This is what web viewer aims for. Note that two rows are needed.
Min-width - Nodes will not get smaller than this size. If smaller they will switch over to fewer nodes on a row.
Max-width - Nodes will not get bigger than this size. If larger they will switch over to more ndoes on each row.

.catalogue-view.product .gallery-view .node-group > .node-view {
    --preferred-width: 200px;
    preferred-width: 200px;
    min-width: 150px;
    max-width: 250px;
}

Experiment with different screen sizes to find the best settings for the number of nodes the catalogue has, the size of images and preference of the customer. Normal (default) width of the body area is 1400 px, so select node sizes based on that or change body width.

Note that the size attribute on images in profile.config does not change the size of images in web viewer. It instead changes the size images are scaled on the server side.

Typically select a size on the server side which is a bit larger than the image presented on web. This allows images to scale when browser zoom function is used.