How can I remove all icons from my Debut Theme header?

Store Design

AI-generated summary

Goal: Remove search, account, and cart icons from the Debut theme header.

Key guidance: A Shopify staff member confirmed this can’t be toggled off in Theme Editor; it requires code changes. Shopify offers free theme design time to implement this after owner verification (screenshot shared; not essential to the fix).

Suggested fixes (CSS added at the end of assets/theme.scss.liquid or theme.scss.css):

  • Preferred: Hide .site-header__icon and keep the mobile menu toggle visible on screens under 749px to preserve mobile navigation.
  • Alternatives: Hide .site-header__icons or .site-header__icons-wrapper with display: none (!important) to remove the icons. One reply used a variant selector that may be a typo.

Outcome: The OP confirmed the first CSS solution worked and thanked the contributor. No further issues reported.

Status: Resolved; apply the provided CSS or request Shopify’s design time for an official change.

1

Hi, I have read several posts on removing one or two icons, but there are three in my header: the search, the account, and the cart icon. Can someone please help me remove all of them?

Thank you,

T

2

@Original_Z - please share your website link, this will need CSS

3

Hi, @suyash1 , thank you

4

Hey @Original_Z .

Thanks for reaching out.

I appreciate that you have let us know which theme you are using as that is very helpful! Looking into the Debut theme, I noticed that we cannot remove the search, account and cart icons using the Theme Editor. However, you could change to the theme’s coding to have the icons hidden or removed from the header section of your online store. Since the Debut theme is designed and supported by Shopify, we can use free design time for Shopify themes to have our internal team make the changes on your behalf.

08-41-91046-93484
08-41-91046-934841920×920 170 KB

If you are interested in using the design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to see.

Let me know if you have any questions.

5

@Original_Z

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-header__icon {
    display: none;
}
@media only screen and (max-width: 749px) {
button.btn--link.site-header__icon.site-header__menu.js-mobile-nav-toggle.mobile-nav--open {
    display: inline-block;
}
}
6

Please add below css in bottom of assets/theme.scss.css file

.site-header__icons {
display: none !important;

}
Thank you.

7

@Original_Z - please add this css to the end of your theme.scss file and check, should look like screenshot below

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

suyash1_0-1654755460908.png
suyash1_0-1654755460908.png1366×768 186 KB

8

Hello T!

Hope you are doing well.

Please add the below CSS in the theme.scss.css file at the bottom to remove the icons from the header:

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

Hope this helps.

9

@KetanKumar , you are my hero, thank you so much!