Cart Icon - How to move the green circle to the right so it's not overlapping on the text

Store Design
,

Topic summary

A Shopify store owner encountered a design issue where the cart notification badge (green circle showing item count) overlaps with the “Cart” text in the header.

Solutions Provided:

Two community members offered CSS-based fixes:

  • Option 1: Add CSS code to the theme’s stylesheet (base.css/style.css) targeting desktop screens (min-width: 749px) to adjust the badge position using bottom and left properties

  • Option 2: Use the Theme Customizer’s Custom CSS section with code that repositions the badge using right: 0 and transform: translateX(50%) to move it away from the text

Both solutions include step-by-step instructions for accessing the appropriate files in Shopify Admin and screenshots showing the corrected layout.

Resolution: The original poster confirmed the issue was resolved, thanking the contributors.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi, i tried testing adding something on my cart however the text of “Cart” is overlapping on the green circle whenever something is added to my cart. Please help me move the green circle a bit to the right so it’s not clashing with the text.

Shop url - https://greenpaxusa.myshopify.com/

Screenshot_15.png
Screenshot_15.png1887×162 22.6 KB

1 Like
2

Hi @GreenPax

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 749px){
.header__icons .cart-count-bubble {
    bottom: 1.5rem;
    left: 2.5rem;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @GreenPax

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.cart-count-bubble {
    left: unset !important;
    right: 0 !important;
    transform: translateX(50%);
}

Here is the result:

image_480.png
image_480.png480×279 13.5 KB

I hope this helps

Best,

Daisy

4

Hi @GreenPax

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.cart-count-bubble {
    left: unset !important;
    right: 0 !important;
    transform: translateX(50%);
}

Here is the result:

image_480.png
image_480.png480×279 13.5 KB

I hope this helps

Best,

Daisy

1 Like
5

thank you so much!