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

Solved

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

bellevo
Pathfinder
91 0 24

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: Screenshot 2024-06-17 180112.png


Desired outcome: Screenshot 2024-06-17 180137.png

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an 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: 

BSSCommerceHDL_0-1718637109528.png

 

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

nvchien
Shopify Partner
55 23 14

This is an 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.

 

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.

View solution in original post

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @bellevo

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

BSSCommerceHDL_0-1718638339752.png

 

Step 2: Search file theme.liquid

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

BSSCommerceHDL_1-1718638373308.png

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

Hope this can help you

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 12 (12)

suyash1
Shopify Partner
10551 1303 1670

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an 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: 

BSSCommerceHDL_0-1718637109528.png

 

Hope this can help you 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

bellevo
Pathfinder
91 0 24

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
Shopify Partner
2305 834 907

This is an accepted solution.

Hi @bellevo

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

BSSCommerceHDL_0-1718638339752.png

 

Step 2: Search file theme.liquid

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

BSSCommerceHDL_1-1718638373308.png

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

Hope this can help you

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

bellevo
Pathfinder
91 0 24

You are a lifesaver thank you once again!

Guleria
Shopify Partner
3976 793 1131

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

suyash1
Shopify Partner
10551 1303 1670

@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;}

 

suyash1_0-1718637155275.png

 

 

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

nvchien
Shopify Partner
55 23 14

This is an 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.

 

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
bellevo
Pathfinder
91 0 24

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
Shopify Partner
2391 516 513

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.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Henry
Shopify Partner
1184 335 295

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

bellevo
Pathfinder
91 0 24

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: Screenshot 2024-06-17 183005.png