Issue: The Shopify live chat window is being visually obstructed by the Smile rewards icon on both mobile and desktop. The request is to automatically hide the Smile rewards icon whenever the live chat is opened.
Context: Tagged “css,” suggesting a CSS-based or front-end solution to toggle the visibility of the Smile (loyalty/rewards) widget in response to the chat’s open state.
Evidence: An image attachment is provided showing the overlap, and the site URL (https://www.yonicque.com) is shared for review.
Status: No solution or guidance has been posted yet. The discussion remains open, with the key question being how to detect the chat’s open state and hide the Smile icon across devices.
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!).
