Creating a different banner image for each collection

Store Design
, ,
1

What is the best way to create a different banner image for each separate collection please? If you use the default collection then you can only have one banner image.

Currently I have created multiple collection “templates”, will this work adequately without slowing down my website over time if I have many collections?

1 Like
2

Hey @TGregs

Creating a separate collection template just to have different banner for every collection is not a user-friendly way anyways. What I would suggest you is to create a collection image metafield and then just simply connect that metafield with your image banner section and just add image in Shopify backend collection page metafield.

Feel free to let me know if you need help setting that up and I would be more than happy to help with that.

Best,

Moeed

1 Like
3

Hi Eliza,

Thank you, yes please I would like a guide on setting up the Metafields please.

How do I find out what online store version I am using please?

I am using shopify theme: Dawn 15.2.0

Best regards,

4

Thank you @Moeed

Are you able to give me a quick guide as to how to setup a collection image metafield and then link multiple collection image banners into multiple collections please? I have found that I need to play around with uploading different image sizes to get the best resolution result, can I do this when using your metafield method?

Best regards,

5

Hi, @TGregs

I recommend setting up a separate template and leveraging metafields to manage the image display for each collection.
Should you encounter any issues or require further assistance, please do not hesitate to reach out — I would be happy to support you in resolving them.

6

Hi @AnneLuo ,

Thank you, yes please, are you able to advise how to setup the metafields for banner images please, I am using theme “Dawn” version 15.2.0.

Best regards,

7

Go to Settings > Custom data > Collections
Create a new metafield:

  • Name: Banner Image

  • Type: File (one image)

  • In your collection template, paste this code where you want the banner:

{% if collection.metafields.custom.banner_image %}
  
{% endif %}

{%- comment -%}
Replace `custom.banner_image` if you use a different namespace or key.
For example: collection.metafields.YOUR_NAMESPACE.YOUR_KEY
{%- endcomment -%}

Now go to each collection page in the admin and upload a unique image in the Banner Image metafield.

screenshoteasy (16).png
screenshoteasy (16).png1365×513 260 KB

8

Hi, @TGregs

Can you please send me your collaborator code? I will check it for you.