How To Increase The Width Of Search Box On Shopify
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
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
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.
- → Does anyone know how to solve IP canonicalization with shopify platform?
- → How can I add a featured image from a blog post to my homepage on shopify
- → Shopify - Get list of product from a specific collection
- → Shopify webhooks not wanted
- → Comparing two large files are taking over four hours
- → Need "add to cart" button price to update with correct amount depending on what checkbox is checked
- → How to append a variable inside another vaiable name in liquid html
- → GET /admin/webhooks.json returns an empty array
- → How to give border to to current displaying border
- → Shopify background image
- → Dynamic Attribute Names in Shopify Cart
- → What after added shopify store into shipstation