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:
<div class="header__icons">
<div class="header__icon header__icon--cart">
<!-- Cart icon here -->
</div>
</div>
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 %}
<!-- Show cart icon -->
{% else %}
<!-- Hide cart icon -->
{% 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:
Go to Online Store > Themes > Customize.
Open the Header section.
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.
Embed 800+ widgets on Shopify with just a link.
EmbedAny on App Store.
