FROM CACHE - en_header

Centered Large Search Bar

Solved
khowe
Excursionist
19 0 10

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?

Accepted Solutions (2)

Accepted Solutions
iCart
Shopify Partner
441 52 91

This is an accepted solution.

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

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.

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com

View solution in original post

iCart
Shopify Partner
441 52 91

This is an accepted solution.

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

 

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com

View solution in original post

Replies 7 (7)
Zworthkey
Shopify Partner
5581 642 1512

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

iCart
Shopify Partner
441 52 91

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!

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
khowe
Excursionist
19 0 10

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

 

Thank you!

iCart
Shopify Partner
441 52 91

This is an accepted solution.

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

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.

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
khowe
Excursionist
19 0 10

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

iCart
Shopify Partner
441 52 91

This is an accepted solution.

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

 

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
khowe
Excursionist
19 0 10

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

 

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

 

Thank you!