Hide page title on one page

Solved
chrislenoski
New Member
4 0 0

Hello,

Can you tell me how to hide the page title on a single page. Theme is Debut.

 

Thanks

 

Accepted Solutions (2)

Accepted Solutions
Ninthony
Shopify Partner
2272 342 936

This is an accepted solution.

go into your page.liquid and look for {{ page.title }} and use an if or an unless statement with the page's handle to exclude it. For example my default page.liquid for Debut is as follows:

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
        <em><p>Posted By: {{ page.author }} at {{ page.published_at | date: "%D" }}</p></em>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

If I wanted to exclude the title on my "Super Secret Title" page, i'd do this:

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        {% unless page.handle == "super-secret-title" %}
          <h1>{{ page.title }}</h1>
        {% endunless %}
        <em><p>Posted By: {{ page.author }} at {{ page.published_at | date: "%D" }}</p></em>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Nick
Community Moderator
Community Moderator
4510 433 980

This is an accepted solution.

Hey @chrislenoski,

 

Thanks for sharing your URL. I had our themes team take a look and @Ninthony's answer is pretty spot on for what you are looking for here. 

 

Should you for any reason want to hide the page titles for all pages, you can do that also. To do this you would go to the theme.scss.liquid file and add the following code the very bottom: 

 

.template-page h1 {
    display: none;
}

Hope this and @Ninthony's answer helps! 🙂

Nick | Community Moderator @ 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

View solution in original post

Replies 68 (68)
Nick
Community Moderator
Community Moderator
4510 433 980

Hi @chrislenoski,

 

Nick here from Shopify. 

 

This is definitely possible to do. Would you be able to share the URL for your store though? The store URL will greatly help make sure any code edits for this are correct rather than guessing in the dark. 🙂

 

Looking forward to hearing from you. 

 

All the best, Nick

Nick | Community Moderator @ 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

chrislenoski
New Member
4 0 0
Ninthony
Shopify Partner
2272 342 936

This is an accepted solution.

go into your page.liquid and look for {{ page.title }} and use an if or an unless statement with the page's handle to exclude it. For example my default page.liquid for Debut is as follows:

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
        <em><p>Posted By: {{ page.author }} at {{ page.published_at | date: "%D" }}</p></em>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

If I wanted to exclude the title on my "Super Secret Title" page, i'd do this:

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        {% unless page.handle == "super-secret-title" %}
          <h1>{{ page.title }}</h1>
        {% endunless %}
        <em><p>Posted By: {{ page.author }} at {{ page.published_at | date: "%D" }}</p></em>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Nick
Community Moderator
Community Moderator
4510 433 980

This is an accepted solution.

Hey @chrislenoski,

 

Thanks for sharing your URL. I had our themes team take a look and @Ninthony's answer is pretty spot on for what you are looking for here. 

 

Should you for any reason want to hide the page titles for all pages, you can do that also. To do this you would go to the theme.scss.liquid file and add the following code the very bottom: 

 

.template-page h1 {
    display: none;
}

Hope this and @Ninthony's answer helps! 🙂

Nick | Community Moderator @ 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

cece78
New Member
2 0 2

I had the same issue, i 've done the first step but now i have a  big blank . How can i delete this blank ? ThanksProbleme titre produits.JPG

 

openeast
Tourist
7 0 2

Hi there! I am also having this issue with the big empty space when the titles are removed, did you ever fond a solution for it??

Nick
Community Moderator
Community Moderator
4510 433 980

Hi @cece78 and @openeast,

 

Would you be able to share your store URL links and point out exactly where the space is on your store and I can take a closer look for you then, please? Without seeing the store or knowing what theme you are using, it's very difficult to figure out what the next steps can be for you on this. Looking forward to hearing from you. 

Nick | Community Moderator @ 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

openeast
Tourist
7 0 2
Hi Nick,
I am using the Debut theme and the store url is https://open-east.myshopify.com/admin/themes/78986641489/editor
I used a line of code from this thread that I commented on to delete the page titles on my Contact, About Us and FAQ, the code worked, but now there is a large amount of white space that I don’t know how to get rid of.
Here are some pictures of the specific spots I am talking about:


Nick
Community Moderator
Community Moderator
4510 433 980

Hi @openeast, thanks for getting back to me on this. 

 

