Videos

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. 

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. 

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. 

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. 

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.