Solved

Can you conceal the title of a single page in Debut theme on Shopify?

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)
Ninthony
Shopify Partner
2329 350 1023

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
Shopify Staff (Retired)
4531 434 1024

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! 🙂

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 70 (70)

Nick
Shopify Staff (Retired)
4531 434 1024

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

To learn more visit the Shopify Help Center or the Community Blog.

chrislenoski
New Member
4 0 0
Ninthony
Shopify Partner
2329 350 1023

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
Shopify Staff (Retired)
4531 434 1024

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! 🙂

To learn more visit the Shopify Help Center or the Community Blog.

cece78
Visitor
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 3

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
Shopify Staff (Retired)
4531 434 1024

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. 

To learn more visit the Shopify Help Center or the Community Blog.

openeast
Tourist
7 0 3
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
Shopify Staff (Retired)
4531 434 1024

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? 

To learn more visit the Shopify Help Center or the Community Blog.

openeast
Tourist
7 0 3
Yes, that is the best email.
jarmuir
Tourist
12 0 0

Hi Nick,

I am having this exact same problem. CSS worked great in removing the titles but then leaves a large white gap. Am I able to get any advice for this at all?

Cheers

 

 

Nick
Shopify Staff (Retired)
4531 434 1024

Hi @jarmuir

To be perfectly honest, my coding knowledge is very limited and I would not be 100% on this. Hopefully, Ninthony sees this as they would definitely be more equipped than me to helping you. Would you be able to reply and share your URL, what theme you're using, and if possible a screenshot of the exact area you're referring to? It would be a great help in troubleshooting this further for everyone. 

To learn more visit the Shopify Help Center or the Community Blog.

jarmuir
Tourist
12 0 0

Hi Nick,

No problems, thanks for the help. Im using debut theme.

 

URL is www.jamesmuirprints.com with password ohhimark

Screen shot below of my contact page. See the large gap between the main menu and my first line of text. This is the same on my about page and collection page. 

Thanks 

 

Screenshot 2020-09-30 at 14.54.06.png

Ninthony
Shopify Partner
2329 350 1023

Hey @jarmuir, tried going to your site. The password you provided (nice, by the way) doesnt appear to be working. Did you update it recently? 

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 😄
jarmuir
Tourist
12 0 0

Hi! 

Thanks for getting back to me.

Password is now : Beranger

Thanks for your help.

Let me know if you need any more info.

As I said before im trying to reduce the white space where the page titles used to be, mainly on the about pages and contact. 

Ninthony
Shopify Partner
2329 350 1023

You can add this at the bottom of your theme.scss.liquid file:

.template-page .main-content, .template-page .section-header {
    padding-top: 0;
    margin: 0;
}

 

Should be good to go. 

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 😄
jarmuir
Tourist
12 0 0

Thank you! 

Neemala
Visitor
1 0 0

How do I hide the 'Home' page title on my website? I want to reduce the amount of items on the main menu on my page. My website is www.neemafood.com


@Nick wrote:

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
Shopify Staff (Retired)
4531 434 1024

Hi @Neemala,

 

Do you mean the "Home" menu title as seen in the screenshot below? 

 

20-04-oghcz-torxa

If so, you can adjust the title headings in your store admin by going to Online Store > Navigation. You can see the guide Shopify created about this here. Let me know if this is what you mean. If it isn't can you elaborate and show me what you are referring to please! 

 

 

To learn more visit the Shopify Help Center or the Community Blog.

Anoosheh
Tourist
8 0 0

@Nick wrote:

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. 


 

 

Hi can you help me? Can you tell me how to hide the page title on a single page. Theme is Minimal

The URL is https://sloanomc.com/pages/team

Anoosheh
Tourist
8 0 0

How can I remove the Title from a single page in Shopfiy? 

https://sloanomc.com/pages/team

Ninthony
Shopify Partner
2329 350 1023

Go into page.liquid in your templates folder, or possibly page-template.liquid in your sections folder. ctrl + f and search for page.title -- You'll be looking for something like this:

<h1>{{ page.title }}</h1>

 

Then you're going to want to put a condition around it:

 

{% unless page.handle == 'team' %}
<h1>{{ page.title }}</h1>
{% endif %}
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 😄
Anoosheh
Tourist
8 0 0

thank you SO MUCH for your reply.

When I add the condition it gives me an error that it cannot be saved

 

Screen Shot 2021-02-13 at 5.01.07 PM.png

Ninthony
Shopify Partner
2329 350 1023

Sorry I'm an idiot, it should be 

{% endunless %} 

Not endif, its just such a habit to type endif

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 😄
Anoosheh
Tourist
8 0 0

Thank you so much for your help. I am beyond grateful. The Team title is still there. I am pasting the screenshots here. Do you know of a way to remove all Titles from all pages? I tried typing team with capital T and small t and nothing worked so far.

Screen Shot 2021-02-13 at 5.01.07 PM.pngScreen Shot 2021-02-15 at 1.28.58 AM.png

Screen Shot 2021-02-15 at 1.31.11 AM.png

 

