How to add a search icon next to the cart on mobile view?

[andre65198]

Hello! I would like to add a search icon next to the search cart that appears on the mobile so that people can search for the products

I SHARE THE CODE of header.liquid

{%- assign use_transparent_header = false -%}

{%- if template == ‘index’ and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == ‘collection’ and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != ‘no-image’ -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != ‘sidebar’ -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}

{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%} {%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%} {{ shop.currency }} {%- for code in supported_codes -%} {%- if codes contains code -%} {{ code }} {%- endif -%} {%- endfor -%}

{%- include ‘icon’ with ‘select-arrow’ -%}

{%- endcapture -%} {%- endif -%}

{%- comment -%}

HEADER CONTENT

{%- endcomment -%}

{%- capture section_settings -%}
{
“navigationStyle”: {{ section.settings.navigation_style | json }},
“hasTransparentHeader”: {% if use_transparent_header %}true{% else %}false{% endif %},
“isSticky”: {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- include 'icon' with 'nav' -%} {%- include 'icon' with 'nav-desktop' -%}

{%- comment -%}

DESKTOP NAVIGATION (if not using the sidebar mode)

{%- endcomment -%}

{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: ‘main-menu’ -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

{%- assign mega_menu_names = ‘’ -%}

{%- for block in section.blocks -%}
{%- if block.type == ‘mega_menu’ -%}
{%- assign mega_menu_names = mega_menu_names | append: block.settings.navigation_mega_menu | append: ‘,’ -%}
{%- endif -%}
{%- endfor -%}

{%- assign mega_menu_names = mega_menu_names | downcase | split: ‘,’ | compact -%}

{%- for link in main_menu.links -%} {%- assign downcased_link_title = link.title | downcase -%} {%- assign use_mega_menu = false -%}

{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}

{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}

{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}

{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- assign should_space_evenly = false -%}

{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- for sub_link in link.links -%}
{{ sub_link.title | title }}
{%- if sub_link.links != blank -%}
{%- for sub_sub_link in sub_link.links -%}
• {{ sub_sub_link.title | escape }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- if push_image_count > 0 -%}
{%- if block.settings.push_1_image -%}
{%- if block.settings.push_1_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}
{%- if block.settings.push_1_heading != blank -%}
{{ block.settings.push_1_heading | escape }}
{%- endif -%}
{%- if block.settings.push_1_subheading != blank -%}
{{ block.settings.push_1_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_1_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- if block.settings.push_2_image -%}
{%- if block.settings.push_2_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}
{%- if block.settings.push_2_heading != blank -%}
{{ block.settings.push_2_heading | escape }}
{%- endif -%}
{%- if block.settings.push_2_subheading != blank -%}
{{ block.settings.push_2_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_2_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%} {%- elsif link.links != blank -%}
{%- for sub_link in link.links -%}
• {{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}

  {%- if sub_link.links != blank -%}

  {%- for sub_sub_link in sub_link.links -%}
  • {{ sub_sub_link.title | escape }}
  {%- endfor -%}
  {%- endif -%}
{%- endfor -%}
{%- endif -%} {%- endcapture -%}
• {{- link.title | escape -}}

  {%- if use_mega_menu or menu_item_dropdown == blank -%}
  {{ link.title | escape }}
  {%- endif -%}
  

  {{- menu_item_dropdown -}}

{%- endfor -%}

{{- currency_conversion_select -}}
{%- endunless -%}

{%- capture header_logo -%}

{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}

{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- endcapture -%}

{%- if template == 'index' -%}

{{ header_logo }}

{%- else -%}

{{ header_logo }}

{%- endif -%}

{%- unless use_sidebar_menu -%}

{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
• {{ currency_conversion_select }}
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}

• {{- 'header.navigation.account' | t -}}
{%- endif -%}
• {{ 'header.navigation.search' | t }}
• {{ 'header.navigation.cart' | t }} ({{ cart.item_count }})

{%- endunless -%}

<a href=“/cart” class=“Header__Icon Icon-Wrapper Icon-Wrapper–clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}” {% if settings.cart_type == ‘drawer’ %}data-action=“open-drawer” data-drawer-id=“sidebar-cart” aria-expanded=“false” aria-label=“{{ ‘header.navigation.open_cart’ | t }}”{% endif %}>
{%- include ‘icon’ with ‘cart’ -%}
{%- include ‘icon’ with ‘cart-desktop’ -%}

{%- if section.settings.use_sticky_header -%} :root { --use-sticky-header: 1; } .shopify-section--header { position: -webkit-sticky; position: sticky; } {%- endif -%} {%- if use_transparent_header -%} :root { --header-is-not-transparent: 0; --header-is-transparent: 1; } .shopify-section--header { margin-bottom: calc(-1 * var(--header-height)); } .supports-sticky .Header--transparent { box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset; color: {{ section.settings.transparent_text_color }}; } {%- else -%} :root { --header-is-not-transparent: 1; --header-is-transparent: 0; } {%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “use_sticky_header”,
“label”: “Use sticky header”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”,
“info”: “200 x 60px png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 350,
“step”: 5,
“unit”: “px”,
“label”: “Logo image width”,
“default”: 140
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “navigation_menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “navigation_style”,
“label”: “Navigation style”,
“info”: “Setting will default to center style if screen width cannot fit all the links.”,
“options”: [
{
“value”: “sidebar”,
“label”: “Sidebar”
},
{
“value”: “inline”,
“label”: “Inline”
},
{
“value”: “center”,
“label”: “Center”
}
],
“default”: “inline”
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header”,
“label”: “Enable on homepage”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header_collection”,
“label”: “Enable on collection pages”,
“info”: “Only if the collection has an image.”,
“default”: false
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text/icon color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Logo image”,
“info”: “200 x 60px png recommended”
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “navigation_mega_menu”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “header”,
“content”: “Image push 1”
},
{
“type”: “image_picker”,
“id”: “push_1_image”,
“label”: “Image”,
“info”: “740 x 460 px jpg recommended”
},
{
“type”: “text”,
“id”: “push_1_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_1_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_1_url”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Image push 2”
},
{
“type”: “image_picker”,
“id”: “push_2_image”,
“label”: “Image”,
“info”: “740 x 460 px jpg recommended”
},
{
“type”: “text”,
“id”: “push_2_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_2_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_2_url”,
“label”: “Link”
}
]
}
]
}
{% endschema %}

[StoreSurgeon]

Hi @andre65198

Please Share Your store Url and password if enable.

Thanks

[andre65198]

Hello! Thank you very much for answering, the website is https://maisonparfumsbolivia.com, it does not contain a password, it would be very helpful if you could put the search engine with a magnifying glass icon on your mobile

[andre65198]

@StoreSurgeon

[GemPages]

Hello @andre65198

It looks like you figured out the solution to your problem on your own. It displays well for me : https://prnt.sc/5eN3YX-g0HEK

Looking forward to your response.
Best regards,
GemPages Support Team