Have Collection Banner Image display like an image banner Block

Store Design

Topic summary

Main issue: In the Dawn theme, make each collection’s banner display like an Image banner section without creating a new template per collection, and have the image change per collection.

Key solution: Add an Image banner section to the collection template and bind its image setting to the collection’s own image using Dynamic Sources (the data icon in the section settings). This auto-populates the banner based on the collection being viewed. Hide the default collection banner if it duplicates the new banner.

Notes:

  • Dynamic Sources let you link a section/block setting to data from the current resource (e.g., collection.image) or metafields.
  • Metafields/metaobjects can extend content (e.g., vendor info) for richer, per-collection content.

Alternatives mentioned: Resize the native collection banner to full width, but the recommended approach is the Image banner + Dynamic Sources.

Artifacts: Screenshots are central, showing where to click the data icon and select the collection image.

Status: Actionable guidance provided; no code changes needed, likely resolved.

Summarized with AI on December 24. AI used: gpt-5.
1

I am using the Dawn Theme

I am trying to get my collection banner images to display like an image banner building block. The only way I know to do this is make a new collection template for every collection I create and put an image banner at the top, hiding the collection banner.

Is there a better way to do this?

1st solution could be to change the size of the collection banner image to make it stretch across the screen like a banner image

or

2nd solution could be making it so that the image banner pulls the image it uses from the collection instead of the template. (Because the image needs to change with every new collection)

Image must change with each collection.

Thank you.

Website: Swagx.us

2

Hey Teague,

Greetings, So you can add image banner section to the collection template and then connect it to the collection image.

fierymayo_0-1721350176728.png
fierymayo_0-1721350176728.png1912×856 132 KB

3

You might want to explore Dynamic Sources

Add your Image banner building block to the template.

pRoy_1-1721350093038.png
pRoy_1-1721350093038.png300×192 6.29 KB

Click that Data symbol in the upper right.

You can then select IMAGE. This will populate the banner with corresponding image of the collection you are rendering.

pRoy_2-1721350148000.png
pRoy_2-1721350148000.png320×218 8.5 KB

In my example you will see VENDOR, this is a Metaobject I made that allows me to add additional content dynamically to collection pages.

Metafields and dynamic content linking can be very powerful and handy.