How to change the search drop down appearance in Enterprise theme

Store Design
,
1

Hey experts - Is it possible to change the layout of the drop down search results in Enterprise theme to be wider (in order to declutter the results) and show a larger product image? Something like the below.

anteck.com.au

TIA

search
search2495×1130 192 KB

2

Hey @Nick_S2

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.predictive-result__media.media.relative {
    flex: 0 0 120px !important;
    width: 120px !important;
}
}
</style>

RESULT:

image
image462×481 33 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

@Nick_S2 please add this css to the very end of your main.css file and check

shopify admin->online store->themes->edit theme code->assets->main.css

@media (min-width: 769px) {
    .predictive-search {width: calc(150% + 24px) !important;}
}
4

Thank you @suyash1 works perfect.

5

@Nick_S2 welcome, do let me know if you need any updates.