Re: Permanent Search Bar on Hero Image

Solved

How can I add a sticky search bar on a website's hero image?

Andrew-Alcott
Excursionist
28 4 14

Hi there, 

 

Our business www.komerco.com.au would like to have a sticky search bar on top of the hero image on the website. We are currently using the debut theme. Any ideas on how best to do this?

Many Thanks 

Accepted Solution (1)
Lixon_Louis
Shopify Partner
1193 35 268

This is an accepted solution.

@Andrew-Alcott You can do this in two simple steps. Try it on duplicate theme first, instead of the live theme

Open sections/hero.liquid  ( Image with text overlay section)  , locate <div class="hero__inner"> 

Copy the search-form code from templates/search.liquid (line 21-53)  and paste it before the closing tag of  <div class="page-width text-center">, which is the child element of <div class="hero__inner">. refer screenshot below.

If you need to regulate the width of search-form you can use the following CSS selector 

.hero__inner > form.search-form { max-width: xx}

 

Finally the updated code inside <div class="hero__inner"></div> should look like below. Let me know how it goes.  ("theme_version": "17.12.1")

 

      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
          <form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
            <div class="input-group input-group--nowrap">
              <div class="input-group__field input-group__field--connected search-form__input-wrapper">
                <input
                  type="search"
                  name="q"
                  value="{{ search.terms | escape }}"
                  placeholder="{{ 'general.search.placeholder' | t }}"
                  role="combobox"
                  aria-autocomplete="list"
                  aria-owns="predictive-search-results"
                  aria-expanded="false"
                  aria-label="{{ 'general.search.placeholder' | t }}"
                  aria-haspopup="listbox"
                  class="search-form__input"
                  data-search-page-predictive-search-input
                  data-base-url="{{ routes.search_url }}"
                />

                <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />

                <button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
                  {% include 'icon-close' %}
                </button>

                <div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
              </div>

              <button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
                {% include 'icon-search' %}
              </button>
            </div>
          </form>
        </div>
      </div>

 

Invito ~ Edit ~ Debut ~ Shopify - Brave 2021-05-03.png

Invito ~ Customize Debut ~ Shopify - Brave 2021-05.png

View solution in original post

Replies 9 (9)

KetanKumar
Shopify Partner
37144 3648 12059

@Andrew-Alcott 

sorry for issue 

if possible to give me rough idea how do you have like this so i will guide you.

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
Andrew-Alcott
Excursionist
28 4 14

Thanks for the response Ketan, ideally I'd want something looking like the following, though proportions etc. looking better than my quick mockup:Banner Example.JPG

KetanKumar
Shopify Partner
37144 3648 12059

@Andrew-Alcott 

Thanks for the details i have this sorry is not possible simple CSS code 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

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
Lixon_Louis
Shopify Partner
1193 35 268

This is an accepted solution.

@Andrew-Alcott You can do this in two simple steps. Try it on duplicate theme first, instead of the live theme

Open sections/hero.liquid  ( Image with text overlay section)  , locate <div class="hero__inner"> 

Copy the search-form code from templates/search.liquid (line 21-53)  and paste it before the closing tag of  <div class="page-width text-center">, which is the child element of <div class="hero__inner">. refer screenshot below.

If you need to regulate the width of search-form you can use the following CSS selector 

.hero__inner > form.search-form { max-width: xx}

 

Finally the updated code inside <div class="hero__inner"></div> should look like below. Let me know how it goes.  ("theme_version": "17.12.1")

 

      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
          <form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
            <div class="input-group input-group--nowrap">
              <div class="input-group__field input-group__field--connected search-form__input-wrapper">
                <input
                  type="search"
                  name="q"
                  value="{{ search.terms | escape }}"
                  placeholder="{{ 'general.search.placeholder' | t }}"
                  role="combobox"
                  aria-autocomplete="list"
                  aria-owns="predictive-search-results"
                  aria-expanded="false"
                  aria-label="{{ 'general.search.placeholder' | t }}"
                  aria-haspopup="listbox"
                  class="search-form__input"
                  data-search-page-predictive-search-input
                  data-base-url="{{ routes.search_url }}"
                />

                <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />

                <button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
                  {% include 'icon-close' %}
                </button>

                <div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
              </div>

              <button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
                {% include 'icon-search' %}
              </button>
            </div>
          </form>
        </div>
      </div>

 

Invito ~ Edit ~ Debut ~ Shopify - Brave 2021-05-03.png

Invito ~ Customize Debut ~ Shopify - Brave 2021-05.png

Andrew-Alcott
Excursionist
28 4 14

Lixon_louis, 

Amazing help so far, what you've suggested has placed the search bar in the hero image - a great result so thank you. A couple of minor issues as a result:

Firstly, there doesn't seem to be any padding between the subtitle text and the search bar and I'm not sure where to add the bottom-padding code here. Any ideas? It would be preferable to have the container centred against the hero image. 

Andrew-Alcott_0-1620091929775.png

 

Secondly, I'm getting an error message in my portal saying: 

HTML error found

Broken HTML has been detected in your theme's code.
 
Here's the C&P:
 
Andrew-Alcott_1-1620092091053.png

 

Lixon_Louis
Shopify Partner
1193 35 268

1. set margin-top for the search-form using the CSS selector I mentioned above

.hero__inner > form.search-form { margin-top: 40px}

 

2.  I can see  that you have 4 </div> (closing tags) after the </form>. There should be only 3 </div>.

Re_ Permanent Search Bar on Hero Image - Shopify C.png

Andrew-Alcott
Excursionist
28 4 14

Lixon,

Thanks for spotting that extra div. That solved the issue. 

In terms of the code, I'm still not sure where I place:

.hero__inner > form.search-form { margin-top: 40px}

Which line would you paste the code on your last screenshot? 

Hopefully that should sort everything - thank you it is greatly, greatly appreciated. 

 

Lixon_Louis
Shopify Partner
1193 35 268

Paste it at the very bottom of Assets/theme.css. If you are using older version of Debut, look for theme.scss.liquid inside Assets/

Remove  the '>'  

.hero__inner  form.search-form { margin-top: 40px}

Andrew-Alcott
Excursionist
28 4 14

Should have worked that out myself rather than putting it into the hero snippet. 

Thank you kindly for your help, very good of you.