Change search icon to search box in Craft Theme

[lakeside-molds]

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

[suyash1]

@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

[lakeside-molds]

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

[suyash1]

@lakeside-molds - check search modal in header file, check what file name do you have in json file

[lakeside-molds]

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

<header class="header header--{{ section.settings.logo_position }} header--mobile-{{ section.settings.mobile_logo_position }} page-width{% if section.settings.menu_type_desktop == 'drawer' %} drawer-menu{% endif %}{% if section.settings.menu != blank %} header--has-menu{% endif %}{% if has_app_block %} header--has-app{% endif %}{% if social_links %} header--has-social{% endif %}{% if shop.customer_accounts_enabled %} header--has-account{% endif %}{% if localization_forms %} header--has-localizations{% endif %}">
{%- liquid
if section.settings.menu != blank
render 'header-drawer'
endif

if 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' -%}
<h1 class="header__heading">
{%- endif -%}
<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if settings.logo != blank -%}
<div class="header__heading-logo-wrapper">
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
{% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %}
{% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %}
{{ settings.logo | image_url: width: 600 | image_tag:
class: 'header__heading-logo motion-reduce',
widths: widths,
height: logo_height,
width: settings.logo_width,
alt: logo_alt,
sizes: sizes,
preload: true
}}
</div>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- if request.page_type == 'index' -%}
</h1>
{%- endif -%}
{%- endif -%}

{%- 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
%}

[suyash1]

@lakeside-molds check this file ---- header-search

[lakeside-molds]

Here is my header-search

{% 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 %}

<details-modal class="header__search">
<details>
<summary
class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
aria-haspopup="dialog"
aria-label="{{ 'general.search.search' | t }}"
>
<span>
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper header__icon-close">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</span>
</summary>
<div
class="search-modal modal__content gradient"
role="dialog"
aria-modal="true"
aria-label="{{ 'general.search.search' | t }}"
>
<div class="modal-overlay"></div>
<div
class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
tabindex="-1"
>
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
{%- else -%}
<search-form class="search-modal__form">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-reset.svg' | inline_asset_content -}}
</span>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
</button>
</div>

{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>

<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
{%- endif -%}
</form>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- else -%}
</search-form>
{%- endif -%}
<button
type="button"
class="search-modal__close-button modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</button>
</div>
</div>
</details>
</details-modal>

[lakeside-molds]

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"
]
}

[suyash1]

@lakeside-molds check this file ---- header-search

[lakeside-molds]

This is my header-search.liquid

{% 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 %}

<details-modal class="header__search">
<details>
<summary
class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
aria-haspopup="dialog"
aria-label="{{ 'general.search.search' | t }}"
>
<span>
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper header__icon-close">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</span>
</summary>
<div
class="search-modal modal__content gradient"
role="dialog"
aria-modal="true"
aria-label="{{ 'general.search.search' | t }}"
>
<div class="modal-overlay"></div>
<div
class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
tabindex="-1"
>
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
{%- else -%}
<search-form class="search-modal__form">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-reset.svg' | inline_asset_content -}}
</span>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
</button>
</div>

{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>

<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
{%- endif -%}
</form>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- else -%}
</search-form>
{%- endif -%}
<button
type="button"
class="search-modal__close-button modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</button>
</div>
</div>
</details>
</details-modal>

[suyash1]

@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

<div
class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
tabindex="-1"
>

<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">

<search-form class="search-modal__form">

<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-reset.svg' | inline_asset_content -}}
</span>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
</button>
</div>


<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>

<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>

</form>

</predictive-search>

</search-form>

<button
type="button"
class="search-modal__close-button modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</button>
</div>

[lakeside-molds]

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:
- input_id: {String} Id for the search input element (required)

Usage:
{% render 'header-search', input_id: 'My-Id'%}
{% endcomment %}

<details-modal class="header__search">
<details>
<summary
class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
aria-haspopup="dialog"
aria-label="{{ 'general.search.search' | t }}"
>
<span>
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper header__icon-close">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</span>
</summary>
<div
class="search-modal modal__content gradient"
role="dialog"
aria-modal="true"
aria-label="{{ 'general.search.search' | t }}"
>
<div class="modal-overlay"></div>
<div
class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
tabindex="-1"
>

<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">

<search-form class="search-modal__form">

<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-reset.svg' | inline_asset_content -}}
</span>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
</button>
</div>

<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>

<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>

</form>

</predictive-search>

</search-form>

<button
type="button"
class="search-modal__close-button modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-close.svg' | inline_asset_content -}}
</span>
</button>
</div>
</div>
</details>
</details-modal>

[lakeside-molds]

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?

[suyash1 · Accepted solution]

@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;}
}

[lakeside-molds]

Yes, that did the trick!!!   Thank You very Much!

I will drop you an email.

Thanks again...

Kent

[lakeside-molds]

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.

[suyash1]

@lakeside-molds -- add margin to it and check

@media screen and (min-width: 750px) {
.search-modal__content {grid-area: left-icons; margin-left: 40px;}
}

[lakeside-molds]

Yes, that did the trick.   Thank You !

[suyash1]

@lakeside-molds  great, do let me know if you need any more updates, I have replied on email.