Changes in search bar and results - Dawn theme

[Dekanten]

Hi

I want to do some design changes in the searchfield area, make images bigger, make a border under the products and a frame around this field?

When u search for a product the modal looks so weird, blank space and no fields for splitting up the section parts.

Can it be possible, thank u so much in advance. 🙂

See attached image:

My storeurl:

www.dekanten.no

[Abdosamer · Accepted solution]

Hi @Dekanten , go to theme.liquid file and add the following code at the end before the </body> tag : 

<style>
img.predictive-search__image {
    height: 10rem !important;
    width: 10rem !important;
}

.predictive-search--header .predictive-search__item-content {
    font-size: 1.5rem!important;
    justify-content: end !important;
}
.predictive-search__item--link {
    display: grid;
    grid-template-columns: 5rem 1fr;
    grid-column-gap: 5rem;
    grid-template-areas: "product-image product-content";
    border-bottom: 1px solid black !important;
}

</style>

[Abdosamer · Accepted solution]

Hi @Dekanten , go to theme.liquid file and add the following code at the end before the </body> tag : 

<style>
img.predictive-search__image {
    height: 10rem !important;
    width: 10rem !important;
}

.predictive-search--header .predictive-search__item-content {
    font-size: 1.5rem!important;
    justify-content: end !important;
}
.predictive-search__item--link {
    display: grid;
    grid-template-columns: 5rem 1fr;
    grid-column-gap: 5rem;
    grid-template-areas: "product-image product-content";
    border-bottom: 1px solid black !important;
}

</style>

[Dekanten]

Hi mister how are you doing? 🙂

Thanks for your support, it works good but i need one more thing. 🙂

I want a border on "søk etter" result too, can this be made?

Maybe a simple hover can be great on "søk etter", anything will go 🙂

See attached image:

[Abdosamer · Accepted solution]

@Dekanten , sure add the following code inside the style tag I code I gave you :

button.predictive-search__item.predictive-search__item--term.link.link--text.h5.animate-arrow {
    border-bottom: 1px solid black;
}

[Dekanten]

Hi again, thank you very much indeed and everything works fine now and pretty satisfied with the result. Hope you have a wonderful day. 🙂