Some Shopify stores will automatically add the page title to the page itself. You can remove this by editing your theme code.

For instructions on how to embed your quiz into a Shopify page, check out this guide.

In this article, we'll show you how to edit your theme code, create a backup (very important) and three different methods you can use to remove page titles. Shopify themes can differ quite a bit, especially custom ones, so these instructions may not apply to all Shopify themes.

Table of Contents

1. Editing your theme code

1.1. Backing up your theme

2. Hiding your page title on all pages

3. Hide page titles from a specific page

4. Create a new page template

4.1. Make a page with your new template


1. Editing your theme code

To start editing your theme code, navigate to Online Store Themes. Then, use the Actions drop-down menu and select "Edit code".

Each Shopify theme is different, so the exact layout of your theme code might differ once you enter the code edit interface.

If you're using a custom Shopify theme, we recommend contacting the creators of the Shopify theme for support prior to editing the code.

We also highly recommend making a backup of your theme files prior to making any changes, which only takes a couple of quick steps!

1.1. Backing up your theme

To back up your theme files, navigate to Online Store Themes. Then, use the Actions drop-down menu and select "Duplicate".

This adds a copy of your theme at the time of duplicating it in your theme library, making it super easy to restore a previous version of your theme.

Back to top.


2. Hiding your page title on all pages

You can hide your page title across all your theme's pages by adding a simple block of code in just one of your theme files.

Once you've opened the code edit interface, locate your theme.scss.liquid file under the Assets tab.

At the very bottom of the page of code for this file, add this code:

.template-page h1 {
display: none;
}

Here's a quick example of what your code might look like after adding this block:

This will hide your page title from all of your pages! To restore page titles, all you'll have to do is delete this code or restore a previous version of your theme.

Back to top.


3. Hide page titles from a specific page

Instead of hiding your title on all pages, you can also hide your title on a specific page only.

Follow the same steps as above to get to your code edit screen. However, instead of accessing the theme.scss.liquid file, you'll want to access the page.liquid file instead under the Templates tab.

Inside of your page.liquid code, look for this short line of code:

{{ page.title }}

Each theme can have different page.liquid templates, but here's an example of what it could look like:

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

This template has the page title coded in the <h1>{{ page.title }}</h1> line.

You'll want to add code around this line to define an exception to the page title rule like this:

{% unless page.handle == "your-page-title" %} 
<h1>{{ page.title }}</h1>
{% endunless %}

Just replace "your-page-title" with the title of your actual page in all lowercase and with the quotation marks included.

So if your page title was Skincare Quiz, then in the code it would look like the example below:

{% unless page.handle == "skincare-quiz" %} 

This method keeps page titles across your website and adds an exception for one page only.

Back to top.


4. Create a new page template

If you'd like to avoid making changes to your default page template, you can also create a new one and use a custom template with your page.

Repeat the steps to get to the code edit interface.

However, instead of selecting the page.liquid template, we'll add a new template instead.

This will bring up a menu for you to name your template. Select the "page" option and enter the name the theme file will have.

For this example, we'll use "no_title" so that it's clear what this template is for when we make our Shopify page.

This will create a new page template (titled "page.no_title.liquid" in this case) that automatically copies the code in your page.liquid template.

You can either delete the <h1>{{ page.title }}</h1> or add the exception code from the method above to your new page template.

Once you've made your changes, save your new template.

4.1. Make a page with your new template

After you save your new template, all you have to do is select that template when creating or editing a Shopify page.

In the Online Store section of your page screen, use the drop-down menu to select your new template.

This keeps your default template settings while letting you selectively apply a no-title page to your website.

Back to top.


Have any questions? Send an email to [email protected] or chat with our team using the support icon on the bottom right of the screen.

Did this answer your question?