MINICART NOT STICKY ON MOBILE

Store Design
, , , , , , , ,

Topic summary

A user encountered an issue where their minicart was not sticky on mobile product pages, despite working correctly on the homepage.

Solution provided:

  • Custom CSS code was added to fix the sticky positioning on mobile devices (max-width: 767px)
  • Initial code resolved the sticky behavior but caused the empty cart to display incorrectly
  • Updated CSS code fixed both the sticky positioning and empty cart display issues by adjusting width to 100%

Resolution:
The problem was successfully resolved with the corrected CSS snippet. The minicart now functions properly across all pages on mobile devices.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

MY minicart is not sticky on product page , while in homepage it is sticky and working . issue is only inside the product page . kindly someone help me . ISSUE ONLY ON MOBILE . PC NO ISSUES

https://qqv4kwksvi57dhh8-71576191201.shopifypreview.com

password - closed

2

Hi @Shahil1

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 767px) {
body.open-cart .cart {
    position: fixed;
    top: 0px;
}
}
3

this fixed the sticky issue but empty cart is displayed like this , please help

photo_2024-12-18_08-14-29.jpg
photo_2024-12-18_08-14-29.jpg590×1280 17.4 KB

4

Please update the code

@media (max-width: 767px) {
    body.open-cart .cart {
        position: fixed;
        top: 0px;
        width: 100%;
    }
}
5

you are the best , issues sorted

1 Like
6

You are very welcome!