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;
}
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?
I had the same issue, see below a post that I followed that actually works:
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,
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.
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
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?
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.
For those (like me) who couldn't find the theme.scss.liquid asset, I followed this other post and it worked for me:
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024