how to add search box instead of search icon

[RivaajEthnic]

Hi,

Can you please help on how to add search box instead of search icon. Currently when i click on search icon it covers the entire page. Would preferably like to have search box width as in below demo ella theme website and it should not cover entire page when some one clicks on search box like it does in our website.

Demo site : https://new-ella-demo.myshopify.com/

Site where change needs to be implemented : https://www.rivaajethnic.com/

Many thanks!

[DaisyVo]

Hi @RivaajEthnic 

To add a search box in the header without it covering the entire page when clicked, follow these steps:

1. In your Shopify admin, go to Online Store > Themes and select Edit code.
2. Open the header.liquid file.
3. Find the code for the search icon (often inside a <button> or <a> tag).
4. Replace it with a search input field, like this:

<input type="text" placeholder="Search..." style="width: 200px; border: 1px solid black; padding: 5px;">

1. Adjust the width and styling as needed.

To replicate the Ella theme’s minimal search bar, add custom CSS in your theme.css file for a polished look.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy