All Collections
Website Builder
Website Elements
Website Builder: Product Search
Website Builder: Product Search

Learn how to add a search bar to your online store created with Hostinger Website Builder

Updated over a week ago

If your online store is created with our AI Website Builder, you can easily add a search bar!

Currently, the search element only works with online store products 💡

You can add the search bar to any page and any section of your website, except for the following sections:

  • Header

  • Product list

  • Single product

  • Blog list

  • Blog post header

Within the builder, expand the Add element tab on the left, find the Product search element, and drag it to the preferred place on your page:

The Product search element in Hostinger Website Builder

Click on the element to see more options (edit, duplicate, change the visibility, delete, etc.):

The options of a Product search element in Hostinger Website Builder

Once you click on Edit search, a pop-up of the following search settings will appear:

General

  • Placeholder text: by default, it's Search products

  • “No results” text: by default, it's No results found

Style

Here, you can set the following:

  • Fill color (normal and hover)

  • Text and icon color (normal and hover)

  • Text font

  • Border color (normal and hover)

  • Corner radius

Animation

  • Set a preferred animation for the element

Did this answer your question?