Re: Prestige Mobile Search Icon

How to move the search icon to the mobile header in Prestige theme?

12little-jinny
Tourist
6 0 2

Hi,

In Prestige theme, the search bar is inside the sidebar menu. 

Is there a way to pull out that search button on the mobile header next to the hamburger menu or next to the cart icon? 

Screen Shot 2020-10-26 at 10.35.27 AM.png     Screen Shot 2020-10-26 at 10.36.05 AM.png

Replies 33 (33)

KetanKumar
Shopify Partner
37133 3648 12061

Hello, @12little-jinny 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
12little-jinny
Tourist
6 0 2

@KetanKumar Thank you!

 

twelvelittle.com

twelve-little-2.myshopify.com

KetanKumar
Shopify Partner
37133 3648 12061

@12little-jinny 

Thanks for details 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AS22
Visitor
1 0 1

Hi Ketan

I have sent a personal message to you regarding this. Please check.

Thanks

KetanKumar
Shopify Partner
37133 3648 12061

@AS22 

thanks i will check and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
37133 3648 12061

@AS22 

thanks for details i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ayansul
Visitor
1 0 0

i have same problem , search idon dosnt appear in mobile

Johnny2121
Visitor
1 0 1

Hey i have the same problem can you help me aswell?

UmairA
Shopify Partner
1106 101 226

Hey @Johnny2121,

Are you able to provide your store URL? Thanks

KetanKumar
Shopify Partner
37133 3648 12061

@Johnny2121 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tay17
Visitor
2 0 2

Hi, me website search icon is not showing and I don’t know why

KetanKumar
Shopify Partner
37133 3648 12061

@Tay17 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tay17
Visitor
2 0 2

Thanks, my url is: nasebury.com

KetanKumar
Shopify Partner
37133 3648 12061

@Tay17 

thanks for url

i have checked the current only textbase do you need a search icon?

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
7 0 4

Hi,

In Prestige theme, the search bar is inside the sidebar menu in Mobile view.

Is there a way to pull out that search button on the mobile header next to the main menu as an icon next to the cart icon.

Please help 

KetanKumar
Shopify Partner
37133 3648 12061

@saffronthreads 

Sorry, you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
7 0 4
KetanKumar
Shopify Partner
37133 3648 12061

@saffronthreads 

thanks for url

sorry i can't see any icon

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
7 0 4

Yes. There is no Icon. I want to add a Search icon alongside the existing Cart Icon in Mobile view.

Currently the search option is appearing in sidebar which is not useful. Please help.

 

Attaching screenshot of home page in mobile view highlighting where we need the search Icon

Screenshot_20211016-150722.jpg

KetanKumar
Shopify Partner
37133 3648 12061

@saffronthreads 

you have check your theme setting?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
7 0 4

In mobile view theme setting of home page only Currency Conversion option is available. No option to add a search icon

KetanKumar
Shopify Partner
37133 3648 12061

@saffronthreads 

ok yes its possible to add custom code search icon 

please share header code and search svg icon

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
saffronthreads
Tourist
7 0 4

{%- 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" title="{{ 'header.navigation.currency_selector' | t | escape }}">
{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,BWP,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 -%}

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_1_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

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

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_2_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

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

<img class="Header__LogoImage Header__LogoImage--primary"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">

{%- 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' -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- 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>

<style>
{%- if section.settings.use_sticky_header -%}
:root {
--use-sticky-header: 1;
--use-unsticky-header: 0;
}

.shopify-section--header {
position: -webkit-sticky;
position: sticky;
}
{%- else -%}
:root {
--use-sticky-header: 0;
--use-unsticky-header: 1;
}
{%- endif -%}

{%- if section.settings.logo -%}
@media screen and (max-width: 640px) {
.Header__LogoImage {
max-width: {{ section.settings.mobile_logo_max_width }}px;
}
}
{%- 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>

<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>

{% 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": "range",
"id": "mobile_logo_max_width",
"min": 50,
"max": 200,
"step": 5,
"unit": "px",
"label": "Mobile logo image width",
"default": 90
},
{
"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 %}

Zavhdx
Tourist
3 0 1

Hi i have the same issue, can you get in contact with me?

KetanKumar
Shopify Partner
37133 3648 12061

@Zavhdx 

Sorry, you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zavhdx
Tourist
3 0 1
Click to expand...
 

I just opened my store so it has password to access it.

Zavhdx
Tourist
3 0 1

I just need a search icon on my prestige theme

KetanKumar
Shopify Partner
37133 3648 12061

@Zavhdx 

can you please share store preview url and header code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
john2636
Visitor
2 0 0

Hello, same problem here. Trying to get a Search Icon on mobile site.

 

 

Store: https://threadquarters.co

Password: "cheang"

 

Here is my Header code:

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

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_1_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

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

<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_2_image.alt | escape }}">

<span class="Image__Loader"></span>
</div>

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

<img class="Header__LogoImage Header__LogoImage--primary"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 3
}} 3
x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">

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

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

<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>

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

12little-jinny
Tourist
6 0 2

Hi, In the end, I just fixed it by myself.

If you update the theme from the theme store, the menu shows up again.

The only downside is, you have to update the banners and maybe some apps. 

intrepidd
Visitor
1 0 0

Hey can you please help me with this exact same issue as she is having with 

In Prestige theme, the search bar is inside the sidebar menu. 

Is there a way to pull out that search button on the mobile header next to the hamburger menu or next to the cart icon?  my store URL is https://lntrepid.shop/

martagdok
Visitor
1 0 1

Hi, I'm having the same exact issue. Could you please share the code to add the search button on mobile? 
https://seakerpresets.com/

KetanKumar
Shopify Partner
37133 3648 12061

@martagdok 

oh sorry for that issue but i can see on mobile search icon, 

can you please share more details where did you add this search icon!

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing