Search Module

The Search Module allows your visitors to search for specific content on your website. The search can be done across your whole website or limited to pages, shop or blog. It is possible to find the Search Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a column of your preference. 


Search Module Overview

The Search Module works as a regular search bar in which the user types down specific keywords and in return obtains relevant results of pages where those keywords are being used. Please note that the Search Module searches in the following elements: 


Search module behavior in preview mode

A website is only fully searchable once it has been published. The Search module is therefore not functional on the preview version of your website. Publish your website before trying out your Search module. 


1. Edit Search Module

To open the editing menu, double-click on top of the search icon you wish to modify or hover the mouse on top of it to find the blue module menu and click on the Edit option.

 

1.1. Content

In this section it is possible to define where should the search be done on the website - pages, products (shop) and/or posts (blog). Toggle those you wish to display in the search results - you can toggle just one or all, in which the search is done across the whole website.

 

1.2. Styling

1.2.1. Placement and Float

This options allows you to define the placement of the search icon.

 

1.2.2. Size

The size refers to the size of the search button.

 

1.2.3. Icon

In this section it is possible to define the icon color and size.

 

1.2.4. Background

Here you can define a background color for the search module.

 

1.2.5. Border

Within the border options it is possible to define a border color, width, style and radius.

 

1.2.6. Spacing

Finally you can modify the spacing, both the margin and padding.

  

2. Search Global Styling

Instead of individually styling each search module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Search menu. Click here to read more about the Search Module Global Styling!

 

Anything we’ve not covered?

Contact Us