Keep search bar open and change text - Studio theme

Store Design
1

Hello, I am using the Studio theme and I want to keep the search bar open rather than collapsed and change the text inside to say something else. Is that possible?

2

Hi @CMolnar ,

This is Victor from PageFly - Shopify Page Builder App.

Please help me to add some custom code to your theme CSS file. Should follow the steps below:

Step 1: Online store > Themes > theme.liquid

Step 2: Paste this code above 

setInterval(() => {

        var search = document.querySelector('.header__search > details')

        var input = search.querySelector('.field__label')

        input.textContent = 'custom text'

      search.open = true

    clearInterval()

      },100)

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Thanks Victor, I didn’t get it to work, I am not that great at coding, but I can usually get around with copy and paste. perhaps I am putting it in wrong. I am using Boost Commerce, I reached out to the help center at Boost and they suggested reaching out to Shopify

This is my site.

https://imgprojects.com/

Thanks

4

Hi @CMolnar ,

Sorry for the late response. Please try copy and paste this code like the screenshot below

PageFlyVictor_1-1670831506469.png
PageFlyVictor_1-1670831506469.png1600×716 156 KB

Hope this can help you solve the issue.

Best regards,

Victor | PageFly

1 Like
5

Thank you very much! This worked great for me, but I had two questions I was hoping you could answer. The first is how can I alter this code to make it work on both mobile and desktop displays (it currently only works on the desktop version). The second question is what can I change to move the search bar (it is currently at the top of my header and I’d prefer it at the bottom, or even within the template).