Shopify themes, liquid, logos, and UX
Hi there, I'm using Broadcast theme for my site.
On mobile only, you have to press "Add to Cart" button twice to get the item into the cart. First press does nothing. I've noticed it's like this on the Broadcast demo too.
Any ideas how to fix? Thanks. 🙂
Hello @clairebear,
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Anyone?
Same problem on my site 😞 I have Debut Theme. Please Help! 🙂
Seems its working now, how did you fix the problem? Because sometimes I have the same problem on mobile phone. Sometimes It works on clicking the first time, sometimes I have to double click on my add to cart button..
In responsive design concept there is actually no concept of hover in touch devices. So, if your button has hover and click both effects, some of the devices will interpret the hover as one click and next the click event. so the basic concept is , stop hover effect from touch devices.
In my cases, I did not face the issue in android, but happened in IOS devices.
I’m having the same problem... Has this been solved? I’ve seen a huge tank in sales because of this. Please advise.
depends on your button, please give me your url
Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.
To hire me, visit my Upwork profile
Weekly Shopify advice: ShopSavvy newsletter
hey guys I was facing similar issues while browsing my shopify site in IOS devices. I was using debut theme. I could solve the issue via javascript. the code goes as below :
<script>
var mobileNoHoverState = function() {
var hoverClass = 'hover',
$target = $("#ad2cart"), // instead of #ad2cart put your add-to-cart button id or class
preventMouseover = false;
function forTouchstart() {
preventMouseover = true;
}
function forMouseover() {
if (preventMouseover === false) {
$(this).addClass(hoverClass);
} else {
preventMouseover = false;
}
}
function forMouseout() {
$(this).removeClass(hoverClass);
}
function init() {
$target.on({
touchstart : forTouchstart,
mouseover : forMouseover,
mouseout : forMouseout
});
}
return {
init: init
};
}();
mobileNoHoverState.init();
</script>
Hi Kareema,
Where does the code need to be added specifically, in which part?
Many thanks in advance for your answer.
Regards, ç
Ana
Thank you for this! Which file do I put the code in?
This works, thank you. This should be added to the product page template after the ATC button.
Hi thanks for this. I'm having the issue across my entire debut theme site (except for the home logo/button). Is there a script I can use globally like this? (and where would I put it?) - https://levelondemand.com
In which file do i plug this into? And where would i find my add to card id/class?
I have the same problem when I use an Iphone to navigate the website. Anyone has found a solution for this?
Many thanks.
Ana
I think by adding below css code it will work
.product-form__cart-submit{z-index:999999;}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024