Hello
I need full search bar on mobile device instead of search icon on my Dawn theme. Just like below website.
Topic summary
A user wants to display a full search bar on mobile devices instead of the default search icon in Shopify’s Dawn theme, similar to a reference website shown in a screenshot.
Initial Guidance:
- The task requires modifying Liquid code in the header.liquid or header-group.liquid file
- One suggestion was to locate the modal search code and reposition it without conditions
- Recommendation to back up the theme before making changes
Proposed Solution:
BSS-TekLabs provided custom CSS/JavaScript code to be added to theme.liquid before the </head> tag. The solution was updated multiple times to refine the implementation, with screenshots showing the expected mobile search bar appearance.
Current Status:
The user reported an issue with the initial code implementation (shown in a screenshot). BSS-TekLabs updated the code several times to address this. Another user later mentioned being unable to view the code snippets. The discussion remains open as the final implementation outcome is unclear.
1 Like
@Jayesh-Agarwal - are you familiar with the liquid coding? this task will need code changes
Yes
@Jayesh-Agarwal - check header.liquid file, you must be having modal search in it, take that code without conditions and add it in the place you want
Can you send me the exact changes I need to do in header.liquid with codes
@Jayesh-Agarwal you have the theme file , you will find header file in it
Yes. I got theme.liquid file. What code charges I need to do in that. Can you send me the code?
@Jayesh-Agarwal - actually I do not have the code as I do not own the store, but check you have a file name header.liquid or header-group.liquid… check if you have modal search
Hello,
You can make adjustments to the Shopify Liquid code if you’re familiar with coding. Alternatively, you can use pre-built header sections, which can help you achieve your desired design without custom coding.
Please remember to create a backup of your current theme before making any changes to ensure you can restore it if needed.
- Here is the solution for you @Jayesh-Agarwal
- Please follow these steps:
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before and press ‘Save’ to save it
1 Like
2 Likes
- This is the result you will get:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @Jayesh-Agarwal .
1 Like
I have updated the code. Please add it again @Jayesh-Agarwal .
1 Like
1 Like
1 Like
- This is the result you will get @Jayesh-Agarwal :
1 Like
Hi, ‘I’m unable to see the code.