{"product_id":"move-and-reposition-search-bar-in-header-turbo","title":"Move and Reposition Search Bar in Header","description":"\u003cp class=\"task-lead\"\u003eA specialty retailer wanted a large, obvious search bar in the header instead of the small icon their theme shipped with.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want to redesign the search bar. Our goal is a large, clearly visible search field in the header. Search is how most of our customers shop and the little icon isn't cutting it.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSearch drove most of their traffic to products but the theme buried it behind an icon. The retailer wanted search to be the dominant element in the header.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the search icon with a full-width search field in the header, styled to match the brand. On mobile it collapses back to an icon that expands on tap so the header stays clean.\u003c\/p\u003e\u003cp\u003eThe theme's predictive search results still show as customers type.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-width search field in the desktop header\u003c\/li\u003e\n\u003cli\u003eCollapsible search on mobile\u003c\/li\u003e\n\u003cli\u003eStyled to match the brand\u003c\/li\u003e\n\u003cli\u003ePredictive results preserved\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154829799498,"sku":"TASK-0014","price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/www.taskhusky.com\/products\/move-and-reposition-search-bar-in-header-turbo","provider":"TaskHusky","version":"1.0","type":"link"}