iphoneだとカートに入れるボタンを2回押さないとカートに入らない

Topic summary

iPhoneで、商品に選択肢がある場合だけ「カートに入れる」を2回押さないと追加されない不具合が報告されている。Androidでは再現せず、利用テーマは有料の「Broadcast」。

・確認提案として、まずテーマ公式プレビューでも同じ現象が起きるかを検証するよう案内されている。これにより、サイト固有の設定か、テーマ自体の挙動かを切り分ける意図がある。

・有力な原因として、iPhone特有の「hover問題」が指摘されている。hoverは本来マウスを重ねた時の見た目変更で、タップ時にその視覚効果が先に反応し、実際のカート追加処理が2回目まで実行されない可能性があるという見立て。

・対処案は、テーマを複製した開発環境で該当CSS/SCSSのhover指定(例: .product__submit–spb .product__submit__add:hover)をコメントアウトまたは削除して挙動を確認すること。

現時点では確定解決には至っておらず、hoverを外して改善するかどうかの追加検証が必要な段階。

Summarized with AI on March 8. AI used: gpt-5.4.

iphone だけ、**商品に選択肢があると、**カートに入れるボタンを2回押さないとカートに入りません。アンドロイドは問題なく1度でカートに入ります。

これは、誤タップ防止などの使用なのでしょうか?

https://capellabeauty.com/

私が利用しているのは、有料のテーマで、Broadcast というテーマで、同様に英語です。

https://themes.shopify.com/themes/broadcast/styles/clean

コンバージョンが落ちてしまうので、1回のクリックでカートに入るようにしたいのですが、どこを直せば良いのかわかりません。

お分かりの方がいらしたら、ご教授頂ければ幸いです。

よろしくお願い致します。

まずご確認頂きたいのですが、同様のテスト環境で

https://themes.shopify.com/themes/broadcast/styles/clean/preview

からカートに入れたときに、やはり2回クリックが必要になりますでしょうか?

こういった場合のほとんどの原因が、iPhoneのホバー問題です。カートボタンをタップした際に色が変更される挙動が、カートに商品を入れる挙動よりも優先されてしまっているかと思います。

参考までに
https://nldot.info/if-you-dont-touch-the-iphone-twice-and-the-link-doesnt-fly-how-do-you-handle-it/

CSS,SCSSを触ることができれば、テーマをコピーし、開発環境を作って、該当のhoverを外してみてはいかがでしょうか?これで動けば原因はhoverです。

.product__submit–spb .product__submit__add:hover

上記をまず、コメントアウトするか消してみてください。

状況が変わらなければ、問題は別にあるため、その他の検証が必要です。

1 Like