Issue With Variant & Add To Cart Button On Mobile/Tablet
digitalconnect
Hi,
I’m experiencing an issue with adding product variants to the cart. Everything works perfectly on desktop, but not on mobile and tablet.
On mobile and tablet, the main variant selector and add to cart button are hidden.
A second variant selector and button are visible, but clicking the button results in ?variant=undefined being added to the URL instead of the correct variant ID.
Ideally, I would like to place the variant selector and add to cart button in a custom location—preferably in two different places. If that’s not possible, then at the very least I need to ensure that the visible button functions properly and passes the correct variant ID.
Do you have any suggestions on how to fix this?
Thanks in advance, Matthias
digitalconnect
Accepted AnswerHi,
To be honest, this comes across as if your system is perfect and the issue lies entirely with our design — but in a shopping environment, having the “Add to Cart” buttons positioned as described isn’t a luxury, it’s essential for usability and conversions.
I understand this won’t be resolved overnight, but perhaps it’s something to consider for future improvements. After all, the feedback provided is intended to help make your system even better.
Feel free to take it as you see fit — and have a great day.
Toufiq
Accepted AnswerHi there,
Thank you for reaching out, and I apologize for any inconvenience caused by this oversight. Product added fine on cart. But, added undifined text into the URL. I need share your issue to our developer team.
Best regards,
Toufiqur Rahman (Team Lead, Support)
digitalconnect
Accepted AnswerHi Toufiqur,
Thanks for your response. Indeed, the product is added to the cart, but not the selected variant. Only the default (first) main variant is being added, regardless of the user's choice.
Looking forward to hearing from you :)
Toufiq
Accepted AnswerYou should use only one variant addon per page. This is because when a section is hidden, it's done using CSS to visually hide that portion. However, behind the scenes, both variant sections are still rendered, including their radio buttons. Since the radio buttons share the same IDs, the system can't properly detect the selected variant, leading to issues.
digitalconnect
Accepted AnswerHi, I understand the issue — no explanation needed. But there must be a way to solve this, right?
On mobile, I need the button to appear in a different position than on desktop. Ideally, I’d like to have the “Add to Cart” button visible both at the top and bottom of the page on mobile.
Right now, I feel stuck: either the button ends up in an awkward spot on desktop, or in the wrong place on mobile. That’s really not ideal.