How do I set up a static search bar in DAWN 2.0 theme?

Store Design
1

Hello,

New to Shopify and struggling :slightly_smiling_face: . Need some-help with the DAWN 2.0 Theme from the expert community. I have been self trying for sometime but had no success.

I need help with 2 things as listed below

  1. Setup a static search bar in the center of a page, like the below screenshot

DP949_0-1639400410159.png

  1. Login to my account to be setup in a similar way as in the below screenshot.

DP949_1-1639400539308.png
DP949_1-1639400539308.png716×609 182 KB

Would be greatful, if someone can help. The site name is myvanitybox.com and it is password protected. Will share the password once requested.

thank you in advance for your assistance.

Cheers

D

1 Like
2

Hello,

Please share your store details.

Thank you.

3

I also would like this type of search bar and login. I’ve seen this on other sites. I am new to Shopify development and would like to learn how to create this. I’d appreciate it if you solve this problem to share the answer.

1 Like
4

Hi,

This is exactly what I am looking for. Did you manage to find a solution?

any help is appreciated

many Thanks

5

I didn’t bother with the login, I got a permanent search bar in my header, which means on all files. I coped the code for the search bar (took me some time to figure out which code I needed), and place it in the header.liquid file at the place I wanted it, then tweaked some CSS code to center it. Here’s what I put in the header.liquid. Note this was from the Dawn 2.0 theme, don’t know if it will work in other themes. You may need to modify it for your particular situation. I hope it helps. Not exactly like the example but it works. I left the original search icon there because you still need it for the mobile version. Not perfect, but I’m still learning liquid, which was new to me at the beginning of this project.

{%- if section.settings.logo_position != ‘top-center’ -%}
{%- if settings.predictive_search_enabled -%}

{%- endif -%}

<input class=“search__input field__input”
id=“Search-In-Modal”
type=“search”
name=“q”
value=“”
size=“38”
placeholder=“{{ ‘general.search.search’ | t }}”
{%- if settings.predictive_search_enabled -%}
role=“combobox”
aria-expanded=“false”
aria-owns=“predictive-search-results-list”
aria-controls=“predictive-search-results-list”
aria-haspopup=“listbox”
aria-autocomplete=“list”
autocorrect=“off”
autocomplete=“off”
autocapitalize=“off”
spellcheck=“false”
{%- endif -%}

{{ “search product by name, organ, system” }}





{%- if settings.predictive_search_enabled -%}


{%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

{%- endif -%}

6

Hi! Can we view your shop, please?

7

Hi TomC333. Could you share exactly where you dropped this code in?

8

I put it in the header.liquid, right after the following header logo block of code:

{%- if request.page_type == ‘index’ -%}

{%- endif -%} {%- if section.settings.logo != blank -%} {%- assign image_size = section.settings.logo_width | append: 'x' -%} {{ section.settings.logo.alt | default: shop.name | escape }} {%- else -%} {{ shop.name }} {%- endif -%} {%- if request.page_type == 'index' -%}

{%- endif -%}

Good luck. I hope this helps. It is not perfect, but it is not bad given that it is free. You may need to make some tweaks to css code to get things lined up and centered. It is above the navigation menu bar on desktop.

9

Here is my test development shop that has the search bar above the menu bar.

https://ivs-dev-store.myshopify.com/

Good luck. I just shared in another post where to put the code in the header.liquid. Check it out. You will likely need to tweak css code.

10

Thank you Tom. Much appreciated!