Hey! I’m trying to move my search bar to the middle and have it expand with my placeholder. The first image is what it currently looks like, and the second is what I had in mind. My store link is here, and I am using the sense theme. Any help would be greatly appreciated!
Topic summary
A user seeks to customize their search bar on a Shopify store using the Sense theme. They want to:
- Center the search bar horizontally
- Make it expand to accommodate the placeholder text
The request includes before/after mockup images showing the desired layout change.
Solution Provided:
Another user (EBOOST) offers a code-based solution:
- Navigate to Online Store → Themes → Edit Code
- Locate
snippets/header-search.liquid - Replace existing code with provided markup
The original poster confirms the initial code works but requests additional modifications to center and expand the search bar. EBOOST responds with updated code to address these requirements.
Status: The discussion appears ongoing, with iterative code solutions being provided to refine the search bar positioning and width.
Hi @editlt ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Snippets/header-search.liquid
- Replace code in this file with code below:
{% comment %}
Renders a header search modal. Should be used with 'header.liquid'
Accepts:
- input_id: {String} Id for the search input element (required)
Usage:
{% render 'header-search', input_id: 'My-Id'%}
{% endcomment %}
This is great! Thanks so much. Do you think you could also move it to the center and expand it? That would be much appreciated.
Hi,
You can use code below to replace old code:
{% comment %}
Renders a header search modal. Should be used with 'header.liquid'
Accepts:
- input_id: {String} Id for the search input element (required)
Usage:
{% render 'header-search', input_id: 'My-Id'%}
{% endcomment %}
1 Like