Hide the page title

Solved
Highlighted
New Member
5 0 0

Hi,

 

I am using impuls theme and I would like to hide the page title that shows up on the web page. 

support.jpg

 

 

I original page liquid is like this

s2.jpg

I tried the following codes but it did not work:

<div class="page-content">

{% include 'breadcrumbs' %}

<div class="page-width">
<header class="hidden">
<h1 class="hidden">{{ page.title }}</h1>
</header>
</div>

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

</div>

--------------------------------------

<div class="page-content">

{% include 'breadcrumbs' %}

<div class="page-width">
<header class="section-header">
{% comment %}<h1 class="section-header__title">{{ page.title }}</h1>{% endcomment %}
</header>
</div>

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

</div>

 

Would you please advise.

 

PS I need a SEO friendly solution

 

Thanks

0 Likes
Astronaut
885 106 198

As far as I know there isn't really an SEO friendly way to hide text, Google is pretty good at figuring out if you're hiding text and this can negatively impact your search results. I would ask, is there a reason you need to hide the text? Or do you just not like it?

 

Anyway, the second part you posted should work. Although it completely omits your <h1> tag because liquid comments don't render html. 

 

<div class="page-content">

{% include 'breadcrumbs' %}

<div class="page-width">
<header class="section-header">
{% comment %}<h1 class="section-header__title">{{ page.title }}</h1>{% endcomment %}
</header>
</div>

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

</div>
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 :D
0 Likes
Shopify Partner
462 80 94

@Merim2020 

 

You can hide it adding a line code css into you style files, it can theme.scss.liquid

open it, scroll at the very bottom and past the following code.

.section-header{
 display: none;
}
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
5 0 0

Dear @sarhov 

 

Thanks for your reply. This code will hide all titles from my entire website. I want to hide it only for a specific page. For example, if the page handle is "configure". How can I make it conditional?

 

0 Likes
New Member
5 0 0

Dear @Ninthony 

Thanks for reply. In fact, I do not want to hide H1. I just want to hide the page title to be displayed on a specific page. I think I should do it in CSS but I do not know how?

0 Likes

Success.

Astronaut
885 106 198

You can use sarhov's answer,  but instead of putting it in theme.scss.liquid you can put it in style tags at the top of your page.liquid. So like this:

 

<style>
{% if page.handle == "configure" %}
.section-header{
display: none;
}
{% endif %}
</style>

<div class="page-content">

{% include 'breadcrumbs' %}

<div class="page-width">
<header class="section-header">
<h1 class="section-header__title">{{ page.title }}</h1>
</header>
</div>

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

</div>
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 :D
1 Like
Shopify Partner
462 80 94

@Merim2020 

 

The you can using page handle to identify the page and hide the page your want.

in theme.liquid file find body and put {{page.handle}}  inside its class

<body class="   {{page.handle}}">

so, this will add class to the body, the class name will be the handle of the page.

For example if page handle is "contact" or "contact-us"

you can use this handle to hide the page title only on that page, the css will be like this

.contact .section-header{
 display: none;
}

/* or */

.contact-us .section-header{
 display: none;
}
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes