Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
sorry for issue
if possible to give me rough idea how do you have like this so i will guide you.
Thanks for the response Ketan, ideally I'd want something looking like the following, though proportions etc. looking better than my quick mockup:
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
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>
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
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>.
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.
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}
Should have worked that out myself rather than putting it into the hero snippet.
Thank you kindly for your help, very good of you.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024