Solved: Hide the page title

Merim2020 · ‎07-02-2019

Hi,

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

I original page liquid is like this

I tried the following codes but it did not work:

{% 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>

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

{% 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

Ninthony · ‎07-02-2019

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 my solution helped you, please like and accept as 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 :D

sarhov · ‎07-02-2019

@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
Telegram: @sarhov

Try Shopify free for 14 days,

Merim2020 · ‎07-03-2019

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?

Merim2020 · ‎07-03-2019

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?

Ninthony · ‎07-03-2019

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 my solution helped you, please like and accept as 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 :D

sarhov · ‎07-03-2019

@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
Telegram: @sarhov

Try Shopify free for 14 days,

Hide the page title

HELP! Instagram link not showing in Venture theme

How do I force Customers to sign agreements? (if checking-out with certain products in the...

Need Help!

center image

Debut Theme Extra Scroll bar on collection pages

HELP! Instagram link not showing in Venture theme

Re: How to hide price, add to cart, buy buttons in one collection?

Hello, So I moved the button further up. It says shop co...

Www.coffeenkitchenhq Sent from Xfinity Connect Application

How do I force Customers to sign agreements? (if checking-out with certain products in the...