How to create a large, centered search bar on my home page?

Store Design
1

Hello! Is there any way (or maybe an available theme) to make the Search bar large and prominent in the center of the home page?

2

Hii, @khowe
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

3

Hello @khowe ,

Hope you are doing well.

You can make the changes to your theme by doing custom CSS code to fulfill your requirement. Could you please share your store URL so that I can check and can send you the snippet that you can add to your theme file?

Much appreciated!

4

@Zworthkey @rutvik_shop Yes! Here is the url: www.pokeyandbear.com

Thank you!

5

Hello @khowe !

Hope you are doing well. Thanks for the store URL.

I have checked further and the solution is you need to do custom coding to move the search bar in middle and need to add custom CSS to make it large. Please check the below screenshot:

Screenshot_16.png
Screenshot_16.png1906×964 299 KB

If you are not good at coding then I can help you out with it. To perform the solution by me I needed collaboration access to your store. For that, I need your confirmation so that I can send you the request.

6

@rutvik_shop Thank you! I got it centered. What do I need to change in the code to make it bigger?

1 Like
7

Hello @khowe !

Great! You can change the font size to make it bigger. Please add the below CSS to the theme.scss file at the bottom to make it work.

@media only screen and (min-width: 750px)
.top-bar input {
    font-size: 15.75px;
}
8

@rutvik_shop It worked using this part at the end of theme.scss.liquid :

.top-bar input { font-size: 15.75px; }

Thank you!

1 Like
9

Hey, could you help me add the search bar ?