Follow below steps to create metafields for collection page banner image, short description and countdown.

Banner images #

From your Store Admin –> Settings –> Metafields and metaobjects –> Click Collections

Click on “Add definition” button and add data as below for banner image

Name: Banner Image
Namespace and Key: custom.banner_image
Select Content type: Files > Select “Accept specific file types” > select “images”

If you like to use different image for mobile site then create new metafield same as above steps but use different names like below

Name: Mobile Banner image
Namespace and Key: custom.mobile_image

Banner short description #

From your Store Admin –> Settings –> Metafields and metaobjects –> Click Collections

Click on “Add definition” button and add data as below for short description in banner.

Name: Short Description
Namespace and Key: custom.short_des

Select Content type: Files > Select “Accept specific file types” > select “Single Line Text”

Banner Countdown #

From your Store Admin –> Settings –> Metafields and metaobjects –> Click Collections

Step 1 : Click on “Add definition” button and add data as below for countdown.

Name: Countdown
Namespace and Key: custom.countdown
Select Content type: Files > Select “Accept specific file types” > select “date and Time”

Step 2 : Now open collection page on store admin where need to show banner details and Scroll down to “Metafields”

Step 3 : Click on field to add image, text and date then save page after add details.

Step 4 : Now go to theme customize > open collection page > Select collection page in left sidebar

Step 5 : Now in right sidebar you can see details like below screenshot

Step 6: Click on metafield icon and select metafield we already created.

Click on Save button. Now you can see details in collection page on store front.