Remove cart icon from header

[Murdon]

Hi,

I am trying to remove the cart icon from the top right of the header on the Warehouse theme. I have gone through the settings and removed all of the ‘add to cart’ and ‘buy’ buttons as we won’t be selling directly from the website, but there seems to be no option in the theme that allows you to remove the cart button itself. I have tried following the instructions in this article: The Ultimate Guide: How to Remove Cart Icon Shopify, however I am not familiar with code and despite doing my best to follow the instructions correctly they do not make any changes in the preview. I have also tried to match the icon colour to the background so that it becomes invisible, but I am unable to do that for just the cart icon without also impacting other parts of the header. Is there any way to remove the icon? Townsville Steel & Wire is the website; any advice would be appreciated.

[devcoders]

Hi @Murdon

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[devcoders]

Hi @Murdon

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottow of the file:

.header__cart-icon.icon-state {
    display: none;
}

If my assistance was helpful to you, please like and accept all my solutions.
Best regards,
Devcoder

[Maximus3]

Right-click on webpage and click “inspect”, find the selector, copy the selector, paste selector into custom css in theme editor, and add whatever command you need:

you can verify like so:

[namicadev]

hi you can change at base.css

.icon-state .icon-state__primary, .icon-state .icon-state__secondary {
transition: opacity .35s
ease-in-out, transform .35s
ease-in-out;
display: none;
}

[Dan-From-Ryviu]

You can remove it by adding this code to Custom CSS in theme settings.

.header__action-item--cart { display: none !important; }

[tim_1]

Mate, go to “Customize”, select “Header” section and look for “Custom CSS” setting there. Paste this code:

.header__action-item--cart {
  display: none;
}
.header__action-item--account {
  --header-border-color: none;
}

First rule will hide entire cart link/button,
Second should hide the vertical separator line.