Jump to content

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

Recommended Posts

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.

inquire.png

Link to comment
  • 2 weeks later...
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/23/2022 at 9:02 PM, SupriyaGusain 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>

image.png.f092265269f1d6bf0858f31fc865c46e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

image.png.f092265269f1d6bf0858f31fc865c46e.png

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.