ADD TO CART ANIMATION NOT WORKING PROPERLY ON THE PRODUCT PAGE. HOMEPAGE ITS WORKING FINE

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user is experiencing an issue where the “Add to Cart” animation works correctly on the homepage but malfunctions on product pages. Specifically, when the “Adding…” text appears after clicking the button, the original “Add to Cart” text remains visible instead of being hidden.

Proposed Solutions:

  • One suggestion involves adding background-color: white; to the button and <span>Adding...</span> elements
  • Another detailed solution provides HTML, JavaScript, and CSS code snippets to implement the animation functionality, including:
    • Modifying the product form button in product-template.liquid or product-form.liquid
    • Adding JavaScript to handle the text toggle behavior in the main JS file
    • Including CSS with a .hidden class to control visibility

Current Status:

The issue remains unresolved. The user clarified that this functionality previously worked and is already built into the theme, suggesting the existing code may need adjustment rather than complete replacement. They’ve requested more specific guidance on exact placement and positioning of the suggested code fixes.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

ADD TO CART ANIMATION NOT WORKING PROPERLY ON THE PRODUCT PAGE. HOMEPAGE ITS WORKING FINE, KINDLY HELP ME.

Screenshot 2024-12-25 122816.png
Screenshot 2024-12-25 122816.png677×333 10.7 KB

LINK - https://78axlfc3odzqtxi3-71576191201.shopifypreview.com

PASSWORD - 678543

2

hassaandev_0-1735111801013.png
hassaandev_0-1735111801013.png374×158 19.6 KB

In the Button and in the Adding..

Add this:
background-color:white;

3

Hi @Shahil1

1. Add HTML Code

The button code should go into the product form, where the “Add to Cart” button is located.

Steps:

  1. Go to Online Store > Themes > Actions > Edit Code.
  2. Find the file for the product form:
    • This is typically located in Sections or Snippets. Look for files like:
      • product-template.liquid
      • product-form.liquid
  3. Locate the “Add to Cart” button and replace or update it with the following code:

2. Add JavaScript Code

The JavaScript code handles the dynamic behavior of the button.

Steps:

  1. In the Shopify theme editor, locate your main JavaScript file:
    • Usually found in Assets with names like theme.js or main.js.
  2. Add the following script at the bottom of the file
document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('ProductSubmitButton-template--18852890542305__main');

    if (button) {
        button.addEventListener('click', function (event) {
            event.preventDefault(); 
            
            const addToCartText = button.querySelector('.cta');
            const addingText = button.querySelector('.loading-overlay__spinner');

            addToCartText.classList.add('hidden');
            addingText.classList.remove('hidden');

            
            setTimeout(() => {
                addingText.classList.add('hidden');
                addToCartText.classList.remove('hidden');
            }, 2000); 
        });
    }
});

3. Add CSS Code

The CSS styles the button and handles the hidden class.

Steps:

  1. In the theme editor, locate the main CSS file:
    • Found in Assets with names like theme.css, styles.css, or similar.
  2. Add this CSS at the bottom of the file
.hidden {
    display: none;
}

.loading-overlay__spinner {
    display: inline-block;
}

Save and Test1. Save all the changes to the files.

  1. Preview your theme to test the functionality:
    • Go to a product page and click “Add to Cart”. The button text should change to “Adding…” and revert after the simulated delay.

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

Didnt work :disappointed_face: , it was working before . Infact the theme already has this .
There is some issue with the current code only , maybe need to add some
code somewhere

5

please elaborate where to exactly paste this, and which position.

6

currently when the addin… is shown the add to cart is not hidden just in product page