Add to cart button in the wrong place

Shopify Discussion

Topic summary

A user’s “add to cart” button is mispositioned on mobile devices only, appearing too far below its intended location. This issue occurred after adding Meta Pixel code to their Shopify store (monchmonch.shop), while the desktop version displays correctly.

Attempted Solution:
Another user provided CSS code targeting mobile viewports to reposition the button using media queries and transform properties. However, the original poster confirmed this fix did not resolve the issue.

Current Status:
A third participant asked if the problem has been solved, but no confirmation was provided. The issue appears to remain unresolved, with the store URL shared for further troubleshooting.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

My add to cart button is stuck in the wrong place only on my mobile site after i added my meta pixel code. I can’t edit its placement in the theme editor and it’s in the correct spot for my desktop site. Anyone have this issue before and know how to fix it?

1 Like
2

Hi
Can you share store URL and detail image?

3

Hello @gshoushi add this code to theme.css or assets/styles.css to reposition the button on mobile

@media (max-width: 767px) {
    .product__add-to-cart {
        position: relative !important;
        bottom: 0 !important; /* Adjust this value as needed */
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

If it doesn’t work let me know and give the store url

I’ll fix it

Thank you

4

Hi, my store is monchmonch.shop. On our mobile site, the add to cart button appears too far below where it is supposed to be

5

Hi,

Thanks for your help. This code doesn’t seem to be fixing the issue. My store URL is monchmonch.shop, you’ll see the issue with the add to cart button if you visit our product page on a mobile device. Please let me know, thanks!

6

I believe this is already solved, correct, @gshoushi?