How To Move Cart Count Bubble & Number On Mobile

Solved

How To Move Cart Count Bubble & Number On Mobile

MMast
Trailblazer
182 1 25

Thanks in advance!

I’m looking to change the cart bubble location and the cart number location on mobile view. I changed the location of the bubble on pc version already, so I’m just looking to change the mobile version. Example shown below.

Example of what my site looks like:

 

IMG_0769.jpeg

https://decemberschild.com
password: dc

Accepted Solutions (3)

AnneLuo
Shopify Partner
722 140 146

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (max-width: 767px){
.cart-count-bubble {
    left: 20px !important;
    top: 0 !important;
}
.cart-count-bubble span {
    margin-left: 0 !important;
}
}
</style>

Result:

AnneLuo_0-1718766690447.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

suyash1
Shopify Partner
9532 1190 1529

This is an accepted solution.

@MMast - please add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
.cart-count-bubble{bottom: 0.5rem;    left: 1.2rem;}
}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @MMast 

You can solve it by adding this code to theme.liquid file, after <head> tag 

 

<style>
@media (max-width: 749px) {
.cart-count-bubble span {
    margin-left: 0px !important;
}
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

AnneLuo
Shopify Partner
722 140 146

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (max-width: 767px){
.cart-count-bubble {
    left: 20px !important;
    top: 0 !important;
}
.cart-count-bubble span {
    margin-left: 0 !important;
}
}
</style>

Result:

AnneLuo_0-1718766690447.png

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

suyash1
Shopify Partner
9532 1190 1529

This is an accepted solution.

@MMast - please add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
.cart-count-bubble{bottom: 0.5rem;    left: 1.2rem;}
}
Support me | To build shopify pages use pagefly | You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Hi @MMast 

You can solve it by adding this code to theme.liquid file, after <head> tag 

 

<style>
@media (max-width: 749px) {
.cart-count-bubble span {
    margin-left: 0px !important;
}
}
</style>

 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.