Hello, I noticed that our live chat has an obstruction view with the Smile rewards icon on both mobile and desktop when its opened. Can someone please assist me with this? I need to auto-hide the smile rewards icon on both mobile/desktop when the shopify live chat is opened.
‘
Our website is https://www.yonicque.com
This is a known overlap issue between Shopify live chat and the Smile rewards widget.
Recommended Solution (JavaScript – works on mobile & desktop)
Add this code to theme.liquid (before </body>):
<script>
function toggleSmileWidget(hide) {
const smileWidget = document.querySelector('[data-smile-widget]');
if (smileWidget) {
smileWidget.style.display = hide ? 'none' : '';
}
}
// Shopify Inbox opens
document.addEventListener('shopify:inbox:open', function () {
toggleSmileWidget(true);
});
// Shopify Inbox closes
document.addEventListener('shopify:inbox:close', function () {
toggleSmileWidget(false);
});
</script>
Note: JS apply as per your handler
Hello, this did not work. Please review preview: https://iu152tenr8rki08q-26571931701.shopifypreview.com
@yonicque , As I said you have to apply function handle in place of
toggleSmileWidget(hide)
You can do this with CSS only (didn’t someone already gave you similar code?)
body:has(inbox-online-store-chat[is-open="true"]) #smile-ui-lite-container {
display: none;
}
Should be fine in Theme Settings=> Custom CSS, but may try elsewhere…
Hello, Thank you! No this is a different situation.
@tim_1 For some reason your code only applies on mobile but not desktop. Please see yonicque.com
Yes, some code added earlier to your theme.css is not completely right.
See here:
See that this opening curly brace does not have a matching closing brace?
Which means, that all the rules below it are also included in this media query – and applied only if browser width is less tham 768px.
For most of them it’s fine – they have their own media query which is the same, but for some it’s not ok, like for buyer consent modal (which is also hidden only on mobile), bunch of rules which should apply on the wider screens and of course, my own rule which now works only on mobile.
This is how browser sees it:
The solution is simple – just add the missing closing curly brace after line shown as 13502 on my screenshot (it may be different line number in your editor!).
