How To Move Cart Count Bubble & Number On Mobile

MMast · ‎06-18-2024

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:

https://decemberschild.com
password: dc

AnneLuo · ‎06-18-2024

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:

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 · ‎06-18-2024

@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 | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Dan-From-Ryviu · ‎06-18-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

AnneLuo · ‎06-18-2024

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:

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 · ‎06-18-2024

@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 | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Dan-From-Ryviu · ‎06-18-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How To Move Cart Count Bubble & Number On Mobile