Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I adjust the product counter on my cart icon?

Solved

How can I adjust the product counter on my cart icon?

Luburic
Excursionist
32 3 3

Hello there 

My Name is Marko and I need Your Help!!!

 

My Cart icon shows the amount of Product that are in there a little bit weird. 

Luburic_0-1698765026736.png

I would like that the amount is shown on the top left

 

URL:

https://defd50.myshopify.com/products/christmas-home-slippers-cute-cartoon-santa-claus-cotton-slippe...

PW: hel1o


I would really appreciate if someone can help me out with that
Friendly regardes 
Marko

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9035 2160 2664

This is an accepted solution.

Hi @Luburic 

 

Thank you for providing your website information. Please follow the steps below

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • 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:

NOTE: The text color of you bubble is not so visible, so I change it to white. Remove this "color: white;" in the code or change the color you want. 

 

div.cart-count-bubble {
    top: 0;
    color: white;
}

 

 

  • And Save. 
  • Result

 

Made4uoRibe_0-1698767088031.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
9035 2160 2664

This is an accepted solution.

Hi @Luburic 

 

Thank you for providing your website information. Please follow the steps below

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • 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:

NOTE: The text color of you bubble is not so visible, so I change it to white. Remove this "color: white;" in the code or change the color you want. 

 

div.cart-count-bubble {
    top: 0;
    color: white;
}

 

 

  • And Save. 
  • Result

 

Made4uoRibe_0-1698767088031.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

Dan-From-Ryviu
Shopify Partner
10232 2033 2103

Please add this code at the bottom of your base.css file 

.cart-count-bubble {
    bottom: 30px !important;
    left: 0px !important;
}

Screenshot_7.jpg

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.