How to show "Inquire" button on product detail page that opens a form as lightbox popup.

Hi,
I want to add an Inquire button on my products detail page, which in click opens the form in lightbox popup.

The problem is I can add it as additional info but now I have more than 500 products, and adding it to each product manually will take so much of time. I don't want to use plugin.

I have added the button using custom code, created a form in new page but don't know how I can show a popup on button click.

Thanks.

Hi,

You can add it to Site Footer, then share your site url, we can give code to move it to 500 products

On 8/10/2022 at 6:45 PM, tuanphan said:

Hi,

You can add it to Site Footer, then share your site url, we can give code to move it to 500 products

@tuanphan Thanks for replying back.

Here is the link to the site - https://hexagon-pike-xw4b.squarespace.com/
It is not live yet, the password is - sybilfrank08$

I have added the button to site footer, which on click opens the lightbox form.

Thank you so much for your help.

On 8/19/2022 at 2:28 PM, SupriyaGusain said:

@tuanphan Thanks for replying back.

Here is the link to the site - https://hexagon-pike-xw4b.squarespace.com/
It is not live yet, the password is - sybilfrank08$

I have added the button to site footer, which on click opens the lightbox form.

Thank you so much for your help.

Can you share link to a product? I can't find shop page on your site

On 8/21/2022 at 7:19 AM, tuanphan said:

Can you share link to a product? I can't find shop page on your site

Yes.
Here is the link - https://hexagon-pike-xw4b.squarespace.com/andrew-stelmack-bin/p/moon-dance-andrew-stelmack

Thank you.

On 8/23/2022 at 9:02 PM, SupriyaGusain said:

Yes.
Here is the link - https://hexagon-pike-xw4b.squarespace.com/andrew-stelmack-bin/p/moon-dance-andrew-stelmack

Thank you.

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('footer.sections .form-block').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>
<style>
  .ProductItem-details .sqs-add-to-cart-button-wrapper+.form-block div {
    text-align: left;
    text-align: left;
}
</style>

6 hours ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('footer.sections .form-block').insertAfter('.ProductItem-details .sqs-add-to-cart-button-wrapper');
	});
</script>
<style>
  .ProductItem-details .sqs-add-to-cart-button-wrapper+.form-block div {
    text-align: left;
    text-align: left;
}
</style>

It works!
Thank you so much for your help. I really appreciate. ⭐