CSS customization of Search Results Widget

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

Searchanise allows customizing the appearance of the Search Results Widget using the Custom CSS feature. 

Notes

  • The Custom CSS feature is available on the PRO and Advanced / Game-Changer subscription plans for BigCommerce, WooCommerce, Magento, CS-Cart.
  • You need to have basic CSS knowledge to use the feature. If you face any troubles, please get in touch with us.

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

The structure of the widget

Note

To customize CSS correctly, we recommend inspecting the element you would like to change 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.

General container

The general container wraps all other blocks and has the snize-search-results class. The snize-mobile-design class is added on mobile devices when the Optimize for phones and tablets option is enabled.

The snize-options class is added to the container if the Display options swatches setting is enabled in the Searchanise (Smart Search & Filter) control panel > Search results widget section > Content tab. This setting is available for Shopify only.

Main panel

The main panel contains products, collections/categories, and pages tabs.

CSS customization of Search Results Widget

It also contains the sorting drop-down list and the Grid/List view icons for the Modern and Big Pictures Legacy templates and the template on the Wix platform.

CSS customization of Search Results Widget

Heading

The heading contains the text with the number of found products.

CSS customization of Search Results Widget

Filters

Desktop

Filters can be displayed at the top of the widget and on the left side.

The image below shows CSS of left side filters schematics:

CSS customization of Search Results Widget

The image below shows CSS of top filters schematics:

CSS customization of Search Results Widget

Mobile

A different structure is used for Filters on mobile devices. They are displayed in the pop-up window.

CSS selectors:

  • #snize-modal-mobile-filters-dialog – the pop-up filter window on a mobile device
  • #snize-modal-mobile-sortby-dialog – the pop-up sorting window on a mobile device (for the Modern and Big Pictures Legacy templates and the template on the Wix platform)

The block with the .snize-product-filter-container class contains filter values.

The image below shows CSS schematics for the Big Pictures template on Shopify, WooCommerce, Magento, BigCommerce:

CSS customization of Search Results Widget

CSS customization of Search Results Widget

Products

Each product is wrapped in the block with the snize-product class and the snize-product-<ID> ID attribute.

The Grid layout uses the snize-search-results-grid-mode ID attribute.

The number of columns for the Grid layout is defined by the snize-one-column, snize-two-columns, snize-three-columns, snize-four-columns, snize-five-columns classes. The page width defines the class.

The List layout uses the snize-search-results-list-mode ID attribute.

The image below shows CSS schematics:

CSS customization of Search Results Widget

Quick view

Note

  1. The Quick view feature is available on Shopify and BigCommerce only.
  2. It is only available for the desktop version of the Search Results Widget. The View product button is appeared instead of the Quick view button in the widget.

The main block of the Quick View pop-up window has the snize-modal class.

The image below shows CSS schematics:

CSS customization of Search Results Widget

Pagination

The main block of the pagination has the snize-pagination class.

The image below shows CSS schematics:

CSS customization of Search Results Widget

There are two more pagination methods besides the common numeric pagination variant:  Endless scrolling and the Show more button. You can change the pagination method in the Searchanise (Smart Search & Filter) control panel > Search results widget section > Content tab.

CSS customization examples

How to hide the number in the brackets of filter values?

Add the following CSS rule:

div.snize ul.snize-product-filters-list .snize-filter-variant-count {
    display: none;
}

How to hide the number in the brackets of tab headers?

Add the following CSS rule:

div.snize div.snize-main-panel-controls ul li a span {
    display: none;
}

How to increase the number of products per row?

See the instructions here.

Adjust Custom CSS

Steps:

  1. Go to the Searchanise (Smart Search & Filter) control panel > Search results widget section > Custom CSS tab.
  2. Set the Custom CSS toggle to ON if it is OFF.
  3. Paste your CSS rules into the text area.
  4. Apply the changes.

CSS customization of Search Results 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 September 20, 2022

Was this article helpful?

Related Articles

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