I’m trying to replicate the GOAT.com header search bar in my Shopify store using Dawn 15.4.0.
I want:
A persistent search bar in the header (not just a search icon).
Placeholder text that changes automatically every few seconds, like “Search sneakers…”, “Search jackets…”, etc., with a smooth rotation animation where the text moves from top to bottom as it changes.
The search bar to be visible immediately on page load and work on both desktop and mobile.
What’s the best way to implement this in Dawn?
Is it something I can achieve with Liquid, CSS, and JS?
Or is there a Shopify app that can replicate this effect?
I’d love any guidance, examples, or tips to make a GOAT-style search bar with animated rotating placeholder on Dawn.
Hi @crepscity thats an advanced theme customization beyond the scope of the forums for multiple reasons not to mentions specifically tailoring it to a brand.
To DIY you gotta do the work, google the title of your posts for html placeholders for any input field and use research javascript tailored to the specific themes structure.
Or if dev savvy use browser dev tools(f12 key) to see how the sample site is doing things.
And then work out what all the different texts are, the styling, the animation timings, etc etc etc etc etc etc
Or reach out to me for theme customization services.
You can mimic the rotating search on GOAT by adding a static search bar in header.liquid, then replace placeholder text with a small JS loop with a CSS fade or slide. Dawn handles this cleanly. No app unless you want fancy autocomplete. Make the script as lightweight as possible so load times stay fast.
thats an advanced theme customization beyond the scope of the forums for multiple reasons not to mentions specifically tailoring it to a brand.