Icono de buscar en el header

andre65198 · ‎02-08-2023

Hola! quisiera añádir un icono de buscar al lado el carrito de busquedda que aparezca en el movil para que las personas busquen los productos

LES COMPARTO EL CODIGO

{%- 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 -%}
<div class="Header__CurrencySelector Text--subdued Heading Link Link--primary u-h8 hidden-pocket hidden-lap">
<div class="Select Select--transparent">
<select class="CurrencySelector__Select u-h8">
{%- 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 -%}

<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>

{%- for code in supported_codes -%}
{%- if codes contains code -%}
<option value="{{ code }}">{{ code }}</option>
{%- endif -%}
{%- endfor -%}
</select>

{%- include 'icon' with 'select-arrow' -%}
</div>
</div>
{%- 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 -%}

<header id="section-{{ section.id }}"
class="Header Header--{{ section.settings.navigation_style }} {% unless section.settings.navigation_style == 'inline' %}Header--initialized{% endunless %} {% if use_transparent_header %}Header--transparent{% endif %}"
data-section-id="{{ section.id }}"
data-section-type="header"
data-section-settings='{{ section_settings }}'
role="banner">
<div class="Header__Wrapper">
<div class="Header__FlexItem Header__FlexItem--fill">
<button class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" aria-expanded="false" data-action="open-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.open_sidebar' | t }}">
<span class="hidden-tablet-and-up">{%- include 'icon' with 'nav' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'nav-desktop' -%}</span>
</button>

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

<nav class="Header__MainNav hidden-pocket hidden-lap" aria-label="{{ 'header.navigation.title' | t }}">
<ul class="HorizontalList HorizontalList--spacingExtraLoose">
{%- 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 -%}

<div class="MegaMenu {% if push_image_count != 0 and link.links.size == 0 %}MegaMenu--spacingCenter{% elsif should_space_evenly %}MegaMenu--spacingEvenly{% endif %} {% if push_image_count == 0 and link.links.size > 4 %}MegaMenu--grid{% endif %}" aria-hidden="true" {{ block.shopify_attributes }}>
<div class="MegaMenu__Inner">
{%- for sub_link in link.links -%}
<div class="MegaMenu__Item MegaMenu__Item--fit">
<a href="{{ sub_link.url }}" class="MegaMenu__Title Heading Text--subdued u-h7">{{ sub_link.title | title }}</a>

{%- if sub_link.links != blank -%}
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}

{%- if push_image_count > 0 -%}
<div class="MegaMenu__Item" style="{% if push_image_count == 1 %}width: 370px; min-width: 250px;{% else %}width: 660px; min-width: 425px;{% endif %}">
{%- if block.settings.push_1_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_1_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_1_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}

{%- if block.settings.push_1_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_1_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_1_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_1_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}

{%- if block.settings.push_2_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_2_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_2_url }}">
{%- endif -%}

{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}

{%- if block.settings.push_2_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_2_heading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_2_subheading | escape }}</p>
{%- endif -%}

{%- if block.settings.push_2_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
{%- elsif link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_link in link.links -%}
<li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}</a>

{%- if sub_link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endcapture -%}

<li class="HorizontalList__Item {% if link.links == blank and link.active %}is-active{% endif %}" {% if menu_item_dropdown != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ link.url }}" class="Heading u-h6">
{{- link.title | escape -}}

{%- if use_mega_menu or menu_item_dropdown == blank -%}
<span class="Header__LinkSpacer">{{ link.title | escape }}</span>
{%- endif -%}
</a>

{{- menu_item_dropdown -}}
</li>
{%- endfor -%}
</ul>
</nav>

{{- currency_conversion_select -}}
{%- endunless -%}
</div>

{%- capture header_logo -%}
<a href="/" class="Header__LogoLink">
{%- 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 -%}
<img class="Header__LogoImage Header__LogoImage--transparent"
src="{{ section.settings.transparent_logo | img_url: image_size }}"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
{%- endif -%}
{%- else -%}
<span class="Heading u-h4">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endcapture -%}

<div class="Header__FlexItem">
{%- if template == 'index' -%}
<h1 class="Header__Logo">{{ header_logo }}</h1>
{%- else -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- endif -%}
</div>

<div class="Header__FlexItem Header__FlexItem--fill">
{%- unless use_sidebar_menu -%}
<nav class="Header__SecondaryNav">
<ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
<li class="HorizontalList__Item">
{{ currency_conversion_select }}
</li>
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}
<li class="HorizontalList__Item">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="Heading Link Link--primary Text--subdued u-h8">
{{- 'header.navigation.account' | t -}}
</a>
</li>
{%- endif -%}

<li class="HorizontalList__Item">
<a href="/search" class="Heading Link Link--primary Text--subdued u-h8" data-action="open-modal" aria-controls="Search">{{ 'header.navigation.search' | t }}</a>
</li>

<li class="HorizontalList__Item">
<a href="/cart" class="Heading u-h6" {% unless template == 'cart' or settings.cart_type == 'page' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endunless %}>{{ 'header.navigation.cart' | t }} (<span class="Header__CartCount">{{ cart.item_count }}</span>)</a>
</li>
</ul>
</nav>
{%- 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 %}>
<span class="hidden-tablet-and-up">{%- include 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart.item_count > 0 %}is-visible{% endif %}"></span>
</a>
</div>
</div>
</header>

.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 -%}
</style>

{% 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](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
},
{
"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 %}

NewRenato · ‎03-03-2023

Hola que tema estas usando?

Icono de buscar en el header

Icono de buscar en el header

Artículos del Blog de la Comunidad