A user encountered a visual bug where the “Adding…” feedback text overlaps with the “Add to Cart” button text when clicked on a product page. An accompanying screenshot illustrated the collision issue.
Solution Process:
none for the feedback text resolved the overlap but caused the button to shrink to approximately half its size during the adding process.0 instead of hiding it with display: none maintained the button’s dimensions while preventing the text collision.The issue was successfully resolved, with the button now maintaining its size throughout the add-to-cart interaction.
Hello, When I click the “Add to Cart” button on the product page, the feedback text collides with the CTA text. The feedback text should say “Adding…” when a product is added to cart. Please see image below for clarity. I need help with this issue.
https://2d26b3.myshopify.com/products/sample-product
PW: reishi
Add this code in your theme.liquid:
@Spac-es That worked, but now the CTA button shrinks in size when clicked. It shrinks to about half it’s size and releases back to it’s normal state after adding to cart.
I understand the problem. Instead of setting the display to none we will make the opacity equal to 0, this way the size of the text will remain intact.
@Spac-es you’re awesome, thank you for your time and effort!