Search Icon to rounded rectangle search bar

[MollieHammond]

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.

[namphan]

Hi @MollieHammond,

You want this:

It will be a complex request and will require changes to Liquid, CSS code. Can I send you a collaborator invitation? It will help me check things better.

[devcoders]

Hello @MollieHammond

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.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;
}

[MollieHammond]

Hey,
It’s this but with rounded corners. Would that be okay?

[namphan]

Hi @MollieHammond,

Sure, please send me the collaborator code in private message, I will send you the invitation and check it

[devcoders]

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.

[mageplaza-cs]

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!