Hello,
I have my live chat icon from Shopify active and the rewards app. On mobile, the icon causes an obstruction view once the cart drawer is opened. I need help with hiding the icons when the cart drawer pops open.
My URL is: https://www.yonicque.com
The theme I have is Motion and the developers claim that they are not knowledgeable on how to fix this.
Hi @yonicque
Ah that should be simple enough:
body.is-drawer-open #shopify-chat,
body.is-drawer-open #dummy-chat-button-iframe,
body.is-drawer-open #smile-ui-lite-container,
body.is-drawer-open #joy-reward-launcher,
body.is-drawer-open .rivo-rewards-button {
display: none !important;
}
Hope this helps!
Hello, my custom CSS is full at this time. I tried to add it to the theme.css.liquid file but it did not work. Should I place it some where else?
hey @yonicque try this one and follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the body ----->
<style>
body.is-drawer-open #shopify-chat,
body.is-drawer-open #dummy-chat-button-iframe,
body.is-drawer-open #smile-ui-lite-container,
body.is-drawer-open #joy-reward-launcher,
body.is-drawer-open .rivo-rewards-button {
display: none !important;
}
</style>
Hey, I followed the steps that didn’t work either.
@MeshCode My theme.css is locked. However, yesterday the smile rewards developers provided me with a code: #smile-ui-container,#smile-ui-lite-container { z-index: 6 !important;} which hide the Rewards icon perfectly, but when I tried to alter it using shopifychat it did not work. Can you look into this?
Understand what you’re doing there. Z index is like invisible planes (not the flying ones), that go from the screen to your face. The higher the number, the closer it is to your face.
Your cart drawer should have a z index of 30. So anything that has a z index of more than 30, is going to be “on top”. Less than 30 is “behind”. You’re not hiding anything, but rather placing things on top of one another.
So how can I hide it for the Shopify inbox - I tried #shopify-chat-ui-container,#shopify-chat-ui-lite-container { z-index: 6 !important;} and it didn’t work
delete those names and just try #shopify-chat
@maximus3 #shopify-chat { z-index: 6 !important;} like this?
yep that should be it, although 6 might conflict with other elements, you could do 20
@Maximus3 I tried #shopify-chat { z-index: 20 !important;} and it didn’t work and I also tried #shopify-chat { z-index: 6 !important;} and that didn’t work either
you can actually put it in the liquid file, you just need to wrap the css code in a style tag. For example
<style>
div#shopify-chat {
z-index: 20 !important;
}
</style>
Since your chat bubble is theme-wide, it would go in theme.liquid just above the closing body tag
Try this:
<style>
inbox-online-store-chat {
z-index: 20 !important;
}
</style>
paste this directly above the closing body tag of theme.liquid
Try this:
<style>
inbox-online-store-chat {
z-index: 20 !important;
}
</style>
paste this directly above the closing body tag of theme.liquid
FINALLYYYYY! IT WORKEDD!!! @Maximus3 Thank you!!!
Can we do the same for our klaviyo icon?
You mean the “Trusted Site” at the bottom?
Yes you can add anything to that code. Simply add a comma after the other one:
inbox-online-store-chat, #trustedsite-tm-image
You can also add the 15% bubble: .needsclick
Trying to target the exact selector is a little tricky sometimes and needs trial and error. Sometimes it has 4 different names, 2 IDs, and you just have to guess the correct one.
