A user is experiencing a z-index layering problem with a WhatsApp button in the Motion theme. On mobile view, the WhatsApp button overlaps and hides the sticky add-to-cart (ATC) button.
Requested fixes:
Solutions attempted:
.shp-cnv-shipway-chat in base.csstext-indent, and scale the SVG iconCurrent status:
The issue remains unresolved. The user reported that the second CSS solution did not work as expected, with screenshots showing the button still improperly positioned. The discussion is ongoing with no working solution confirmed yet.
I’m using Motion theme in that I need to troubleshoot the WhatsApp Button index position because in mobile view the WhatsApp button is hiding the sticky add to cart button. So that I need to put the WhatsApp button behind the sticky ATC and also remove the text chat with us
Website link : https://93i80n93op9jb15o-67925410094.shopifypreview.com
Thanks in advance
Hey @Sivadarshan this is Qasim a Sr. Shopify Developer and Official Shopify Partener.
I spend my 15 minute to your Store and do my best to find solution. But I found that this problem can be solve by gaving margin bottom to it.
Please paste this code to the end of base.css file.
a.shp-cnv-shipway-chat{
margin: 0px 0px 80px 0px;
}
@TheScriptFlow Thanks for your time, Is that possible to change that to left side at the position of wishlist button. I’ll make the wishlist button to top of WA button
Hi @Sivadarshan ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.
.loo-bottomleft {
bottom: 49px;
left: 0;
}
a.shp-cnv-shipway-chat {
bottom: -64px;
left: 16px;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
font-size: 0;
}
}
a.shp-cnv-shipway-chat svg {
transform: scale(1.2);
margin: 1px -1px 2px 0 !important;
}
