Dawn Theme how to add the search box to banner in dawn

[Caidra]

Hi

My store is www.caidra.com and I’m on Dawn2.0. I am using a third party app for AI search. However, for that to be useful need to be able to:

1. Add a search box to the banner

2. Customise the size & colour of the box depending on the banner image being used at the time

3. Move the Search box positioning depending on the text and image of the banner (think drag & shift on powerpoint or wix)
   Most of the solutions I came across are for other themes and refer to a theme.scss file which I do not have.

This is a mockup of what I am hoping to achieve.

Hoping someone can help me figure this out. Thanks

[Caidra]

@LitCommerce loved your solution on https://community.shopify.com/c/shopify-design/search-bar-in-dawn-theme/td-p/1635928 and was able to get so far.

Can you help to advise how I can change the colour of the box so that the text stands out. Something like the header on this page would be perfect

Also can I add this code anywhere to make the text box appear on the banner hero image?

Thank in advance.

[LitCommerce]

Hi @Caidra ,

Please send me the preview link, the link you changed the header. I will check it.

[Caidra]

The preview link to the test shop is https://gitfqwhj1p60bzz3-62235377833.shopifypreview.com

Was hoping to create the search box in the banner instead and change background to white, lik on the community page.

Thanks

[LitCommerce]

Hi @Caidra ,

The preview link has expired, can you resend it to me?

[Caidra]

Here it is - hopr it works; https://evj30xuu1bclu1hk-62235377833.shopifypreview.com

[LitCommerce]

Hi @Caidra ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
  predictive-search .search__input.field__input {
        background: #fff !important;
  }
}

Hope it helps!

[Caidra]

@LitCommerce the code did make the box white but:

1. the text remained white too so disappeared - how to change the text inside the search box to black like on this page header.
2. The search box does not appear on a mobile device which is where most of my customers would log in from
   Thanks for helping

[LitCommerce]

Hi @Caidra ,

Please send me the preview link, I will check it.

[Caidra]

Hi @LitCommerce
The preview link is https://hhyo6koqdei27z58-62235377833.shopifypreview.com

Before adding the new code:

After adding the new piece of code in the base file where both text and box is in white:

Thanks for helping.

[LitCommerce]

Hi @Caidra ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
  predictive-search .search__input.field__input {
        color: rgb(18, 18, 18) !important;
  }
  predictive-search .field__label{
        color: rgb(18, 18, 18) !important;
  }
}

Hope it helps!

[Caidra]

@LitCommerce This worked perfectly. Only problem is that on the mobile view it still does not show up. How can I make it show in mobile view please?

Preview link is https://jiq7z2cowjccjylq-62235377833.shopifypreview.com

Thanks as always

[LitCommerce]

Hi @Caidra ,

Please send me the preview link with the desktop search added, I will check it for you

[Caidra]

@LitCommerce preview link of the test store in which i added the code was in post above. Hope this one works https://yp1cgwgjvtd6amo2-62235377833.shopifypreview.com

[LitCommerce]

Hi @Caidra ,

Because mobile is too small so it can only be displayed like this, do you want to change it?

[Caidra]

@LitCommerce yes please this will be perfect. How do I make that happen. Here is the preview code - https://caidra.com/?_ab=0&_fd=0&_sc=1
Thanks in advance

[LitCommerce]

Hi @Caidra ,

Please send me the preview link, I will check it for you

[Caidra]

Hi @LitCommerce I had included link before - please find the fresh link - https://caidra.com/?_ab=0&_fd=0&_sc=1 - hope this one works. Thanks

[LitCommerce]

Hi @Caidra ,

I checked and it doesn’t show desktop search like my previous tutorial.

Please add it and send me the preview link as before, I will check it for you

[Caidra]

@LitCommerce the problem is that your original tutorial asks for the entire header code to be replaced. However, I have added codes previously from another community member to add social icons to my header. when I try to add your code into it, all icons and search bar except the search icon disappears.
This is the preview link to my published store with the social media icons - https://caidra.com/?_ab=0&_fd=0&_sc=1

This is the preview link after I tried adding your code to the above file - https://caidra.com/?_ab=0&_fd=0&_sc=1

Please help to advise how I can have it all on the desktop and only what you showed in your previous screenshot on the mobile.
Thanks