Display collection title (h1) on each collection page (Turbo theme)

Technical Q&A
1

Hello!

I use the Turbo theme for my store. I’d like to display the collection title on each collection page.

It seems the only way to do this within the Turbo theme is by adding it on top of the collection banner image. Aesthetically, that’s not what I want.

The other alternative I’ve found is to manually go into each collection page and create a heading 1 with the collection title. That’s a lot of work, because we’ve got maybe 50 collections.

Is there a way to automatically display collection titles under the image as opposed to on the image?

This is some of the the current code in the collection template liquid file that might be relevant:

(for the banner)

{% if collection.image %} {% assign image = collection.image %} {%- elsif section.settings.image -%} {% assign image = section.settings.image %} {%- else %} {% assign image = collection.products.first.featured_image %} {% endif %}

{% render ‘image-element’,
image: image,
alt: collection.title,
stretch_width: true,
progressive: true
%}

{% if section.settings.display_collection_title %}

{{ collection.title }}

{% endif %}

And

{% if section.settings.display_collection_title and section.settings.featured_collection_image == false %}

{{ collection.title }}

{% endif %}

Thanks!

2

Hello @merio ,

We have checked the current code you shared and we can see a condition-based rendering of the collection title.

To fix this problem, you can enable the checkbox for showing the collection title in the customization settings and paste the below code just above the code which is responsible for displaying the product grid.

{% if section.settings.display_collection_title %}

{{ collection.title }}

{% endif %}

Hope it helps. Let us know if you need more help on this.

Thanks & Regards
CedCommerce.

1 Like