Jump to content

How to edit / customise search box placeholder text

Recommended Posts

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  window.Squarespace.onInitialize(Y, function(){  
		$(".sqs-search-ui-text-input .search-input::placeholder").html(function() { 
          return $(this).html().replace("Search", "new text");  
    });
	});
</script>

 

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
1 hour ago, tuanphan said:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> window.Squarespace.onInitialize(Y, function(){ $(".sqs-search-ui-text-input .search-input::placeholder").html(function() { return $(this).html().replace("Search", "new text"); }); }); </script>

Thank you so much @tuanphan. I'm afraid that didn't actually work 😞

Link to comment
On 6/10/2020 at 6:08 PM, therealmiguel said:

Thank you so much @tuanphan. I'm afraid that didn't actually work 😞

 

6 minutes ago, sandrakeus said:

I'm also looking for a solution. The code above doesn't work for me either. I'm on Squarespace 7.0 / Brine.

Try again with

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>

 

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
3 minutes ago, therealmiguel said:

@tuanphan Thank you so much again for your help with the search placeholder query above. 

 

Do you happen to know how to change the colour of the search box border on 7.1:  https://miguelmateas.com/daily-picks

Thanks again! 

Miguel

Add to Home > Design > Custom CSS

.sqs-search-ui-button-wrapper.color-dark .search-input {
    border-color: red;
}

 

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
  • 3 weeks later...
On 6/15/2020 at 11:36 AM, tuanphan said:

 

Try again with


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
	$(".sqs-search-ui-text-input .search-input").attr('placeholder','new text');
});
</script>

 

 

This code still doesn't work for me. But I found a solution that worked for me in mean time.

Sandra Keus | Square It Up
Based in Portugal, from The Netherlands, working world wide.

👩🏻‍💻 squareitup.co/en/portfolio
✉️ sandra@squareitup.co

Link to comment
  • 1 month later...
On 6/15/2020 at 5:36 AM, tuanphan said:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $(".sqs-search-ui-text-input .search-input").attr('placeholder','new text'); }); </script>

Hi @tuanphan

I also can't get this code to work for me - I'd like to just change the Search placeholder text in the top navigation of this website to "Search by Artist": www.williamchambersart.com - Any help would be appreciated!

Edited by Leda_Atomika
Link to comment

Hi @Leda_Atomika

Thanks to @tuanphan


@sandrakeus @theresa.southern Please share your website address.
Use this code for your website.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
21 hours ago, IXStudio said:

Hi @Leda_Atomika

Thanks to @tuanphan


@sandrakeus @theresa.southern Please share your website address.
Use this code for your website.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Please use the like button if it helps you!

Best,
Leopold

Hi Leopold - Thank you for your answer, however I get a syntax error on <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">

Apologies if it's a simple fix, I am clueless on this... thank you!

The site is:  Version 7.0– Brine family (Jaunt template) 

Screen Shot 2020-08-27 at 10.41AM.png

Link to comment
  • 6 months later...

Hi - when I try this code (Tuan's), it makes all my buttons stop being the same width. I couldn't leave the code in my site so I can't show an example, but this is all the code I have in my site:

Any assistance would be helpful as re-naming the search text would clarify my UX quite a bit... 

Thank you!

/* Small Button Styling */
.sqs-block-button-element--small {
 width: 35% !important;
}

/* Medium Button Styling */
.sqs-block-button-element--medium {
 width: 55% !important;
}

/* Large Button Styling */
.sqs-block-button-element--large {
 width: 55% !important;
}

/* Newer posts */
nav.blog-list-pagination .prev-label {
    visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
    visibility: visible;
    content: "More Posts";
}
/* Older posts */
nav.blog-list-pagination .next-label {
    visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
    visibility: visible;
    content: "More Posts";
  font-size: 26px !important;
  font-weight: 500;
}
/* Summary Block Styling */
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Futura;
font-weight: 500;
font-size: 24px !important;
color: 042426;
 } }
/* Hide Shop Categories */
.products.collection-content-wrapper .nested-category-children {
  
  display: none;
  
  }

//--Slideshow: Reel Buttons
.gallery-reel-control-btn {color: #000000}
.gallery-reel-control-btn::before{background-color: #F7F6F3}

/* Mobile Menu Font */
.header-menu-nav-item a {
    font-size: 18px;
}

Link to comment
On 3/17/2021 at 5:49 AM, coriwhat said:

Hi - when I try this code (Tuan's), it makes all my buttons stop being the same width. I couldn't leave the code in my site so I can't show an example, but this is all the code I have in my site:

Any assistance would be helpful as re-naming the search text would clarify my UX quite a bit... 

Thank you!

/* Small Button Styling */
.sqs-block-button-element--small {
 width: 35% !important;
}

/* Medium Button Styling */
.sqs-block-button-element--medium {
 width: 55% !important;
}

/* Large Button Styling */
.sqs-block-button-element--large {
 width: 55% !important;
}

/* Newer posts */
nav.blog-list-pagination .prev-label {
    visibility: hidden;
}
nav.blog-list-pagination .prev-label:before {
    visibility: visible;
    content: "More Posts";
}
/* Older posts */
nav.blog-list-pagination .next-label {
    visibility: hidden;
}
nav.blog-list-pagination .next-label:after {
    visibility: visible;
    content: "More Posts";
  font-size: 26px !important;
  font-weight: 500;
}
/* Summary Block Styling */
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-family: Futura;
font-weight: 500;
font-size: 24px !important;
color: 042426;
 } }
/* Hide Shop Categories */
.products.collection-content-wrapper .nested-category-children {
  
  display: none;
  
  }

//--Slideshow: Reel Buttons
.gallery-reel-control-btn {color: #000000}
.gallery-reel-control-btn::before{background-color: #F7F6F3}

/* Mobile Menu Font */
.header-menu-nav-item a {
    font-size: 18px;
}

Hi. Do you still need help? Can you share link to page where you add search box?

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
  • 9 months later...
On 3/25/2021 at 11:59 AM, monicam93 said:

Hi I'm on 7.1 and having the same problem.

https://ibb.co/VDPfcv3

Diversify.film

I want to change the placeholder text.

I used this:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
 $(document).ready(function() {
	$(".Header-search .Header-search-form-input").attr('placeholder','new text');
});
</script>

Screen Shot 2021-03-25 at 12.58.29 AM.png

Hi,

Settings > Advanced > Code Injection

Not Custom CSS

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
  • 4 months later...

Hi Guys

The above code works for me which is great and I have managed to change the text that appears in the searchbox but is it possible to make the text bold?

I have tried a few things but no luck

 

thanks
Jay

 

Link to comment
  • 7 months later...
3 hours ago, black_rooster said:

Is there any chance to change the placeholder text in search textbox with CSS?

No. CSS changes how the structure of things look. In the case of placeholder text, which is structural, you need JavaScript.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.