Debut Theme - Remove Header

Highlighted
Tourist
5 0 2

I want to remove the whole header or the Search, Login, Cart icons and leave just the logo as home button...

Can someone please help me?

 

0 Likes
Highlighted
Community Manager
Community Manager
2667 190 422

Hi Gui, 

Nick here from Shopify. 

Really good question. This is something I would need to confirm with our theme support team for you. Would you be able to share a link for your store if it has gone live and I can investigate this further? If you have not launched or are not live yet, not to worry, I can send you a direct email about it and we can take it from there. Because Debut is a Shopify developed theme, our themes support team can definitely take a closer look at this for you. 

Let me know and looking forward to hearing from you. ?

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
26 0 7

Go to Edit Code and put this at the end of theme.scss.liquid (in Assets)

 

.search-header__submit, .search-header__input {
    display: none;
}

a.site-header__icon.site-header__cart {
    display: none;
}

Let us know if it works for you. I can't imagine why you would want to do this but I guess you have your reasons.

Al

NewMediaEcom.com

1 Like
Highlighted
Community Manager
Community Manager
2667 190 422

Hi Gui, 

Just to follow up from my previous message. I confirmed with our theme support team and AI has the code correct for you to do this and that should work. The code they provided me with was slightly different, but both should work. You would need to add this to the bottom of the theme.scss.liquid file. 

.site-header {
  display: none;
}

And 

.site-header__icons-wrapper {
  display: none;
}

Also, agree with their question of not quite sure why you would want to do it. It is something our theme support team would strongly recommend not doing as it will have unforeseen effects in the future when doing thing such as installing apps and could even remove the navigation. 

Don't hesitate should you have any other questions about anything else.  

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
26 0 7

Instead of putting the CSS at the end of theme.scss.liquid (in Assets) you might want to see this on how to make an update-safe CSS file

https://ecommerce.shopify.com/c/ecommerce-design/t/here-is-how-to-create-a-custom-css-file-542574

Al
NewMedia Ecom
https://NewMediaEcom.com
Fair Oaks, CA
 
 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
548 28 81

Hi, guys!

My name is Ava, I’m one of Shopify’s Gurus :)

I just wanted to mention, when making any CSS changes, it's better to add those changes to the bottom of the theme.scss.liquid rather than adding in a custom CSS file. This is because if you make any edits to your theme (including adding a new css file) you won't receive mass upgrade to the code.

Therefore it makes sense to keep it all in one file, as it is less server requests and contributes to faster loading.

Also, by creating a CSS file, you are limited to CSS, whereas in the theme.scss.liquid you can use SASS and also Liquid in your CSS logic.

Thanks so much, everyone!

Ava

Social Care Guru | support@shopify.com

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
26 0 7

Ava, are you a software engineer? I am, for 25+ years.

I have to respectfully disagree with you. 

Your engineers did not create a change-safe platform. I understand that files that have been modified (i.e. have a blue dot next to them) won't get auto-updated.

But you know and I know that some hapless user WILL do the update and WIPE wipe out all the custom CSS in theme.scss.css as well as any other liquid code in the other sections.

It is a major flaw in your system; obviously no one on the Shopify engineering understands that one of the first (ten) rules of system development is to create a methodology for update-safe code. BigCommerce has it. CoreCommerce has it, WIX and SquareSpace have it. WordPress has it (via child themes.) Shopify does not.

Your methodology is "If we don't have a code-safe environment, let's just try to prevent updates as best we can." So basically, you prevent users who have some custom CSS from getting a new (and probably more secure) theme.

That is why experienced software developers working in your platform will create a separate file for all CSS that gets 'sucked' in by the main (calling) theme...it's just one line of code. 

Of course if you folks delete ALL files when you make an upgrade even that methodology would not work. But TTBOMK you only replace your own files (at least you should!)

Unfortunately, any liquid or HTML code put in other files will be overlaid and I've not figured out a way to mitigate that so we try very, very hard not to add more code than we have to and then we document it well so if we have to go and re-enter it we know where to put it.

At least all the CSS should be intact. 

All you folks have to do is put in one line of code in the main theme file. After this line:

 {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
 put in this line:
 
   {{ 'theme-custom.css' | asset_url | stylesheet_tag }}
   
and have a blank file in Assets with the name of theme-custom.css. 

As for loading, both your css file and the custom file will be cached by the browser so there is no issue with speed or server requests.

Like I say, Ava, I've been writing software for almost 30 years. I know a thing or two because I've seen a thing or two... perhaps one of the advantages for clients is having some 'old guys' like me  who have written mission-critical platforms.

Al
NewMediaCreate.com


 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
548 28 81

Hi, Al.

Apologies if my last post was in any way upsetting! That was genuinely not my intent, we always aim to give the best advice for the community at large here.

The way our systems work, our core software is constantly updated but our themes are not.

From my understanding, it seems like you may be working on the assumption that if all custom changes are in the core files, then when we perform a theme upgrade they will be overwritten. This is currently not how we operate. If anything is modified in the theme, then no upgrade is performed to the theme at all and no files are updated. This is to make sure that there’s no chance of custom CSS being overwritten. We operate this way as a safety feature to be sure that an upgrade does not conflict with any custom changes a merchant has made, in the case it could possibly take down their store.

Thanks so much!

Ava

Social Care Guru | support@shopify.com

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
26 0 7

I'm confused. 

So if just one file has been updated, say with one line of liquid code or  one line of CSS and it gets the 'bluer dot' then the entire theme will never be auto-updated. 

But it can be manually updated... and those files (indeed all the files) will be replaced with new files.

Is this how it works?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
548 28 81

Thanks for your reply, Al!

That first part you mentioned is correct, if just one file has been updated then the entire theme will never be auto-updated. However, you would not be able to manually override a theme, as in manually updating the theme and replacing it with newer files. You can only add themes to the store, you can’t replace one with a newer version. So there’s no way for all files to be overwritten.

I hope I've helped a little with explaining how our themes work! We have some great support docs here if you wanted to take a look, you can see how to edit your theme, build a theme or take a look at our liquid reference. There is some really helpful info included!

Thanks again, Al!

Ava

Social Care Guru | support@shopify.com

 

Ava | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes