Styling

This demo site page shows how to style Zoovu Search using the zSearchConfig object. You can apply much more advanced styles by overriding the default css. View the zSearchConfig to check the configuration.

window.zSearchConfig = {
    siteId: 'spoonacular.com', /* 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 DOM element you want to use */
      }
   },
   style: {
      themeColor: "#1a74d7",
      suggestions: {
         text: {
            color: "#1a74d7"
         },
         background: {
            color: "#f0f0f0"
         },
         padding: "10px",
         distanceFromTop: "5px",
         border: {
            color: "#ffffff",
            radius: "0px"
         }
      },
      searchBox: {
         text: {
            color: "#1a74d7",
            size: "14px"
         },
         background: {
            color: "#f0f0f0"
         },
         padding: "8px",
         icon: {
            image: "magnifier"
         },
         border: {
            color: "#ffffff",
            radius: "0px"
         },
         button: {
            text: "Go!"
         }
      },
      loaderType: "square",
      animationSpeed: 150
   }
};

{"siteId":"spoonacular.com","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"style":{"themeColor":"#1a74d7","suggestions":{"text":{"color":"#1a74d7"},"background":{"color":"#f0f0f0"},"padding":"10px","distanceFromTop":"5px","border":{"color":"#ffffff","radius":"0px"}},"searchBox":{"text":{"color":"#1a74d7","size":"14px"},"background":{"color":"#f0f0f0"},"padding":"8px","icon":{"image":"magnifier"},"border":{"color":"#ffffff","radius":"0px"},"button":{"text":"Go!"}},"loaderType":"square","animationSpeed":150}}