How to keep Whatsapp floating button above all content on a mobile view?

Store Design

Topic summary

A user is experiencing an issue where a WhatsApp floating button appears behind other elements (like Add to Cart and Buy Now buttons) on mobile product pages in Shopify 2.0.

Proposed Solutions:

  • CSS z-index fix: One suggestion is to add CSS code to the assets/base.css file:

    .whatsapp-link {
  z-index: 100 !important;
}

    This increases the stacking order to keep the button above other content.

  • Alternative code: Another user offered different code but didn’t specify implementation details.

Current Status:

The discussion remains open with a follow-up question about where exactly to paste the alternative code, indicating the issue hasn’t been fully resolved for all participants.

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

I have added Whatsapp Floating Button but on product page the Button gets behind ATC or Buy now button and other content in mobile view. How can I can make it to stay above all content. Using Shopify 2.0 theme. Anyone can help

B4KkR9b
B4KkR9b735×1280 46.6 KB

Here is code
2

@Grace_01 Go to assetes/base.css and paste below css at bottom of file.

.-whatsapp-link
{
z-index:100 !important;
}
1 Like
3

plz use this code
4

Hello Ahsan, where do ı need to paste this code to make it working? I couldn’t find it