24/7 Support: 800.608.6482



Videos | Runtime Search - Search Preview

We’ve improved the Runtime Search Feature in Miva as well as added a Search Preview so your customers can now see a product image, along with other variants or attributes that you chose to display in the search preview window.
ver. 9.6 and later

Video Transcript

In this video we'll go over Search Preview and Improved Search Overview. 9.7 includes some improvements to the native site search for customers. Historically, when someone performed a search on a Miva store, it only searched product code, sku, name and description fields. Now you have the ability to choose which field you want searchable and these fields have been expanded to include attributes, options and custom product fields. In this video we'll cover an overview of the new search preview and improved search overview, we'll cover setup and installation, search settings and search preview settings. Here's an example of when we did a search on a product. We can now see the product code, the product name and the product price. 

Setup and Installation
To add this feature to your store, you'll need to add the search field item to each page or all pages you want the search preview to appear on. To do this, you'll click on your Menu, scroll down to User Interface, make sure you're on your Pages tab. We'll search for our Storefront page. Go ahead and click and open the page. Click on your Items tab. We'll go ahead and do a search over here for our search field. Here you'll see the CSSUI Search Field item. We'll click on the toggle switch and assign this item to our storefront page. Assigning this item to any page will automatically cause Miva to add the required JavaScript needed to make this feature work. This code gets output in the head tag. Now that we've added the item to the page, there is now a new search field item which outputs the search input field and html needed for the search preview. However, you can use your own inputs as long as you have the required data elements. Here's an example for required elements. 

Search Settings
The layout of the Search Preview can be customized to any UI you like. This is done under the new Search Settings section. To get to your Search Settings click on Menu, scroll down to User Interface and click on Search Settings. Here you'll see the Search Settings tab. Currently we have Product Code, Product Name, Product Sku and Product Description which were included in your search in the Miva store. Now we have these additional search features: Attribute Code, Attribute Prompt, Option Code and Option Prompt. If you care to add any of these so that your customers can search through them all you have to do is check the checkbox and click your Update button. 

Searchable Custom Fields
You can now include your custom fields in your search selection. In this instance I'm using our custom field Brand. When you click the Update button, you can now switch over to your storefront, click Refresh and then when a customer types in a particular brand, in this instance I typed in Gems Jewels, you can see how it brought up this one product that falls under that category. 

Here you'll see we can not only search by brand, but we can also display the brand in the search preview results. Let me show you how we do that. We'll go back to our Admin, we'll scroll down to Display Custom Fields. 

Displayable Custom Fields
Earlier we covered the searchable custom fields under Search Settings. Now we're going to go over the Displayable Custom Fields. I want Brand to show up in my display for the search, so I'm going to go ahead and click on my "Brand" custom field and I'm going to move it over to the right by clicking on the Select button. I'll now click update and then go view my live store. Now when a customer types something in, you can now see the Brand in the display for the product, so not only is it searchable, but it displays in the preview as well. If I were to turn it off or remove it, you would see that the Brand custom field no longer would display in the search preview. They could still search it, but it wouldn't display. 

Search Preview Settings
If you wanted to change the look and feel of your search results here that your customers see, you can come over to the Admin and under Search Preview Settings you'll see where it says Template. Here you can go in and edit the code and the CSS to change the look and feel for how you would like it to look. This area gives you UI control over the Search Preview layout. You first need to switch to Advanced Mode to see the Template. This template can be customized to support any layout and CSS styling. You can also display additional data such as Sku, Weight, Description, Inventory, Image Types, Inventory and Custom Fields. 

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.


Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.