Need help with search bar on product page

Site URL: https://dilana-info.squarespace.com/new-products

On my product page,  i would like to add search bar here (top of the page not the header).

Is there any way to do that.

Thank you

6 hours ago, Blumango said:

Site URL: https://dilana-info.squarespace.com/new-products

On my product page,  i would like to add search bar here (top of the page not the header).

Is there any way to do that.

Thank you

You can add search bar in footer, then share url again, we will give the code to move its position

Hi tuanphan, I have added the search bar to the footer, here is a link 
https://dilana-info.squarespace.com/new-products

On 7/29/2021 at 7:46 AM, Blumango said:

Hi tuanphan, I have added the search bar to the footer, here is a link 
https://dilana-info.squarespace.com/new-products

First, remove this line. It is outdated jquery version

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

add new line

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

next, add this to Last line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('footer#footer .search-block').insertAfter('body#collection-590a47155016e10ca7f0929e header#header');
	});
</script>
<style>
  header#header + .search-block {
    width: 30%;
    margin-left: auto;
}
  </style>

Where is the below line supposed to be placed?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2 hours ago, KimCLee said:

Where is the below line supposed to be placed?

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

replace this code

Quote

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

with 3.5.1 code

thank you...but where is this supposed to be placed? For example, does it go in the code injection page...the footer...or somewhere else?

On 8/30/2021 at 11:06 PM, KimCLee said:

thank you...but where is this supposed to be placed? For example, does it go in the code injection page...the footer...or somewhere else?

add it above this code

<script>
  $(document).ready(function() { 
		$('footer#footer .search-block').insertAfter('body#collection-590a47155016e10ca7f0929e header#header');
	});
</script>
<style>
  header#header + .search-block {
    width: 30%;
    margin-left: auto;
}
  </style>