{"title":"Search Bar \u0026 Predictive Search","description":"\u003cp\u003eSearch Bar \u0026amp; Predictive Search work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 342 search bar \u0026amp; predictive search requests for merchants, including work on Turbo, Impulse, Testament and Pacific. Below are 6 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"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}]},{"product_id":"add-predictive-and-autocomplete-search-impulse","title":"Add Predictive and Autocomplete Search","description":"\u003cp class=\"task-lead\"\u003eA retailer using Algolia discovered they had only ever enabled instant results, not the full search results page. They wanted both.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe've used Algolia for almost a year and didn't realize only the instant results were active. We want the full search results page to use Algolia too.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eHalf of the search integration was live. The other half was still the theme's default.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe connected the search results page to Algolia so full-page searches use the same index, ranking, and filters as the instant results. The results page was styled to match the theme.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSearch results page connected to Algolia\u003c\/li\u003e\n\u003cli\u003eSame index and ranking as instant results\u003c\/li\u003e\n\u003cli\u003eFilters available on the results page\u003c\/li\u003e\n\u003cli\u003eStyled to match the theme\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155550564426,"sku":"TASK-0109","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"replace-native-search-with-app-testament","title":"Replace Native Search with App","description":"\u003cp class=\"task-lead\"\u003eA Shopify Plus retailer had installed Algolia and needed the search interface restyled to match their theme.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe recently installed Algolia and want styling changes to the instant search UI on the search results page and collection pages so it matches the theme.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA powerful search that looked like a foreign object.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe restyled Algolia's search results and collection filters to match the theme's product cards, typography, and spacing, on desktop and mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAlgolia results styled to the theme\u003c\/li\u003e\n\u003cli\u003eCollection filters styled to match\u003c\/li\u003e\n\u003cli\u003eConsistent on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155693465674,"sku":"TASK-0263","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"search-drawer-and-slide-out-search-pacific","title":"Search Drawer and Slide-out Search","description":"\u003cp class=\"task-lead\"\u003eA parts retailer's search drawer only matched product titles. They wanted it to search tags too so vehicle makes returned results.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want search results based on tags as well, not titles only. When a customer searches a car make, it should show every product tagged with that make.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSearch that missed the retailer's most important data.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe extended the search drawer to match product tags alongside titles, so searching a vehicle make or model returns every product tagged with it.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSearch matches product tags\u003c\/li\u003e\n\u003cli\u003eTitles still matched\u003c\/li\u003e\n\u003cli\u003eResults show in the search drawer\u003c\/li\u003e\n\u003cli\u003eTested with the retailer's tag structure\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155696676938,"sku":"TASK-0328","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"search-results-page-customization-symmetry","title":"Search Results Page Customization","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the search results page restyled so it matched their collection pages.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe search results page looks like a different site. Make it match our collection pages: same grid, same cards, same filters.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA results page that broke the visual continuity.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe rebuilt the search results page using the same product grid, cards, and filter layout as collection pages, so search feels like browsing.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSearch results styled like collection pages\u003c\/li\u003e\n\u003cli\u003eSame product cards\u003c\/li\u003e\n\u003cli\u003eFilters on search results\u003c\/li\u003e\n\u003cli\u003eMobile layout matched\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155696939082,"sku":"TASK-0329","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"search-bar-visual-style-and-shape-empire","title":"Search Bar Visual Style and Shape","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the header's search icon replaced with a bordered search box on the left.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe have a search icon. Instead we want a search box with borders around it, on the left side of the header, always visible.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA visible search field instead of an icon.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the search icon with a bordered search field on the left of the header, styled to the brand, collapsing to an icon on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eBordered search field in the header\u003c\/li\u003e\n\u003cli\u003ePositioned on the left\u003c\/li\u003e\n\u003cli\u003eCollapses to an icon on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155725185098,"sku":"TASK-0485","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/search-bar-predictive-search.oembed","provider":"TaskHusky","version":"1.0","type":"link"}