Image above Header - Collection Page

[Franz22]

Hi Shopify Wizards 💻, 

Can you explain me how can I add a small horizontal image that will appear on this page above the Title ? (see image below, green line)

• Target Page (it's a collection page) : https://www.frozensailor.com/collections/monthly-selection
• Theme : Dawn

Thank you !

Francisco

[dmwwebartisan]

@Franz22 

This is code customization work .

[Franz22]

Any other solution ? more specific solution please ?

Thank you

[LitExtension]

Hi @Franz22,

Please go to sections > main-collection-banner.liquid file and move code: https://i.imgur.com/ukItelW.png

Refer https://github.com/Shopify/dawn/blob/main/sections/main-collection-banner.liquid

Then you just need to upload the image in the collection, it will display fine. https://i.imgur.com/C9mVZHd.png

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck

[Franz22]

Hi,

Thank you for your answer. However what I want to upload is something different :

• The image that will be shown will be an horizontal .png or .jpeg image, different from the collection image (which is square, plus I don't want it to appear at that specific space).

In that case, what should I do ?

Best,

Francisco

[LitExtension · Accepted solution]

Hi @Franz22 ,

If so, image will be same for all collections.
- You can upload images in Assets, ex: image-collection.png
- You just need to add this code in main-collection-banner.liquid file where you want to display it will work fine:

<img src="{{ 'image-collection.png' | asset_url }}" class="image" alt="" />

Hope it clear to you.

[Franz22]

Hi,

The asset integration and the line of code is clear. However, where exactly in main-collection-banner.liquid   should do I add this line of code ?

I want the image to appear above "Monthly Selection". Please refer to my original thread to see details.

Thanks 

Francisco

[LitExtension · Accepted solution]

Hi @Franz22,

Please go to sections/main-collection-banner.liquid file and add code in line 6.

Refer https://i.imgur.com/3GZ3cII.png

Hope it clear to you.

[Franz22]

It worked ! 

Thanks so much !