How do I correctly create a drop a hint feature on a product page?

Store Design
, ,

Topic summary

A user is implementing a “drop a hint” feature on a Shopify product page but encounters an issue where clicking the custom button triggers the “Add to Cart” action instead.

Problem Details:

  • The feature was added to the main-product.liquid file
  • Code includes a copy-to-clipboard function and modal trigger
  • The button element conflicts with the product form’s default behavior

Solution Provided:

  • Change the button elements to different HTML tags (such as <a> anchor tags or <div> elements)
  • Style these alternative elements to visually appear as buttons
  • This prevents interference with the product form’s “Add to Cart” functionality

Outcome:
The solution successfully resolved the issue, with the original poster confirming it works perfectly.

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

So I’m trying to create this drop a hint feature on the products page. Which file would I generally put it in?

I put it in the main-product.liquid file but the button attached once clicked it activates to add to cart button instead.

Here’s my code:



let copyText = document.querySelector(".copy-text");
copyText.querySelector("button").addEventListener("click", function () {
	let input = copyText.querySelector("input.text");
	input.select();
	document.execCommand("copy");
	copyText.classList.add("active");
	window.getSelection().removeAllRanges();
	setTimeout(function () {
		copyText.classList.remove("active");
	}, 2500);
});

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
2

Hi @Ess91

It looks like the issue might be caused by the button element inside the “box-link” section. Buttons inside a product form might trigger the “Add to cart” functionality. To resolve this issue, you can try changing the “Drop someone a hint” button and the “Copy” button to a different element, such as an anchor tag <a> or a div, and style them to look like a button.

3

This works perfectly. Thank you!