{"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":"2025-08-27T06:49:44","modified_gmt":"2025-08-27T06:49:44","slug":"8332766-hostinger-website-builder-product-search","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8332766-hostinger-website-builder-product-search\/","title":{"rendered":"Hostinger Website Builder: Product Search"},"content":{"rendered":"<p class=\"no-margin\">If your online store is created with our <b><a href=\"https:\/\/www.hostinger.com\/website-builder\" target=\"_blank\" class=\"intercom-content-link\">AI Website Builder<\/a><\/b>, you can easily add a search bar!<\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Currently, the search element only works with online store<b> <a href=\"\/support\/6538344-website-builder-how-to-add-products\" target=\"_blank\" class=\"intercom-content-link\">products<\/a><\/b> &#128161; <\/p>\n<p class=\"no-margin\">\n<\/p><p class=\"no-margin\">You can add the search bar to any page and any section of your website, except for the following sections:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Header <\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Product list<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Single product<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Blog list <\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Blog post header <\/p>\n<\/li>\n<\/ul>\n<\/div><p class=\"no-margin\">Within the builder, expand the <b>Add element <\/b>tab on the left, find the <b>Product search<\/b> element, and drag it to the preferred place on your page:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2023\/09\/26852dad-d936-41e9-be69-86ecd9036692.jpg\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Click on the element to see more options (edit, duplicate, change the visibility, delete, etc.):<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2023\/09\/b62504d7-58de-498d-b26d-e5fc3da67302.jpg\" alt=\"The options of a Product search element in Hostinger Website Builder\" width=\"500\"><\/div><p class=\"no-margin\">Once you click on <b>Edit search<\/b>, a pop-up of the following search settings will appear:<\/p><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 96px\">\n<p class=\"no-margin\"><b>General<\/b><\/p>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Placeholder text<\/b>: by default, it&rsquo;s <i>Search products<\/i><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>&ldquo;No results&rdquo;<\/b> <b>text<\/b>: by default, it&rsquo;s <i>No results found<\/i><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 96px\">\n<p class=\"no-margin\"><b>Style<\/b><\/p>\n<\/td>\n<td>\n<p class=\"no-margin\">Here, you can set the following:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b>Fill color<\/b> (normal and hover)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text and icon color <\/b>(normal and hover)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Text font<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Border color <\/b>(normal and hover)<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>Corner radius<\/b><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 96px\">\n<p class=\"no-margin\"><b>Animation<\/b><\/p>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\">Set a preferred animation for the element<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to add a search bar to your online store created with Hostinger Website Builder<\/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":[280],"tags":[],"class_list":["post-630","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"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":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/630\/revisions\/2832"}],"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}]}}