Declutter Your Shopify Cart: How to Hide Chat & Trust Badges for a Smoother Checkout

Hey everyone! As a Shopify expert, I spend a lot of time digging through the community forums, and I constantly see merchants asking for help with common site issues. One topic that recently caught my eye, and really resonated with me, was about decluttering the cart page. Specifically, our friend yonicque from the community was struggling with their Shopify chat button and a trust badge obstructing crucial parts of their cart page, especially on mobile. They were using the Avante theme and found these elements were getting in the way of the checkout process. It's a super common problem, and honestly, a small detail that can make a huge difference to your conversions!

Why a Clutter-Free Cart Page Matters

Think about it: your cart page is one of the most critical steps in the customer journey. It's where your customer makes that final decision to purchase. Any friction, any distraction, any element that covers the "Checkout" button or the order totals, can lead to abandoned carts. You’ve worked hard to get them this far, so you don't want anything getting in the way of that final click. Yonicque's issue perfectly illustrates this. They had a chat button and a trust badge, both valuable in their own right, but placed in a way that became a hindrance on the cart page.

Here’s what yonicque was seeing, with the chat button potentially covering important elements:

While chat support is fantastic for pre-purchase questions and trust badges build confidence, the cart page is often too late for the former and sometimes too cluttered for the latter. It's all about context!

The Community-Powered Solution: Custom CSS

Thankfully, the Shopify community is full of brilliant folks, and a user named Ploqo swooped in with an elegant CSS solution that perfectly addressed yonicque's problem. This is a classic example of how a few lines of code can significantly improve your store's user experience without needing complex apps.

Ploqo's solution focuses on using custom CSS to selectively hide these elements *only* on the cart page, leaving them visible everywhere else. This is key! You don't want to lose the benefits of chat or trust badges on your product pages or homepage, just clear the path to purchase when it matters most.

Here’s a visual of the "Before" and "After" on the cart page:

Before: Chat and Badge on the Cart

After: Both Hidden

Step-by-Step: Hiding Elements with Custom CSS

Here’s how you can implement this fix for your Avante theme. Remember, before making any code changes, it's always a good idea to duplicate your theme first. That way, you have a safe backup if anything goes awry!

1. In your Shopify admin, navigate to Online Store > Themes.
2. Next to your live Avante theme, press the Edit theme button.



3. Click the gear icon (Theme settings) on the left side of the editor.



4. Scroll down to Custom CSS and open it.
5. If you already have some code in there, click after the last line, press Enter, and then paste this code underneath it:

body:has(#main-cart) inbox-online-store-chat#ShopifyChat,
body:has(#main-cart) #trustedsite-tm-image {
  display: none !important;
}



6. Click Save in the top right corner.

After saving, clear your browser cache and then load your cart page, especially on a mobile device. You should see those elements disappear, leaving a clean, unobstructed path to checkout!

Breaking Down the CSS

Let's quickly look at what that code does, because understanding it can help you apply similar logic elsewhere:

• body:has(#main-cart): This is a modern CSS selector that checks if the element *contains* an element with the ID #main-cart. On most Shopify themes, the cart page will have a container with an ID like main-cart, making this a reliable way to target only the cart page.
• inbox-online-store-chat#ShopifyChat: This targets the specific HTML element for the Shopify chat widget. Yonicque initially thought it might be #shopifychat, but Ploqo correctly identified the full selector for the Avante theme.
• #trustedsite-tm-image: This is the ID for the TrustedSite trust badge.
• display: none !important;: This is the magic that hides the elements. display: none removes the element entirely from the layout, and !important ensures that this rule overrides any other conflicting styles.

While this particular code is tailored for the Avante theme and the specific IDs used by Shopify Chat and TrustedSite, the principle is universal. If you're using a different theme or different apps, you might need to inspect your page to find the correct CSS selectors for your chat widget or trust badge. Tools like your browser's developer console (right-click > Inspect) are invaluable for this!

It's these little tweaks that truly polish your store and improve the shopping experience for your customers. A smooth, clear journey from product to checkout can significantly impact your conversion rates. So take a moment, give your cart page a quick review, and see if there are any distractions you can politely move out of the way. Happy selling!