A Shopify store owner using the Craft theme wants to replace the search icon in the upper left corner with a visible search box instead of the modal popup.
Initial Problem:
Solution Process:
header.liquid, header-search.liquid, and base.cssheader-search.liquid that removed conditional statements to display the search box directlyFinal Resolution:
base.css to hide the right-side search modalOutcome:
Successfully implemented with all issues resolved. The search box now displays as intended in the header’s left area with proper alignment and functionality.
Hello,
I am working with the Craft theme.
I would like to remove the search icon in the upper left hand corner and replace it with a search box.
I’ve attached a screen shot with markups
My page address is:
https://aerbzf-hp.myshopify.com/
I’m familier with editing the code, but just need to know what files to edit, and the needed code.
Thank You,
Kent
@lakeside-molds - check if you have header.liquid or header-group.liquid file, you will need to copy search modal code in the place where you want search to appear. I recommend to create copy of the active theme and make changes to it. Once it works then you can make it live
Hello,
I have a header.liquid file.
I don’t have a header-group.liquid file, however I do have a header-group.json file.
Yes, I’m working with a sandbox version of the page.
Thanks,
Kent
@lakeside-molds - check search modal in header file, check what file name do you have in json file
Here is a portion of the code from the header file ( I hope I included the section you are looking for )
I will reply in a separate reply with your question on the json file
{%- liquid if section.settings.menu != blank render 'header-drawer' endifif section.settings.logo_position == ‘top-center’ or section.settings.menu == blank
render ‘header-search’, input_id: ‘Search-In-Modal-1’
endif
-%}
{%- if section.settings.logo_position != ‘middle-center’ -%}
{%- if request.page_type == ‘index’ -%}
{%- liquid
if section.settings.menu != blank
if section.settings.menu_type_desktop == ‘dropdown’
render ‘header-dropdown-menu’
elsif section.settings.menu_type_desktop != ‘drawer’
render ‘header-mega-menu’
endif
endif
%}
@lakeside-molds check this file ---- header-search
Here is my code from the json file
{
“name”: “t:sections.header.name”,
“type”: “header”,
“sections”: {
“header”: {
“type”: “header”,
“settings”: {
“logo_position”: “top-center”,
“menu”: “main-menu”,
“menu_type_desktop”: “drawer”,
“sticky_header_type”: “always”,
“show_line_separator”: true,
“color_scheme”: “scheme-1”,
“menu_color_scheme”: “scheme-1”,
“enable_country_selector”: true,
“enable_language_selector”: true,
“enable_customer_avatar”: true,
“mobile_logo_position”: “center”,
“margin_bottom”: 0,
“padding_top”: 20,
“padding_bottom”: 20
}
},
“announcement-bar”: {
“type”: “announcement-bar”,
“blocks”: {
“announcement-bar-0”: {
“type”: “announcement”,
“settings”: {
“text”: “- Welcome to Lakeside Molds Online Store - ( Tel: 701-520-1872 )”,
“link”: “”
}
}
},
“block_order”: [
“announcement-bar-0”
],
“settings”: {
“color_scheme”: “scheme-4”,
“show_line_separator”: true,
“show_social”: false,
“auto_rotate”: false,
“change_slides_speed”: 5,
“enable_country_selector”: false,
“enable_language_selector”: false
}
}
},
“order”: [
“header”,
“announcement-bar”
]
}
@lakeside-molds check this file ---- header-search
Here is my header-search
{% comment %}
Renders a header search modal. Should be used with ‘header.liquid’
Accepts:
Usage:
{% render ‘header-search’, input_id: ‘My-Id’%}
{% endcomment %}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
This is my header-search.liquid
{% comment %}
Renders a header search modal. Should be used with ‘header.liquid’
Accepts:
Usage:
{% render ‘header-search’, input_id: ‘My-Id’%}
{% endcomment %}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
@lakeside-molds - this is the search code, try this, I have removed few if conditions to make it work, please check and make necessary updates
Hello,
I placed that code into my header-search.liquid file. ( is that correct? )
That didn’t appear to make any changes to the page.
Here is a copy of the header-search.liquid file after I inserted your code into it.
{% comment %}
Renders a header search modal. Should be used with ‘header.liquid’
Accepts:
Usage:
{% render ‘header-search’, input_id: ‘My-Id’%}
{% endcomment %}
<button
type=“button”
class=“search-modal__close-button modal__close-button link link–text focus-inset”
aria-label=“{{ ‘accessibility.close’ | t }}”
Hello,
I went back and replaced the header-search.liquid file with only your code ( in other words I removed the code that was above and below it ) and that seemed to work. The only glitch is that there are ( 2 ) search boxes now. If we could get rid of the one on the right side, and then we should be good to go. ( see screen shot )
Also I’m wondering if the width of the box on the left was just a little narrower it may line up in the center vertically?
@lakeside-molds - to hide search on right, please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.header__icons .search-modal__content{display:none; visibility:hidden;}
to make it center
@media screen and (min-width: 750px) {
.search-modal__content {grid-area: left-icons;}
}
Yes, that did the trick!!! Thank You very Much!
I will drop you an email.
Thanks again…
Kent
I just had one last item… Not sure if this was something that just happened with these recent code changes or if it was like this before… but I just noticed that in order to click on the word “menu” in the upper left hand corner that the only letter that has the clickable link is the letter “M” on the word menu… so in other words you have to have the pointer right on the perfect spot to get the menu to activate.
@lakeside-molds – add margin to it and check
@media screen and (min-width: 750px) {
.search-modal__content {grid-area: left-icons; margin-left: 40px;}
}
Yes, that did the trick. Thank You !
@lakeside-molds great, do let me know if you need any more updates, I have replied on email.