Search Box Styling and Voice Search

This demo styles the search box, the search button and the suggestions, and adds a microphone for voice search. Type pasta to see the styled suggestions, or click the microphone and say a dish. View the ss360Config to check the configuration.

• themeColor colors headlines, links, result group tabs and filter buttons. accentColor colors clickable elements: result titles, the search button and active filters.
• style.searchBox and style.suggestions set colors, padding and borders. style.searchBox.button.text replaces the magnifier icon with a label.
• voiceSearch.enabled: true adds the microphone. voiceSearch.lang sets the input language as a BCP 47 tag (default: 'en-US').

The microphone only appears in browsers that support the Speech Recognition API. Check the compatibility table if you don't see it.

In Design & Publish: Settings → General → Style for the colors and Voice Search for the microphone. For anything else, use Additional CSS.

See Styling and Voice search for all options.

window.ss360Config = {
   siteId: '83460', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* Replace with the css selector of your search box */
   },
   results: {
      embedConfig: {
         contentBlock: '.example__page-content-block' /* Replace with the css selector of the element the results go into */
      }
   },
   style: {
      themeColor: '#1f4a37',
      accentColor: '#d4441c',
      suggestions: {
         text: {
            color: '#1f4a37'
         },
         background: {
            color: '#f5efe4'
         },
         padding: '10px',
         distanceFromTop: '5px',
         border: {
            color: '#ddd3c2',
            radius: '4px'
         }
      },
      searchBox: {
         text: {
            color: '#1c2420',
            size: '15px'
         },
         background: {
            color: '#fffdf8'
         },
         padding: '8px',
         border: {
            color: '#1f4a37',
            radius: '4px'
         },
         button: {
            text: 'Go'
         }
      }
   },
   voiceSearch: {
      enabled: true,
      lang: 'en-US',
      color: '#1f4a37'
   }
};

{"siteId":"83460","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"style":{"themeColor":"#1f4a37","accentColor":"#d4441c","suggestions":{"text":{"color":"#1f4a37"},"background":{"color":"#f5efe4"},"padding":"10px","distanceFromTop":"5px","border":{"color":"#ddd3c2","radius":"4px"}},"searchBox":{"text":{"color":"#1c2420","size":"15px"},"background":{"color":"#fffdf8"},"padding":"8px","border":{"color":"#1f4a37","radius":"4px"},"button":{"text":"Go"}}},"voiceSearch":{"enabled":true,"lang":"en-US","color":"#1f4a37"}}