How can I conceal a page title on the Debut theme?

Store Design
1

Hello,

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

Thanks

2

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

3

https://odiele.myshopify.com/

4

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>
9 Likes
5

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

5 Likes
6

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

Probleme titre produits.JPG
Probleme titre produits.JPG1397Ɨ741 51.2 KB

2 Likes
7

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??

1 Like
8

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.

9

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:

10

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?

11

Yes, that is the best email.

12

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:

{% section ā€˜page-imagesā€™ %}

{{% unless page.handle == "super-secret-title" %}}

{{ page.title }}

{{ page.content }}

Any advise would be greatly appreciated.

Kind Regards,

Greg

13

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 %}
14

Thanks for this! :slight_smile:

15

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!

{{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} ā€“ {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} ā€“ {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} ā€“ {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

16

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!

17

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.

18

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.

19

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.

20

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