Add custom banner to the collection pages

If you want to use the Banner section in the collection page to have dedicated images for mobile and desktop views, you can do so via metafields. Please, follow the steps.

Create a Collection metafield.

You need to have two metafields: one for the desktop image and one for mobile. For this, navigate to the Admin panel -> Settings -> Metafields and Metaobjects -> Collections, and click on the "Add definition" button.

You need to have two metafields: one for the desktop and one for the mobile image.

Fill in the "Name" field and select the type "One, Image (File)".

Navigate to the Collection in the Admin panel (Admin panel -> Products -> Collections -> [collection]), find the metafield you have created, and upload images.

Please repeat this step for each of your collections.

Next, open the theme editor and navigate to the collection page. Click on the "Add section" and search for the banner section. Add it to the template and hide the original collection banner image.

The next step is to connect all the needed items as a dynamic source to the options in the banner section you have added to the template.

Add the collection name and description.

Click on the "connect dynamic source" button near the Heading field and select the "Title" option. Now, on each collection page will be displayed its name.

The collection description can be connected to the "Text" field in the same way. Just click the button and select the "Description" from the list.

Add the images for mobile and desktop.

Click on the  "connect dynamic source" button near the Image desktop and select the metafield that stores the image for the banner from the list. Perform the same steps for the Image mobile and select the metafield with a mobile-dedicated image.