change mobile cart count color

Store Design

Topic summary

A user is experiencing a mobile cart count display issue where a white background covers the cart icon, making it look cluttered. They want the count badge to appear cleaner and more compact, similar to a reference image they provided.

Proposed Solution:

  • Another user suggested adding custom CSS to remove the white background, make the badge circular, and adjust padding/styling
  • The CSS targets .cart-count class with properties like background-color: transparent and border-radius: 50%
  • Alternative suggestion to check theme settings under Cart customization options

Current Status:

  • The CSS solution did not resolve the issue
  • The problem remains unresolved and may require further troubleshooting or different CSS selectors

The website in question is www.audette.store. Images were shared showing both the current problematic display and the desired appearance.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

withaudette_0-1743326015395.png
withaudette_0-1743326015395.png732×116 4.88 KB

As you can see on mobile the cart count color is in white background, which covers the whole icon symbol at the back.

Is there a way to make the cart count like this exact so it looks neater:

withaudette_2-1743326113251.png
withaudette_2-1743326113251.png341×180 1.95 KB

My website is www.audette.store

2

Hi @withaudette
It looks like the cart count has a background that’s covering the cart icon. You can adjust this by modifying the CSS. Try adding the following CSS to your theme:

.cart-count {
    background-color: transparent !important; /* Removes the white background */
    color: #000 !important; /* Change this to your preferred text color */
    border-radius: 50%; /* Makes it circular */
    padding: 2px 6px; /* Adjusts the size */
    font-weight: bold; /* Ensures visibility */
}

If you’re using a Shopify theme with built-in settings, check Theme Settings > Cart to see if there’s an option to customize the cart count style.

3

Hi it still doesn’t work