How to hide the collection title on my store page (theme pop)

Highlighted
New Member
1 0 0

Hi,

I have been trying to find a simple way to hide the collections name title that shows up on each of the pages of my store. Some of my collections names are different from my page name and it can look a bit messy and confusing on the store. I give my collections certain names to help when I am organizing products, however I don't want those names to appear on the top of the store pages. Is theme a way to remove those titles? If so can someone walk me through the process. I am using the theme "Pop". Thank you.

0 Likes
Highlighted
Shopify Partner
1787 211 370

Hey Shaune,

To be on a safe side, create a copy of your theme. Then go to Shopify admin /admin/themes, choose your theme, from the Actions drop-down select Edit code, on the left hand side locate sections/collection-template.liquid . Comment the four lines of code that are rendering the title:

    <h1 class="section-header__title">{{ collection.title }}</h1>
    {% if collection.description != blank or section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
      <hr class="hr--small">
    {% endif %}

Just add {%comment%} above and {%endcomment%} bellow so the code snippet reads:

    {%comment%}
    <h1 class="section-header__title">{{ collection.title }}</h1>
    {% if collection.description != blank or section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
      <hr class="hr--small">
    {% endif %}
    {%endcomment%}

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
2 Likes
Highlighted
New Member
3 0 0

I would also like to hide the collection titles on my pages but i have Supply theme so the code editing is not the same for me. Can someone please help me find which code to edit with Supply theme.

 

Thanks,

 

Rob

0 Likes
Highlighted
Excursionist
19 0 3

I tried the code on debut theme and it worked for me! :) Is there a option to hide the title on desktop devices only, but show them on mobile devices?  

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 127

Hey, @christian95!

 

That's a good question! Yes, you can definitely set it up so that it is only hidden on desktop, and visible on mobile. Later on,  You can do this by editing your theme code and add a CSS @media rule. The steps to make this customization will differ from theme to theme. In the tutorial below, I am going to provide steps for both Pop and Debut, since the OP (original poster) inquired about Pop theme. For future reference, I recommend starting a new thread in Shopify Design forum for questions about different themes, that way your post will get more traction!

 

Before making any changes to your code, I highly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results. After you've duplicate your theme, feel free to follow the steps below.

 

Pop

1. From your admin, go to 'Online Store > Themes > Actions > Edit code'.

2. Open up 'collection-template.liquid' inside 'Sections' folder.

3. Above</style> add the following code:

 

@media only screen and (min-width: 1025px) {
  .section-header__title {
    display: none;
  }
  .hr--small {
    display: none;
  }
}

 

4. Click 'Save'.

 

Debut

1. From your admin, go to 'Online Store > Themes > Actions > Edit code'.

2. Open up 'collection-template.liquid' inside 'Sections' folder.

3. On the very top of this file, add the following code:

<style>
  @media only screen and (min-width: 751px) {
  h1 {
    display: none;
  }
}
</style>

4. Click 'Save'.

 

Once you save your changes, your collection titles will only be displayed on mobile view. Later on, if you want to revert your code, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made and supported by Shopify, our theme specialists may be able to look into making the change as well if your account is eligible!

 

Let me know if you have any follow-up questions! 

 

Cheers!

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Highlighted
Shopify Partner
64 1 3

I cannot find on my collection-template.liquid the code to comment out

    <h1 class="section-header__title">{{ collection.title }}</h1>
    {% if collection.description != blank or section.settings.collection_tags_enable or section.settings.collection_sort_enable %}
      <hr class="hr--small">
    {% endif %}

 

is this method still working to hide the collection title on the collection page?

I'm using debut theme

anyone can help?

0 Likes
Highlighted
New Member
1 0 0

How would I hide the collection titles on my store's home page if I have the theme "Minimal". I tried to use the comment out trick but that didn't work for me.

0 Likes
Highlighted
New Member
7 0 0

worked perfectly. thank you!

0 Likes
Highlighted
New Member
1 0 0

I have Brooklyn and would love to know how to do this also!

Thanks in advance

0 Likes
Highlighted
Tourist
8 0 0

It worked on my Debut theme! Thank you so much May

0 Likes