Hide Collection Title in Collection Page banner

Highlighted
New Member
2 0 0

Hi.

I´m trying to hide the Collection Title in the banner/header displayed in the Collections Pages.

 

I was able to successfully remove this text from Collection List showing up in the Home Page. However, this doesn't get removed from the collection page itself. I'm talking about the text showing in the layout over the banner not the page title (which I also removed).

According to browser´s developer tools, this seems to be a hero__title inside the hero_inner element

<div class="hero__inner">
        <div class="hero__text-wrapper text-center">
          <div class="grid">
            <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
              <h2 class="hero__title">Catalog</h2> //this is what I want removed
            </div>
          </div>
        </div>
      </div>

 

Initially, I want this text removed only for collection pages so a bit scared of touching this as probably this hero element is used across all other pages.

I found the following code in the hero.liquid file but removing the parts referring to hero__title didn't seem to work. (did this as a test just to know if it's right place, remember I want to hide it only for collections). 

Anyone can help?

Thanks

 

<div class="hero__inner">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>
          </div>

 

 

 

0 Likes
Highlighted

Hello,
Please share your site url and screenshot.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
2 0 0

HI. Thanks for assisting.

Here is a screenshot of where the problem is.

eComeHere_0-1605959109340.png

The store is not published yet so unfortunately I can't share a link. Maybe this screenshot together with the code I provided earlier would be enough to identify the problem?

Thanks

 

 

 

0 Likes