shopping cart window

Shopify Discussion
, ,

Topic summary

A user is seeking help implementing a custom message in their Shopify shopping cart window that appears after clicking the “Add to Cart” button. They need assistance with the correct code to change both the color and text of this message.

A response provides a two-step solution:

Implementation approach:

  • Add a placeholder <div> element with class “cart-message” in the cart template where the message should display
  • Use JavaScript to target all “Add to Cart” buttons and attach a click event listener
  • The script displays the custom message with styling (background color, padding, border-radius) after the button is clicked

Customization options:

  • The message text can be modified as needed
  • Styles (colors, spacing) are adjustable through inline CSS

The solution is described as simple and easy to implement, though the code snippet appears partially corrupted or reversed in the original post.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
2

Here’s a short and simple explanation with concise code:

**Steps:**1. - Insert a div where you want the message to appear in your cart template:

   **Add a Placeholder in the Cart Window:**

   html

  1. JavaScript to Show the Message After ATC:

    • Add this script to your theme’s JavaScript file or directly in theme.liquid:
      javascript
      document.querySelectorAll(‘.add-to-cart-button’).forEach(button => { button.addEventListener(‘click’, () => { setTimeout(() => { document.querySelector(‘.cart-message’).innerHTML = ‘
      Your custom message here!
      ’; }, 500); }); });

  2. Customize:

    • Change “Your custom message here!” and adjust styles as needed.

Explanation:- Placeholder: Where the message will go.

  • Script: Adds the message after the “Add to Cart” button is clicked.

That’s it! Simple and easy to implement.