Remove or hide cart icon on new horizon theme

Store Design
, ,
1

Struggling to work out how to hide the cart icon from header on new horizon theme. Have tried all the usual suspects:

#cart-icon-bubble { display: none; }
or

.header .header__icons .header__icon–account, .header .header__icons .header__icon–cart{ display: none; }

but no luck. Anyone have any thoughts?

2

so inside your base.css file at the very bottom add this

cart-icon{
display: none;
}

3

hey @hannaheire share the URLs of your website plz

4

I get your frustration! Sometimes themes like New Horizon have specific classes or IDs that differ slightly from the usual, and the cart icon might be controlled by JavaScript or an additional class that overrides standard CSS.

Here are a few things you can try:

1. Inspect and Find the Correct Selector:

First, right-click on the cart icon in the browser, and click Inspect (or press Ctrl + Shift + I on Windows, Cmd + Option + I on Mac). This opens the developer tools where you can inspect the HTML and see the classes/IDs associated with the cart icon.

Look for something like this:

2. Target Specific Classes:

If you’ve found the cart icon’s class, use that exact class to hide it. For example, try this:

/* Hide cart icon specifically */
.header__icon--cart {
  display: none !important;
}

Adding !important ensures that no other conflicting styles override your changes.

3. Target via JavaScript:

Sometimes themes use JavaScript to dynamically display elements, so you might need to hide the cart icon through JS. Here’s a small snippet to add in your theme’s custom JavaScript section or theme.js file:

document.addEventListener('DOMContentLoaded', function() {
  var cartIcon = document.querySelector('.header__icon--cart');
  if (cartIcon) {
    cartIcon.style.display = 'none';
  }
});

This script waits for the page to load, then hides the cart icon by targeting the class.

4. Check for Conditional Rendering:

The cart icon might be conditionally rendered based on whether there are items in the cart. In that case, look for conditional Liquid code in the theme’s header file (header.liquid) like:

{% if cart.item_count > 0 %}
   
{% else %}
   
{% endif %}

If that’s the case, you may need to adjust the condition or simply remove the entire section from the header.

5. Customizing in Theme Editor:

Finally, some Shopify themes, like New Horizon, let you toggle cart visibility directly through the Theme Editor:

  1. Go to Online Store > Themes > Customize.

  2. Open the Header section.

  3. Check if there’s an option to disable the cart icon. Some themes have settings that control this directly.

Try these steps and let me know if any of them work! If not, share what you find in the Inspect tool, and we can dive deeper into it.

5

Thanks so much for the reply @Shadab_dev - it doesn’t look to be working with this added code.
Any other thoughts?

Screenshot 2025-06-21 at 14.04.10.png
Screenshot 2025-06-21 at 14.04.10.png2508×382 33 KB

6

Try this code in Theme Settings=> Custom CSS:

cart-drawer-component.cart-drawer {
  display: none;
}
7

Strange, it worked on my development store for horizon.

Please share your store url.

8

Thanks a million, Tim. Worked a treat.