Changes in search bar and results - Dawn theme

Solved

Changes in search bar and results - Dawn theme

Dekanten
Navigator
325 1 117

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:

CHANGES.png

 

My storeurl:

www.dekanten.no

 

 

Accepted Solutions (2)

Abdosamer
Shopify Partner
895 163 183

This is an 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>



View solution in original post

Abdosamer
Shopify Partner
895 163 183

This is an 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;
}

View solution in original post

Replies 4 (4)

Abdosamer
Shopify Partner
895 163 183

This is an 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
Navigator
325 1 117

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:

Skjermbilde 2024-08-18 kl. 14.47.11.png

Abdosamer
Shopify Partner
895 163 183

This is an 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
Navigator
325 1 117

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