Anoosheh
Tourist
8 0 0

Thank you so much! It worked! I don't know why it was not showing yesterday when I was refreshing! Can I ask you one more question I want to remove the title from another page which is the About Us page? How can I add to this line to remove that title as well? 

Ninthony
Shopify Partner
2329 350 1023

So if you're going to have this for more than one page, I'd suggest using a case statement to check the page handle and assign a variable to be true if it matches any case you provide. It would be something like this:

{% assign hide_title = false %}

{% case page.handle %}
  {% while 'team' %}
    {% assign hide_title = true %}
  {% while 'about-us' %}
    {% assign hide_title = true %}
{% endcase %}

{% unless hide_title %}
  <h1>{{ page.title }}</h1>
{% endunless %}

 

Above, we initially assign the variable "hide_title" to be false. Then we make a case statement for the page handle, if it's 'team' or 'about-us', we assign the variable to be true. Then where the page title occurs, we say "unless hide_title is true, show the page title." You can continue to add other pages if you need to inside the case statement.

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 😄
Anoosheh
Tourist
8 0 0

Many Many Thanks and so sorry to keep disturbing you but it gave again the following error

Screen Shot 2021-02-15 at 9.26.44 PM.png

 

Ninthony
Shopify Partner
2329 350 1023

Lmao, sorry. Once again, I am an idiot. It's not supposed to be "while" they should all be "when".

 

{% assign hide_title = false %}

{% case page.handle %}
  {% when 'team' %}
    {% assign hide_title = true %}
  {% when 'about-us' %}
    {% assign hide_title = true %}
{% endcase %}

{% unless hide_title %}
  <h1>{{ page.title }}</h1>
{% 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 😄
Anoosheh
Tourist
8 0 0

I am beyond grateful to you. Thank you so much for your help throughout.

Anoosheh
Tourist
8 0 0

I will message you now! and yes the club and this website needs your help 🙂 I will dm you now. The thread is marked as solved and I am not sure where I can also submit solved from my end.

fuhj
Visitor
3 0 0

Hi - could you help me too please? 

www.fuhj.co.uk

 

BBCo
Visitor
1 0 0

Hi!

I also wanted to hide my titles (contact us/shipping policy/terms of service), but this didn't work for me-I'm using the debut theme. Is there another way I can try? 

I'd also like to remove the "Shipping calculated at checkout." on my product pages if possible !

Thank you!

 

Daniel_Doma
Visitor
2 0 0

I did this and somehow it made my images barely visible, but I still have the ugly page title.

Capture.JPGbarely visible.

unclechook
Tourist
6 0 1

Hey, I'd like to do this too

 

www.unclechook.co.uk

 

please could you advise for Emerge theme

sultan14
Tourist
6 0 1

Hey, 

I tried it and worked for me but it stopped displaying my logo too. can you help. 

SimonOchse
Visitor
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
2329 350 1023

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 😄
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
2329 350 1023

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
2329 350 1023

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

 

claytonwang
Visitor
1 0 0

Howdy, @Ninthony! I seem to be having the same issue of a blank box remaining after I removed the title from my blog pages. I read your comment about wrapping the liquid code around the HTML, but I've got through the code and can't see what you're referring to. I'm currently working within article.liquid to remove the title text. The box isn't massively noticeable, but it would be nice if the margin about the first content image could be the same as the margin to the left and right of the first content image. How would I go about doing this? Here is a blog article example. THANK YOU!!!

 

https://www.wtb.com/blogs/wtb/fear-and-loneliness-in-morocco

R_N_B
Tourist
6 0 1

@Ninthony Thank you for this! 

 

If I want to do this to multiple pages, what is the best way to approach this?

Example, I have pages called sizing, contact, Mindset, etc. Can they be separated by commas or does each page need a new line of code? 

 

Please help 🙂

Ninthony
Shopify Partner
2329 350 1023

You could make an array of collection handles and loop through them, then if the page handle at any point is equal to any of the page handles in the array, set a variable to true and hide the page based on that condition:

// set variable to false by default
{% assign hide_page_title = false %}

//make a string variable of the handles, separated by a comma and space
{% assign handle_array = "sizing, contact, mindset" %}

//split that string by the comma and the space to create the array
{% assign handle_array = handle_array | split: ', ' %}

//loop through each item of the array and compare it to the page handle and set the variable to true
{% for handle in handle_array %}
  {% if handle == page.handle %}
    {% assign hide_page_title = true %}
  {% endif %}
{% endfor %}

//then wherever your page title comes into play, use a condition around it
{% unless hide_page_title %}
  {{ 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 😄
jesperahlbomUK
Shopify Partner
53 4 25

Thanks for this! 🙂

craftbrew21
Visitor
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 %}

Fozzo
New Member
4 0 0

Hello, 

I had the same problem (I wanted to delete the title of one page)....

But it is not working, the title is still there.

 

Can anybody help me with that? What did I do wrong?Screenshot (209).pngScreenshot (208).pngScreenshot (210).png