How To Show Collection Page Title Text On Top Of Collection Page Image

Having trouble trying to find a solution to this minor problem. I want to have the Collection page title (“M+ Ocean”) overlaid on the Collection page image. This seems to me a minor problem with an easy fix but I haven’t seen any other questions on the same obstacle. Can anyone provide some help?

Hi @ModoDesignTeam1 ,

Go to sections > collection-template.liquid file and change code here:

Code:

# 
      {{ 'collections.general.collection_label' | t }}: 
      {{ collection.title }}
    
style="margin-top: 0px;"

Hope it helps!

1 Like

Thank you so much for providing this help! Now I have the Collection Page title displayed above the Collection Page image. I was wondering if it’s possible to display that Page title overlayed on the Page image, as it is on the template carousel (example added here). Would this be possible?

Hi @ModoDesignTeam1 ,

By default, when you don’t add code, the title will show above the image like demo:

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

Hi @LitCommerce

Originally, the title was not being shown above as the default demo you shared. Rather, it was not shown at all, and the banner image would be displayed. I added the string of code you shared before but now the title is displayed stacked above the banner image, but I need it to be displayed on top of the image (like in the screenshot you shared in your last comment). Any tips on how to get that result?

Hello,

Not sure if this is close. However I am having this issue and I try to follow the advice above, however, I don’t have the page - collection-template.liquid

I believe this has been removed with the most recent updates.

How can I solve this?

Thanks,