The methods described in this article are for removing the theme title by editing your theme's code.
If you have an Online Store 2.0 theme, you can add your quiz through the theme editor which won't show the title on the page unless manually added.
💡 What you'll learn
Editing your theme code (jump to section)
Hiding your page title on all pages (jump to section)
Hide page titles in a specific page (jump to section)
Create a new page template (jump to section)
Editing your theme code
Here's how you can edit your theme code directly:
in Shopify, go to Sales Channels → Online Store.
Click on the ... button.
Click Edit code.
Each Shopify theme is different, so the exact layout of your theme code might differ once you enter the code edit interface. Before making any changes, making a backup of your theme is highly recommended.
💡 Backing up your theme
in Shopify, go to Sales Channels → Online Store.
Click on the ... button.
Click 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.
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.
Hide page titles in 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.
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.
📕 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.