{"id":630,"date":"2023-09-05T05:37:17","date_gmt":"2023-09-05T05:37:17","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2023\/09\/05\/8332766-hostinger-website-builder-product-search\/"},"modified":"2026-08-24T07:59:16","modified_gmt":"2026-08-24T07:59:16","slug":"8332766-hostinger-ai-builder-manual-mode-product-search","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8332766-hostinger-ai-builder-manual-mode-product-search\/","title":{"rendered":"Hostinger AI Builder: How to add a search element in manual mode"},"content":{"rendered":"

Add a search element to your Hostinger AI Builder manual mode website, letting visitors search your products, blog posts, and general content directly from a customizable search bar. You can add a search element to most pages, enable a dedicated search feature within your blog section, and let visitors view full results on a dedicated search results page.<\/p>

Add a search element to your website<\/h2>
    \n
  1. In the builder, expand the Elements<\/strong> <\/a>tab on the left.<\/li>\n
  2. Find the Search<\/strong> element and drag it to the preferred place on your page.
    \n\"\"<\/li>\n
  3. Click on the element to see more options, such as edit, duplicate, change visibility, or delete.<\/li>\n
  4. Click Edit search<\/strong> to open the search settings pop-up.
    \n\"\"<\/li>\n<\/ol>

    NOTE<\/strong><\/p>

      \n
    • The search element cannot be added within the following sections: Header, Product list, Single product, Blog post header.<\/strong><\/li>\n<\/ul>

      Configure general search settings<\/h2>

      Under the General<\/strong> tab, you can set:<\/p>

        \n
      • Placeholder text<\/strong>: by default, it’s Search.<\/li>\n
      • “No results” text<\/strong>: by default, it’s No results found.<\/li>\n
      • Search within<\/strong>: choose which content types the element searches. Select or deselect Products, Blog posts,<\/strong> or Other<\/strong> website content<\/strong>, depending on what you want visitors to find.<\/li>\n<\/ul>

        \"\"<\/p>

        Configure search style and animation<\/h2>

        Under the Style<\/strong> tab, you can set:<\/p>

          \n
        • Fill color (normal and hover)<\/li>\n
        • Text and icon color (normal and hover)<\/li>\n
        • Text font<\/li>\n
        • Border color (normal and hover)<\/li>\n
        • Corner radius<\/li>\n<\/ul>

          \"\"<\/p>

          Under the Animation<\/strong> tab, set a preferred animation for the element.<\/p>

          \"\"<\/p>

          Enable search within your blog section<\/h2>

          The Blog list<\/strong> section includes its own dedicated search feature, separate from the general Search element.<\/p>

            \n
          1. Click on your Edit blog list<\/strong> section.
            \n\"\"<\/li>\n
          2. Click the Search<\/strong> tab.<\/li>\n
          3. Toggle Enable blog post search<\/strong> on.
            \n\"\"<\/li>\n
          4. Choose a Position<\/strong>: Left, Center, or Right.<\/li>\n
          5. Set the Style options<\/strong>, including fill color, text and icon color, border color, corner radius, and width.<\/li>\n
          6. Set the Placeholder<\/strong> text and “No results” text for this search bar.<\/li>\n<\/ol>

            \"\"<\/p>

            NOTE<\/strong><\/p>

              \n
            • This blog search only searches blog posts within that section. It works independently from the general Search<\/strong> element’s Search<\/strong> within setting.<\/li>\n<\/ul>

              View search results<\/h2>

              When a visitor types a query into a search bar, a preview of matching results appears, grouped under Products, Blog posts<\/strong>, and Other<\/strong>. Clicking See all results<\/strong>, or pressing Enter<\/strong>, opens a dedicated search results page, where results are organized into tabs — Products, Blog posts<\/strong>, and Other<\/strong> — each showing a result count, with matching terms highlighted.<\/p>

              \"\"<\/p>

              With these updates, visitors can search across an entire AI Builder site, not only the product catalog, making it easier for them to find blog posts, pages, and other content.<\/p>\n","protected":false},"excerpt":{"rendered":"

              Add a search bar to your Hostinger AI Builder manual mode website.<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-630","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8332766-hostinger-website-builder-product-search\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":16822,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/630\/revisions\/16822"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}