Adjusting the cart "bubble" position and color (Dawn Theme)

[bellevo]

Hey, I have managed to change the cart icon for both desktop and mobile versions and I would like to know if there is a way to adjust the position and color of the cart icon bubble for both desktop and mobile versions. I will add a picture of the issue and outcome below. I would appreciate any help with this issue, thank you in advance!

My store: https://bellevodesign.com/

Picture of the issue: 

Desired outcome: 

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, Pls insert this code to your file css: 

.cart-count-bubble {
  left: 1.6rem !important;
  top: 4px !important;
  background-color: #b98980 !important;
}

Here is result: 

Hope this can help you 😍

[nvchien · Accepted solution]

Hi @bellevo,

You can go to Online store -> Themes -> Edit code, find "base.css" file and add this code to bottom:

.header .cart-count-bubble {
    top: 5px;
    right: 12px;
    left: auto;
    bottom: auto;
    background: #ba8980; /* Replace by your background colour */
    color: black; /* Replace by your text colour */
    line-height: 1.7rem;
}

Hope this helps.

[suyash1]

@bellevo - can yo please give this required color shade?

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, Pls insert this code to your file css: 

.cart-count-bubble {
  left: 1.6rem !important;
  top: 4px !important;
  background-color: #b98980 !important;
}

Here is result: 

Hope this can help you 😍

[bellevo]

This worked, but only on desktop if there is a way to do it on mobile as well I would appreciate it a lot! Thanks again!

[BSSCommerce-HDL · Accepted solution]

Hi @bellevo, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

.cart-count-bubble {
  left: 1.6rem !important;
  top: 4px !important;
  background-color: #b98980 !important;
}

Hope this can help you

[bellevo]

You are a lifesaver thank you once again!

[Guleria]

Hello @bellevo ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.cart-count-bubble {
    background-color: #edcced !important;
    bottom: 2.6rem !important;
    left: 1.5rem !important;
}

Change color code if you want.

Thanks

[suyash1]

@bellevo - add this css to the very end of your bae.css file and check , add color shade in place of red as per your choice

.cart-count-bubble{bottom: 1.8rem;    left: 1.2rem; background-color:red;}

[nvchien · Accepted solution]

Hi @bellevo,

You can go to Online store -> Themes -> Edit code, find "base.css" file and add this code to bottom:

.header .cart-count-bubble {
    top: 5px;
    right: 12px;
    left: auto;
    bottom: auto;
    background: #ba8980; /* Replace by your background colour */
    color: black; /* Replace by your text colour */
    line-height: 1.7rem;
}

Hope this helps.

[bellevo]

This worked, but only on desktop if there is a way to do the same on mobile I would appreciate it, thank you!

[niraj_patel]

Hello @bellevo 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
header .cart-count-bubble {
background-color: rgb(179 66 66 / 65%) !important; /* add your background colour */
bottom: 2.8rem !important;
left: 1rem !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[PageFly-Henry]

Hi @bellevo 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.cart-count-bubble {

    top: 10% !important;

    background: hsl(11deg 63.6% 61.32% / 53%) !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[bellevo]

Thank you everyone for help, the issue has been fixed on desktop version, if anyone knows how to do the same for mobile, I would appreciate it a lot! Thank you guys in advance!

Picture of the desired outcome: