A low level of Liquid knowledge is required for this tutorial.
There are many reasons why you might want to stop your customers from seeing a specific page’s title in Shopify – maybe it clashes with your design, or maybe it’s just not necessary. Luckily, hiding a specific page title in Shopify is easy.
There are lots of different ways to do it, including CSS solutions like display:none;, but the easiest is to use Liquid conditional tags to prevent the template from calling the title in the first place.
To do this, go into your theme files, go to Templates > page.liquid. In the page.liquid file, you need to find this:
{{ page.title }}
Use CTRL + F or CMD + F to locate it on PCs and Macs respectively.
It should be encased in some HTML, like this:
<h1 class="section-header--title">{{ page.title }}</h1>
Encase it between two conditional tags (the unless tag is the most elegant solution).
{% unless page.handle == "contact" %}
<h1 class="section-header--title">{{ page.title }}</h1>
{% endunless %}
Page handles are, by default, the page’s title in lowercase, with words separated by hyphens. For example, ‘My Products’ would have a handle of ‘my-products’. You can also use other page attributes, like:
- Author
- Content
- ID
- Date of publication
- Template suffix
- Title
- URL
Similarly, you can also use other Liquid operators to accomplish a similar effect. For example, if you only wanted the Contact and Home pages to show their titles, you could use code like this:
{% if page.handle == "contact" or "home" %}
<h1 class="section-header--title">{{ page.title }}</h1>
{% endif %}
It’s also important to note that most themes have more than one page template. For example, the Minimal 2020 theme has the following:
- no-heading.liquid
- liquid
- full-width.liquid
- full-width.liquid
- contact.liquid
Applying the above tutorial to the page.liquid template will only affect pages that use that exact template, which means you’ll need to reapply it to different templates. For example, if you wanted your Contact page to have no heading and it used the page.contact.liquid page, you’d need to apply this tutorial to that template.
Have a question? Email me at service@chevronediting.com.au.
