How do I change the search icon from the left side to the right side

Solved

How do I change the search icon from the left side to the right side

tejai1
Tourist
5 1 1

I am using the colorblock theme and the search icon is on the left, my logo is in the middle and the shopping bag is on the right. I would like to move the search icon to the right, so it's next to the shopping bag. Not finding the answer anywhere. Thank you

Accepted Solution (1)

AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @tejai1 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media (min-width: 990px) {
.header--top-center > .header__search {
grid-area: icons !important;
display: flex !important;
justify-self: end !important;
padding-right: 77px !important;
}
}

 

I hope this helps.

banned

View solution in original post

Replies 6 (6)

PageFly-Victor
Shopify Partner
7865 1785 3079

@tejai1 

This is PageFly - Free Landing Page Builder

 

This can be achieve by using custom css code. Please help me by share your site URL and password if password protected. I will give you a code and where to place it

 

Hope this helps. 

Best regards,

PageFly

Denishamakwana
Shopify Partner
1408 173 231

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @tejai1 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media (min-width: 990px) {
.header--top-center > .header__search {
grid-area: icons !important;
display: flex !important;
justify-self: end !important;
padding-right: 77px !important;
}
}

 

I hope this helps.

banned
tejai1
Tourist
5 1 1

worked great, thank you

PratikAnand
Tourist
6 0 1

Hii Avada Commerce
I saw this solution and I found it really helpful.
I just have another task to be done, I want to change the postion of my search icon from right side of my brand name to left side of it (placed in header). If u can help me in this issue, I will be realy greatful to you.
Store link- quickfit.store
My email- pratikanand012@gmail.com

I'm enclosing a SS for your kind consideration.Search icon problem.png
Thankyou!

nehakhouri
Visitor
1 0 0

it worked!