Shopify themes, liquid, logos, and UX
I am trying to figure out in the new Dawn theme how to hide a title on an individual page template.
I want to hide the title "HDL Star Rewards" from this page: https://www.hopedesignltd.com/pages/hdl-star-rewards-1
Thanks for the help.
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
section#shopify-section-template--14168045518950__main {
display: none!important;
}
.spaced-section {
margin-top: 0!important;
}
This is an accepted solution.
Alternatively you could go into main-page.liquid in your sections folder and make a case statement with your page handle and assign a variable to be true if you want to hide the page, then use an unless statement around the title:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
{% assign hide_page = false %}
{% case page.handle %}
{% when 'hdl-star-rewards-1' %}
{% assign hide_page = true %}
{% endcase %}
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{% unless hide_page %}{{ page.title | escape }}{% endunless %}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-page.name",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}
Then if you should need to hide it on any other pages in the future you can add to the case statement. Say you wanted to hide the title on your about-us page:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
{% assign hide_page = false %}
{% case page.handle %}
{% when 'hdl-star-rewards-1' %}
{% assign hide_page = true %}
{% when 'about-us' %}
{% assign hide_page = true %}
{% endcase %}
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{% unless hide_page %}{{ page.title | escape }}{% endunless %}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-page.name",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
section#shopify-section-template--14168045518950__main {
display: none!important;
}
.spaced-section {
margin-top: 0!important;
}
This is an accepted solution.
Alternatively you could go into main-page.liquid in your sections folder and make a case statement with your page handle and assign a variable to be true if you want to hide the page, then use an unless statement around the title:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
{% assign hide_page = false %}
{% case page.handle %}
{% when 'hdl-star-rewards-1' %}
{% assign hide_page = true %}
{% endcase %}
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{% unless hide_page %}{{ page.title | escape }}{% endunless %}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-page.name",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}
Then if you should need to hide it on any other pages in the future you can add to the case statement. Say you wanted to hide the title on your about-us page:
<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
{% assign hide_page = false %}
{% case page.handle %}
{% when 'hdl-star-rewards-1' %}
{% assign hide_page = true %}
{% when 'about-us' %}
{% assign hide_page = true %}
{% endcase %}
<div class="page-width page-width--narrow">
<h1 class="main-page-title page-title h0">
{% unless hide_page %}{{ page.title | escape }}{% endunless %}
</h1>
<div class="rte">
{{ page.content }}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-page.name",
"tag": "section",
"class": "spaced-section"
}
{% endschema %}
Thanks! Both solutions work, but I ended up going with the second.
i cant find:
Asset > theme.scss.liquid
Can someone help please?
Asset > theme.scss.liquid does not exist in the Dawn theme. What would it be for this theme, specifically?
Hi @ZestardTech
I could not find (Asset > theme.scss.liquid) where to paste your suggested code to hide the default page title. I have a Theme.liquid file but it did not work out
Here is my website: https://consulting-for-good.myshopify.com/
I would really appreciate your help.
KR,
Hi,
I am not able to find
Find Asset > theme.scss.liquid and paste this at the bottom of the file.
I searched for it in the Code and Assets and could find it.
I would like to remove all page titles from the pages.
Not sure why they are even there?
Thanks for your help.
Charan
HI,
Looks like you did figure out how to remove the page titles. May ask how you did it?
Like you, I am unable to find the theme.scss that he refers to.
Thanks,
Best.
Charan L.
I'm currently using the dawn theme and i pasted the code at the bottom of the base.css file and it is still showing the page title. Any tips?
For those (like me) who couldn't find the theme.scss.liquid asset, I followed this other post and it worked for me:
I had the same issue, see below a post that I followed that actually works:
User | RANK |
---|---|
227 | |
158 | |
61 | |
55 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023