Shopify Polaris and the missing placeholder

Standard

I have recently been working on a Shopify app and came across a minor annoyance with a ResourceList that I solved, and then figured out why it was happening.

When adding a filter, it provides a search box, and all the examples had a placerholder in it, except mine did not have the placeholder.

While a minor thing I dug into the Shopify code and found I could pass in a queryPlaceholder property to set my own placeholder.

By setting the specific text it showed up just like I wanted. However in the component code you can see it will set a default placeholder if you don’t provide one.

When going back through the getting started directions, there is a spot to load english translations and that is what I was missing. It was an easy thing to miss but if you are missing a default placeholder, make sure you loaded the translations!

Leave a Reply

Your email address will not be published.