Hide the cart icon in the header using CSS

When setting up your store, you might have to need to hide your cart icon that's displayed in the header:

You can hide the icon using a snippet of CSS code. 

Here's the code snippet you can use:

/* -- Start Broadcast override code hide cart -- */
a.header__cart__wrapper,
.product__add__success__content.form-success {
  display:none;
}
/* - end - */

The code snippet will also hide the message box that appears after adding an item to the cart which includes a link the cart page. 

Instructions on how to add the code snippet:

Adding custom CSS code to Broadcast

Remember to remove that code snippet once you start selling products. Also, always make a duplicate/backup of your theme before making any code modifications. We are not able to fix any code changes you make. 

Example of code snippet after adding correctly to the bottom of theme.scss.liquid:


Turn off Quick View

You may want to turn off Quick View as well - The add to cart button in Quick View will take the customer to the cart page. Quick View settings are found under Product grid in your Theme settings:

The toggle is located here: 

Save the file:


Turn off Smart Checkout button

Another setting you may want to turn off is the Smart Checkout button which would allow the customer to to directly to checkout with the current product. 

From the top drop-down menu in your Theme Editor:

Choose Product pages:

In the Sections tab on the left, choose Product pages:

In your Product pages settings, you'll find the option to toggle the Smart Checkout button:

Save the file:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.