A Shopify store owner using the Palo Alto theme seeks help converting their search icon into a rounded rectangle search bar with a specific color (#607B75).
Solutions Offered:
CSS-based approach: One developer provided complete CSS code to modify the search form styling, including:
Collaborative assistance: Two other developers requested collaborator access to implement the changes directly, suggesting the modification may require both Liquid template and CSS adjustments.
Current Status:
The store owner clarified they want rounded corners on the search bar. Multiple developers have offered assistance, with one providing ready-to-use CSS code and others requesting screenshots or collaborator access to finalize the implementation. The discussion remains open as the owner evaluates which solution to implement.
Hi all,
Hope everyone is having a great day! I am hoping for some assistance in turning our search Icon to a search-bar (rectangle with rounded corners) on our Shopify store.
If possible, i’d love for the bar to be in our complimentary theme colour: #607B75.
Theme: Palo Alto
URL: https://prestige-coffee.com.au/
Thank you so much for any assistance.
Hi @MollieHammond,
You want this:
Hello @MollieHammond
.search-form__input-holder {
border: 2px solid #607B75;
border-radius: 30px;
background-color: white;
padding: 6px 12px;
display: flex;
align-items: center;
}
.search-form__input {
border: none;
outline: none;
background: transparent;
flex: 1;
padding: 6px 10px;
font-size: 16px;
color: #333;
}
.search-form__label .icon-search {
color: #607B75;
width: 18px;
height: 18px;
}
.search-form__submit {
display: none;
}
.search-popdown__close {
background: transparent;
border: none;
color: #607B75;
margin-left: 8px;
}
.search-form__input-holder:hover,
.search-form__input:focus {
box-shadow: 0 0 0 2px rgba(96, 123, 117, 0.3);
}
div#popularSearches-desktop-compress {
border-radius: 5px;
}
Hey,
It’s this but with rounded corners. Would that be okay?
Hi @MollieHammond,
Sure, please send me the collaborator code in private message, I will send you the invitation and check it
Hello @MollieHammond
The CSS looks perfect for turning the search icon into a search bar with rounded corners and your theme color #607B75. Please send me a screenshot of how you want it to look.
Hi @MollieHammond ,
I am from Mageplaza - Shopify solution expert.
Is this the design you’re aiming for, as shown in the screenshot below?
If so, feel free to message me — I’m more than happy to help you.
Screenshot:
Best regards!
