How to Remove Checkout Bag in Shopify (Step-by-Step Guide)
By default, Shopify adds a cart or checkout bag icon in the header, allowing shoppers to view items and proceed to checkout. While this is useful for most stores, some merchants prefer to remove it. For example, if you’re running a catalog-only store, want customers to go directly to checkout, or simply prefer a minimal and distraction-free design, hiding the cart icon can make sense.
In this step-by-step guide, we’ll show you three easy methods to remove the checkout bag/cart icon in Shopify through the Theme Editor, Liquid code, or CSS.
Methods for Removing Checkout Bags in Shopify
There are different methods for removing a Checkout bag/cart in Shopify. Some of these are given below.
- Remove Checkout Bag from Theme Editor
- Remove Checkout Bag Using Code
- Hide Checkout Bag with CSS
Method 1: Remove the Checkout Bag from the Theme Editor
You can hide the checkout bag icon directly through the Shopify Theme Editor without touching any code. Open your theme in the Customize section, go to the Header settings, and look for the option to disable or hide the cart/checkout icon.
If your theme supports this feature, simply toggle it off and save the changes; the icon will no longer appear on your store’s header. Follow these steps to remove the Checkout Bag from Shopify using the Theme Editor.
Step 1: Navigate to Online Store > Themes > Customize.
Step 2: Navigate to the Header Section and open settings.
Step 3: Look for the Enable cart icon option. Enable or disable this option to hide or show the checkout bag.
Step 4: Save the changes.
If your goal is a cleaner layout, you may also want to learn How to change View Cart Color in Shopify. This gives you more control over the look of your header and navigation.
Method 2: Remove the Checkout Bag Using Code
If your theme doesn’t have a setting to hide the cart icon, open the header.liquid, find the cart link code, and delete or comment it out. Always duplicate your theme first as a backup. Follow these steps to remove the checkout bag using liquid code.
Step 1: Navigate to Online Store > Themes > Edit code.
Step 2: Navigate to the header.liquid file.
Step 3: Search for the cart icon code using CTRL + F.
Step 4: Comment or delete the code, which usually looks like this.
<a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link focus-inset" id="cart-icon-bubble">
{% if cart == empty %}
<svg
class="icon icon-cart-empty"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
fill="none"
>
<path d="m15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.78-11.61zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1 -9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z" fill="currentColor" fill-rule="evenodd"/>
</svg>
{% else %}
<svg
class="icon icon-cart"
aria-hidden="true"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 40 40"
fill="none"
>
<path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 00-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 004.99 5.34h7.38a5 5 0 004.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0020.5 6.5zm3.75 5.31v-.56a3.75 3.75 0 10-7.5 0v.56h7.5zm-7.5 1h7.5v.56a3.75 3.75 0 11-7.5 0v-.56zm-1 0v.56a4.75 4.75 0 109.5 0v-.56h2.22l.71 10.67a4 4 0 01-3.99 4.27h-7.38a4 4 0 01-4-4.27l.72-10.67h2.22z"/>
</svg>
{% endif %}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
<div class="cart-count-bubble">
{%- if cart.item_count < 100 -%}
<span aria-hidden="true">{{ cart.item_count }}</span>
{%- endif -%}
<span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>
{%- endif -%}
</a>
Step 5: Save the changes.
Method 3: Hide Checkout Bag with CSS
If your theme doesn’t have a built-in option to hide the cart icon, you can remove it by editing the theme’s code. Just open the header.liquid file, find the cart icon link, and delete or comment it out. Always back up your theme before making changes. Follow these steps to remove the Checkout bag using CSS.
Step 1: Navigate to Online Store > Themes > Edit code.
Step 2: Navigate to the base.css or theme.css file, depending on the theme.
Step 3: Look for the checkout bag class or ID for the target using CSS.
Step 4: Scroll down to the bottom of the file and paste this code.
#cart-icon-bubble {
display: none !important;
}
If you’re editing theme code, check out our tutorials:
But if you are not comfortable editing code yourself? Our Shopify Website Maintenance & Support Services can implement changes safely.Conclusion
Removing the checkout bag in Shopify is straightforward and can be done in multiple ways, depending on your theme and customization needs. If your theme supports it, the quickest option is to disable it through the Theme Editor. For more control, you can edit the header.liquid file or apply custom CSS to hide the icon.
No matter which method you choose, always back up your theme before editing code to avoid unexpected errors. Once removed, your store design will look cleaner and better aligned with your goals.
Need expert help tailoring your store’s design and functionality? Our Shopify Custom Theme Development Services ensure your store looks professional, user-friendly, and fully aligned with your brand.
Frequently Asked Questions
Live Chat