A user added a search bar to their product page but found it oversized, taking up excessive screen space. They wanted to reduce both its width and padding to match their header search bar styling.
Solutions Provided:
Multiple respondents offered CSS code modifications targeting the styles.css or base.css file:
.search__section or .search__container paddingmax-width constraints (280px-300px suggested)Current Status:
The original poster confirmed one solution worked successfully. They now have two follow-up questions:
The discussion remains open with these additional customization requests pending resolution.
Hi,
I just added a search bar for my product page but it looks enormous and takes up so much of the top part of the screen.
How do I make the search bar smaller and more discreet? Both in width, as well as padding?
I’d like it to look more like the search bar in the header and also not have a huge space in between the search bar and the products.
View the issue here:
Hello @DrLani
Inside Shopify Admin, you can go to Edit theme code, open file styles.css and add this code at the bottom
.search__section .section_form {
padding: 32px 0 8px 0 !important;
}
.search__section .search__wrapper {
max-width: 300px !important;
}
The result
Hope that helps!
This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Styles.css
.search__container .search__wrapper {
display: inline-block;
position: relative;
max-width: 300px !important;
width: 100%;
}
Hope you find my answer helpful!
Best regards,
Richard | PageFly
Hi, @DrLani .
Follow These steps,
Go to the online store theme and go to base.css file paste the code mentiond below.
.search__container .search__wrapper {
max-width: 280px;
}
.search__form input {
font-size: 15px !important;
}
.search__container input[type=text] {
min-height: 40px;
height: 41px;
}
.search__button {
height: 41px;
width: 39px;
font-size: 18px;
}
Result:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Hi! This solution worked perfectly.
I have 2 questions:
Do you have a tip for making the text above the bar adjustable? It looks quite large now that I have adjusted the size of the bar.
Do you know how I could do some coding to make it so I could put text on the same line as the search bar? Currently this theme prevents me from doing this and keeps the modules on separate lines. Here’s a mock-up:
