✕
View Categories

Search bar

VotraLee stands out among the themes available on the Shopify theme store by providing an AI-powered voice search feature.
Additionally, the Search prompts serve as an enticing tool which will guide and inspire customers to explore and search for particular products, collections or pages. It will also quickly introduce customers to your product range and accelerate the time it takes for them to familiarize themselves with your store’s offerings.

How to set up predictive search #

As the customer types their search term into the search bar, relevant products, collections, pages or blog articles can dynamically appear. Suggested search queries can also be shown. Select the content for the predictive search using the Shopify Search & Discovery app, read Shopify Search & Discovery guide for further information.
Steps
  1. Open the Theme editor, and click on Theme Settings > Search.
  2. Within the Search settings, check the Enable predictive search setting and set further options such as whether to Show product vendor, Show product price, Search SKUs and Search tags.
  3. Click Save.

 

Note

Use the Shopify Search & Discovery app to select what to show: suggestions (queries), products, collections, pages and blog articles.

How to set up product type dropdowns #

In version 1.3.0 and later, there is also the functionality to show a type dropdown next to the header search box, thereby allowing customers to pick a particular product type to search.

 

Steps
  1. Open the Theme editor, and click on Theme Settings > Search.
  2. Within the Product types settings, select Enable product type dropdown.
  3. Click Save.

 

Note
If the product type dropdown is used, be sure to add the product type filter within the Shopify Search & Discovery app.

How to set up speech to search #

 

Steps
  1. Open the Theme Editor, and click on Theme Settings > SEARCH.
  2. Within the Speech search settings, check the Enable speech search setting.
  3. Choose the desired color in the Speech pulse color setting. The mic icon will pulse this color when it’s listening.

 

Note
Speech search is not supported by all devices/browsers. The option will not present itself to the customer when a device is not compatible.

How to set up search prompts #

Search prompts are subtle animations in the search bar that can be a great way to attract a customer’s attention and quickly familiarize themselves with your product range.

 

Steps
  1. Open the Theme Editor, and click on Theme settings > SEARCH.
  2. Within the Search prompts settings, add the prompts that you would like the search bar to reveal.

 

On mobile, if the prompt’s text is longer than the display area of the mobile device it will get cut off.
To disable and display static text scroll down and uncheck Type in search prompts on mobile. When this is enabled, the first prompt you entered will be displayed as static text on mobile devices so ensure it makes sense when read out of context of the other two messages.

How to add a custom collection message #

VotraLee allows you to add a custom message below each collection within your search suggestions. This could be used to highlight any distinguishing feature about a collection, e.g. it may have products that are on sale, or could be a new collection.

 

Steps
  1. Open the Shopify admin and click on Settings > Custom Data > Collections > Add definition
  2. Under Name add any text that helps you identify it, e.g. ‘Collection label’.
  3. Under Namespace and key add ‘theme.label’.
  4. Under Select type select Single line text.
  5. Ensure One value is selected and click Save.
  6. Now that the metafield has been added, it will need to be assigned to the relevant collections on which it should appear. To do this, navigate to Products > Collections and select the relevant collection.
  7. Scroll down to the Metafields area.
  8. Select the collection metafield created above and enter the Custom collection message.
  9. Click Save.

 

After a minute or two, you should be able to search and see the Custom collection message appear under the collection.

How to hide/minimize the search bar #

 

Steps
  1. Open the Theme Editor, and click on the Header section.
  2. Within the Search settings, you can control how the search bar can be displayed based on the device. Or it can be disabled entirely.

What are your Feelings

  • Happy
  • Normal
  • Sad