I don't see any pictures about the specific posts about this, but you are using a Shopify developed theme. Because of that, our theme support team could look into helping you with this. I would need to reach out to you directly about this to verify some details to dig deeper. Would you be able to confirm if the best email to reach you on is the one you signed up to the community with? 

Nick | Community Moderator @ 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

openeast
Tourist
7 0 2
Yes, that is the best email.
SimonOchse
New Member
1 0 0

Hi Ninthony, 

 

I have the same issue but my theme is Pipeline, unfortunately I tried what you suggested and the Header remains but moves aligns to the left. I have probably done something wrong in the code: 

 

<!-- /templates/page.liquid -->

{% section 'page-images' %}

<div class="wrapper page-margin">
<div class="grid">
<div class="grid__item large--two-thirds push--large--one-sixth">
<h1 class="text-center h2 templateTitle" style="display:none;">
<div class="section-header text-center">
{{% unless page.handle == "super-secret-title" %}}</h1>
<h1>{{ page.title }}</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>

 

Any advise would be greatly appreciated. 

 

Kind Regards,

 

Greg

Ninthony
Shopify Partner
2272 342 936

Yeah you can't just use "super-secret-title" haha, that would be an interesting practice for shopify to follow. That was just an example if my page was named "Super Secret Title". You need to use the title of your page, but as a handle. Handles are all lowercase with dashes between spaces. So if you were trying to hide the title on the "About Us" page, you would do:

 

{% unless page.handle == "about-us" %}

{{ page.title }}

{% endunless %}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
jahlbom
Excursionist
40 2 15

Thanks for this! 🙂

craftbrew21
New Member
1 0 0

Hi, I am also trying to hide the title box on each page (using mira theme);  How would I modify this part of the theme.liquid to accomplish no titles on any page?  Also if that leaves a blank area would be nice to eliminate.  Thanks!

 

 

<!-- Title and description ================================================== -->
<title>
{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

k-n_gus
Tourist
19 0 1

Hi @Ninthony  Thanks for all of your suggestions on this thread so far. I tried the code to remove titles from all pages in Debut and it worked for my 'our story', 'ingredients' and 'vote' pages but not for my blog or products pages... how do I remove the titles from these pages? 

 

Also, how do I remove the space at the top where the title used to be on all pages? 

 

https://www.bluandgreen.com/

password: todaybebluandgreen

 

thanks!

Ninthony
Shopify Partner
2272 342 936

It's the same idea, but you would need to go into those respective files, as the previous instructions were only for pages.  So for your blog you'd go into blog.liquid and look for blog.title, for products you'd go into product.liquid -- which often only contains another section which would look something like:

 

{% section 'product-template' %}

If that's the case, you'd go into your sections folder and look for product-template.liquid, and then you would be able to find product.title in that file and follow the same procedure.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
k-n_gus
Tourist
19 0 1
Hi @Ninthony Thanks, I tried adding a similar code to what I did yesterday
that worked, and adjusted the titles per what type of page they were
(collection and blog). It generally worked, except there is that blang
space at the top which I don't know how to get rid of, and on the
Collection page for the shop it still says how many products are listed....
Do you know how i can get rid of that?

I will attach screenshots.

Ninthony
Shopify Partner
2272 342 936

It may be that your titles are contained inside some kind of HTML element, which still exists regardless if you just comment out the title and they may have some padding or margins applied to them. You'd want to wrap your liquid code around the HTML, for instance if you're using a comment to hide the titles in collection.liquid:

 

{% comment %}
<div class="collection_title">
  {{ collection.title }}
</div>
{% endcomment %}

As for the number of products displayed, that's probably going to be something like:

 

<div class="current-items">
  Showing {{ paginate.items }} items
</div>

So ctrl + f for "paginate.items" to see if you can find that.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
k-n_gus
Tourist
19 0 1

Hi @Ninthony 

Thanks for the info, but I'm a little lost. 

Are you recommending I remove what I had already done at the bottom of theme.scss.liquid and include the code bits above in different areas? If so, which ones? And am I meant to make any adjustments to what is here (I am new to adjusting code, so don't know the needs). 

 

As for the code you suggested to remove the number of products text being displayed, I tried that in a couple of places and nothing happened... maybe you could explain further where I put this? 

 

thanks