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

[Andrew-Alcott]

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

[KetanKumar]

@Andrew-Alcott

sorry for issue

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

[Andrew-Alcott]

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

[KetanKumar]

@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

[Lixon_Louis]

@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

Copy the search-form code from templates/search.liquid (line 21-53) and paste it before the closing tag of

, which is the child element of

. 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

should look like below. Let me know how it goes. (“theme_version”: “17.12.1”)

        

          {%- if section.settings.title != blank -%}
            ## {{ section.settings.title | escape }}
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            {{ section.settings.text }}

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

            
              {{- section.settings.button_label | escape -}}
            
          {%- endif -%}
          
        

      

[Andrew-Alcott]

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.

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:

[Lixon_Louis]

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 (closing tags) after the . There should be only 3 .

[Andrew-Alcott]

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]

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]

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

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