Possible to customize the search landing page?

Site URL: https://www.natureinstitute.org

Hi,

I'm doing admin on a large site and it looks like it size is affecting the search functionality. I know this because the site has something like 500 pages and if I duplicate the site and erase half of them, which I've done, the search bar works fine on the smaller version of the site. But...  I need all those pages so that's not an option.

The only thing I can think of is to tell users when they use the search bar that they might have to do it 2 or 3 times till they get the right results (which does work), or they might have to go back out to google to search the site. Both of these are inelegant and mildly embarrassing, but I can't think of what else to do.

That said, I'm currently using the embedded search feature (as opposed to creating my own link and search page) and when people use it they're taken to a page that I didn't create... it's just the search results landing page. But that's the page I'd like to leave a message on. Does anyone know if that's possible?

(If's that confusing, you can take a look at my site  https://www.natureinstitute.org/ and the search bar is in the top right of the home page. If you search something, then the page it takes you to is the landing page that I want to add a message to.)

(I know I can create a search item in the menu bar and it will take me to a search page that I can then add a message to, but I'd rather not add another item to the menu bar if I don't absolutely have to.)

Thanks!

Hi. You want to add a message on Search Page?

Add to Settings > Advanced > Code Injection > Footer

<script>
  if (window.location.pathname == '/search'){
    document.querySelector('body').classList.add('sqs-search-page')
  }
</script>
<style>
  body.sqs-search-page .sqs-search-page-content:before {
    content: "custom message abc xyz";
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
</style>

Hey Tuanphan - this works great, thanks so much for your help! It is doing something a little strange though... It's duplicating the query in the bar (repeating the same word but right below the original) and also making the word "search" really big. Do you have any suggestions for how to fix those? Thanks again! (and here's the website: https://www.natureinstitute.org)

On 7/12/2021 at 9:04 PM, TreeTops said:

Hey Tuanphan - this works great, thanks so much for your help! It is doing something a little strange though... It's duplicating the query in the bar (repeating the same word but right below the original) and also making the word "search" really big. Do you have any suggestions for how to fix those? Thanks again! (and here's the website: https://www.natureinstitute.org)

Add to Design > Custom CSS

.sqs-search-page-input form:last-child {
    display: none;
}

Thanks so much Tuanphan! That cleared the duplicated query problem right up, but the word Search in the top right bar is still really large... is there anything easy you could recommend to make it normal size? Thanks for all your help!!!

10 hours ago, TreeTops said:

Thanks so much Tuanphan! That cleared the duplicated query problem right up, but the word Search in the top right bar is still really large... is there anything easy you could recommend to make it normal size? Thanks for all your help!!!

Hi. Which word? Can you take a screenshot?

Thank you for this solution. I was able to add text to the search bar and remove the duplication but it only works in Chrome, not Safari. Any advice on this? The site is 

https://cargofilm-staging.squarespace.com/ 
password: cargo

Thanks for your help!

On 1/18/2022 at 1:44 AM, artpimpress said:

Thank you for this solution. I was able to add text to the search bar and remove the duplication but it only works in Chrome, not Safari. Any advice on this? The site is 

https://cargofilm-staging.squarespace.com/ 
password: cargo

Thanks for your help!

Can you share link to a search result & take screenshot of problem? We can check easier

@tuanphan Thank you for responding. I removed some of the code and now it works on Safari but you see a duplicate message "type to search" on Chrome. You can see below 2 screenshots, the one with instructions are Chrome, the one without is Safari. 

I also have code to add text to the search bar on the films page https://cargofilm-staging.squarespace.com/films

It's a mess of found code. I would be grateful for any help. Thank you!

15 hours ago, artpimpress said:

@tuanphan Thank you for responding. I removed some of the code and now it works on Safari but you see a duplicate message "type to search" on Chrome. You can see below 2 screenshots, the one with instructions are Chrome, the one without is Safari. 

I also have code to add text to the search bar on the films page https://cargofilm-staging.squarespace.com/films

It's a mess of found code. I would be grateful for any help. Thank you!

Add to Design > Custom CSS

div.sqs-search-page form:last-child {
    display: none;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

div.sqs-search-page form:last-child {
    display: none;
}

 

Thank you. This removes the duplicate search here text in Chrome but breaks the search function in Safari. I've left it so perhaps you can see the problem. Thank you for your help. I've made such a mess.