How to Add Search Box in Weebly Site?

Every Weebly site owner like to add a site search box in the site to provide easy to search function for visitors. Search box is a very useful feature especially when your have large number of products or the site is having large content. Since it it not possible to include all pages in the navigation menu, search box is the only option for users to find relevant content in your site. In this article, we will explain how to add search box in Weebly site and how it works.

Weebly Search Box

Weebly offers a search box as an app or element which you can add anywhere in your site. However, this is a premium feature and you need to upgrade to one of the premium plans to use the default search box element on your site.

• You can drag and drop the “Search Box” element in content, header and footer area.
• Enable or disable “Search Box” from your theme options settings under “Theme”. This works on a supported themes to show search lens icon in the header navigation menu.

Add Search Box in Weebly

When you are in Weebly editor, go to “Build” section and select the page in which you want to add search box. You can find the “Search Box” under “More” group of elements. Simply, drag and drop the element in your content area to view the search box.

After adding a search box, click on the element to view the available customization options.

• Enter a placeholder text that will be shown inside the search box, you can leave the default “Search Site” text as it is.
• Change the search box alignment to left, center or right. You can also place the search right or left to any of the existing element to align on your layout.
• Adjust top and bottom margin spacing by increase or decrease the value.
• You can use apps like Color Block to create beautiful background color box with border radius and place the search box inside. Below is how the customized search box created with Color Block app will look like:

• Alternatively, you can also add the following CSS with your own color codes to adjust the background. Learn how to add custom CSS in your Weebly site.

.wsite-search-element-outer {
    background: #d8aaf6;
    border-radius: 30px;
    border: 1px solid rgb(144 238 144);
}

Similar to content area, you can drag and drop the search box element in header and footer area. Remember, drag and drop footer is a premium feature in Weebly that you can get along with search box feature. Therefore, if you want to have a search box, the best option is to upgrade your free Weebly plan and purchase one of the premium Weebly plans for your site.

Add Search Box in Weebly Navigation Menu

Showing search icon in the header navigation is a good option so that users can easily find it when they want to search something on your site. This works well especially with stick navigation that floats when users scrolling down on the page. Unfortunately, not all Weebly themes allow adding search box element in the navigation menu. If you really want to show a search lens icon at the right end of navigation menu then the best option is to use themes like Dusk2, Edison or Paper. You can preview the theme to confirm whether it has a search box in the navigation before choosing it. When your theme supports the search box in navigation, you can show or hide the icon by hovering over and select that option. Alternatively, navigate to “Theme > Theme Options” section and enable or disable “Search Box” option.

If your theme does not support then check out our article on how to add phone text, social icons and search box in Weebly header navigation area.

How Weebly Search Box Works?

On the published site, you can enter the keywords in the search box to search and get the relevant result in the same browser window. The results page will show items under different categories based on the content types along with an option to filter the results.

• Input Box – where you can enter new search keyword or phrases to the site search again.
• Product Search – All the related product elements in your site are shown in the site search results along with the description and price. This helps the users to search and buy products easily.
• Blog Posts – Displays all the matched keywords from your site’s blog posts.
• Filter – Shows all the places where the keyword is found. You can filter the content type according to the requirement.

Pros and Cons of Weebly Search Box

Here are the advantages and problems you will find when using search box in Weebly site.

Pros

• Search the keyword in files, blog posts and products. Products are shown under category which helps the users to filter the results more easily and effectively.
• You can drag and drop the search box element to enable it anywhere in the site.
• On supported themes, you can display on entire site by enabling it in the header or footer area of your site. If you have lot of blog posts, it’s good idea to add site search option in the sidebar so that users can easily search your content.
• You can encourage users to use your Weebly search app as a default search engine in the web browsers. The URL of Weebly search app will look something like “https://www.yoursite.com/apps/search?q=%s” and users can add this in browser’s settings.

Cons

• Weebly search option sometime shows incomplete search results which means the meaning of search keyword is not grasped completely when showing in the results.
• Search result does not include pages.
• No customizing options available to choose web search or site specific search.
• No option to customize the size of the search box unless you adjust it using spacer and pace side by any other element.
• Unlike monitoring traffic statistics, Weebly does not offer analytics for site search usage.

Weebly Search Box for Free Users

As mentioned, Weebly site search option is a premium feature. If you try to add the search box in free Weebly site, you will see a pop-up asking you to upgrade your plan.

However, free users can use better alternatives like Google Custom Search. It offers much better results with the using Google search engine which can also be monetized with AdSense for Search. If you have a targeted Chinese audience then you can also add custom search box from Baidu search engine.