CSS customization of Instant Search Widget

This article is general for Shopify, BigCommerceWix, WooCommerce, Magento 1, Magento 2, CS-Cart.

The Searchanise app allows customizing the appearance of the Instant Search Widget using the Custom CSS feature. 

Notes

  • The Custom CSS feature is available on the PRO and Advanced subscription plans.
  • You need to have basic CSS knowledge to use the feature. If you face any troubles, please contact us.

In this article, you’ll learn how to adjust Custom CSS and will find the structure of the Instant Search Widget that can help you create the CSS rules.

The widget’s structure

Note

To customize CSS correctly, you need to view the current widget’s structure in your store using the web inspector in the Elements tab. In Google Chrome you can go to the web inspector by pressing the F12 key.

The snize-ac-results class is used for the general container. The snize-ac-results-mobile class is added for mobile devices when the Optimize for phones and tablets option is enabled.

The app automatically calculates the widget position based on the search bar location.

General container

The general container wraps all other blocks in the drop-down widget. There are 2 template types for the general container (Single Column, Multi Column), which you can select in the Instant Search widget section > Colors tab.

Single Column template

CSS customization of Instant Search Widget

Multi Column template

CSS customization of Instant Search Widget

Important info

The Classic template is out-of-date. You can see it in the list only if it is chosen at the moment.

Did you mean

This block contains possible autocorrections for the user query and is displayed if the search query returns no results. The mentioned block is not displayed if the Auto spell correction option is checked in the Preferences section > Products tab.

CSS customization of Instant Search Widget

Suggestions

Each suggestion is wrapped in a block with the snize-suggestion class.

Collections/Categories

Each category/collection is wrapped in a block with the snize-category class.

Pages

Each page is wrapped in a block with the snize-page class.

Products

Each product is wrapped in a block with the snize-product class and has an ID attribute with the snize-ac-product- prefix, which contains the product ID.

For each discounted product the snize-price-with-discount class is added to the <span class=”snize-price”> element along with the discounted price. In case the Discount Label is shown, it will be added to the <div class=”snize-product-label snize-product-discount-label”> element.

Nothing found

The Nothing found block is displayed when the search returns no results. You can change the message in the Translations section or use the “Nothing found” content setting of the Custom HTML feature.

Custom CSS examples

How to add text to product prices?

See the instructions here.

How to hide the price of a certain product?

Add the following CSS rule and replace <ID> with the ID of the necessary product:

#snize-ac-product-<ID> .snize-price-list {
    visibility: hidden;
}

If you use Shopify, you can find the product ID in the Shopify admin panel on the product page in the address bar. An example of the product ID: shop.myshopify.com/admin/products/3708537765993. The product ID is the last numeric part.

Adjust Custom CSS

Steps:

  1. Go to the Searchanise (Smart Search & Filter) control panel > Instant search widget section > Custom CSS & HTML tab.
  2. Select the Custom CSS checkbox if it is disabled.
  3. Paste your CSS rules into the text area.
  4. Apply the changes.

CSS customization of Instant Search Widget

If the applied CSS rules didn’t affect the widget appearance well, it’s always possible to switch off the Use custom CSS setting and apply the changes.

If you face any troubles, please contact us, and we will be glad to help you.

Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review. To do so, follow the link to your respective platform below:

Updated on July 19, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support
Back to top