Search Page CSS

Some useful CSS code to style Search Page. You can add them to Custom CSS

#1. Change Search Page to Grid Layout

#2. Change image ratio on search page

#3. Change Header style on Search Page

#4. Invert Search Page logo color

#5. Round corners of Search bar

#6. Change Search result italic to bold

#7. Change blinking cursor color

#8. Align vertical center image – text in search result

#9. Remove line between Search Result items

#10. Remove line between Search Result items

#11. Remove excerpt

#12. Highlight the search term result

#13. Search Icon color

#14. Search Input Color

#15. Edit placeholder in Search bar

#16. Change image ratio on search page

#17. Change blinking cursor color in Search bar

#18. Change Search Result page layout

#19. Edit placeholder in Search bar

#20. Round search bar input

#21. Change italic in search result to bold

#22. Align vertical center image – text in search result

#23. Change Search icon to White

#24. Search Page Header Color

#25. Search Page – Navigation Text Color

#26. Search Page – Social Icons color

#27. Search Page – Cart icon color

#28. Search Page – Quantity text color

#29. Search Page – Header button color

#30. Search Page – Burger icon color

#31. Search Page – Login text color

#32. Add a Back to button in Search Result Page

#33. Change white logo to black on Search Result Page

body:has(.sqs-search-page) {
    header#header img {
        filter: invert(1);
    }
}

#34. Change white logo to black on Search Result Page (and keep black when burger menu is opened)

body:has(.sqs-search-page):not(.header--menu-open) {
    header#header img {
        filter: invert(1);
    }
}

#35. Change burger color to black on Search result page (but keep black when burger menu is opened)

body:has(.sqs-search-page):not(.header--menu-open) {
    div.burger-inner>div {
        background-color: #fff !important;
    }
}

#36. Change burger color to black on Search Result Page

body:has(.sqs-search-page) {
    div.burger-inner>div {
        background-color: #fff !important;
    }
}

#37. Search Result Page – Change cart to white

body:has(.sqs-search-page):not(.header--menu-open) {
    a.cart-text-link {
        color: #fff;
    }
}

#38. Search Result Page – Change nav links to white

body:has(.sqs-search-page) div.header-nav-item>* {
    color: #fff !important;
}

#39. Change Search Result Page: Header to black, Site background to White

body:has(.sqs-search-page .sqs-search-page-output) {
    .system-page {
        background-color: #fff;
    }
    header#header {
        background-color: #000 !important;
    }
}