How To Increase The Width Of Search Box On Shopify

- 1 answer

I'm trying to increase the width of the searchbox in Shopify timber framework but having problems. The padding can be increased, but the input field stays the same size. Any suggestions will be greatly appreciated. Thanks!



The quick answer is to find .site-header__search in timber.scss.liquid (found in the assets folder) and remove the line max-width: 400px. This will let the search box take up 100% of it's parent width.

If you want to adjust it further than that, you can adjust the grid item sizes in the header. See the image below and notice the grid__item divs:

Timber header grid

There you'll see large--one-half large--text-right medium-down--hide. large--one-half is what dictates the container size on your large breakpoint. Change that to something like large--two-thirds and it'll get wider — though be sure to also adjust the div right before it to large--one-third, otherwise your search grid__item will stack below your shop name/logo.

See the full Timber docs to get a better understanding of the grid as well.