How to modify Searchanise widgets appearance Print

Modified on: Fri, Feb 28, 2020 at 6:46 PM


Introduction

There may be times when you’d want to change the look of the Searchanise app. The following instructions will be helpful in case you need to change the font size, adapt widgets’ design to the theme of your store, hide the price of a certain product, etc.

Searchanise loads its styles from our servers and there is no way to edit files directly from the user side. In order to change the look of a widget, you can use Custom CSS functionality.

Note! 
We strongly recommend against the usage of external files to store Searchanise CSS styles.

It can lead to the following issues:
1. In case of theme updates, all edits you’ve made will be rewritten.

2. In case we redesign our app, we won’t be able to check if everything works fine with your own styles.


General

For convenience, we divide Searchanise into several widgets: Instant Search widgetSearch results widget (Filters on collections/Smart Navigation), Recommendation widget.

In case there is no search bar in the theme layout, the Sticky widget will appear by default. You can change the Sticky widget configuration in the Instant search widget settings.

All Searchanise HTML elements contain the class starting with
snize- prefix. Some of the mobile widgets contain the snize-mobile-design class additionally.

Note! For each widget's block, an example of HTML structure is shown below. Please note, the following examples aren’t universal, so for proper customization please inspect the current widget’s structure in your store through the web-inspector (you can find it in the context menu by clicking the right mouse button and choosing the Inspect Element option).


CSS selectors for widgets:

.snize-sticky-searchbox - the Sticky widget floating button. 


#snize-modal-sticky-searchbox - the Sticky widget modal window with an input field.


div.snize-ac-results - the Instant search widget container. The snize-ac-results-mobile class is added for mobile devices when the Optimize for phones and tablets option is enabled.


div.snize-search-results - the Search results widget container. The snize-mobile-design class is added for mobile devices.


#snize-modal-mobile-filters-dialog - the Search results widget modal window for filtering on mobile


#snize-modal-mobile-sortby-dialog - the Search results modal window with the sorting option on mobile.


div.snize-recommendation - the Recommendations block container. The snize-mobile-design class is added for mobile devices.


Common solutions

CSS rules can be applied in the Instant search widget / Search results widget > Custom CSS tab.


1. Adding the text to the product price:

You need to add the following CSS rule:

div.snize .snize-price:after {

   content: " inc tax";

}


CSS rule to show text before the product price:


div.snize .snize-price:before {

   content: "from ";

}


In Shopify, you can specify the minimum price for the product with the Choose the product price to show option for the best effect.


2. Changing the color of review starts

To do so you need to change the default color “fec602” to the desired one:

div.snize .stars-container:after, .snize-modal-content-wrapper .stars-container:after {

    color: #fec602;

}



Instant search widget

Before you make any CSS changes, we’d like to remind you that you can also hide or display the price, price without discount, image, product description, and some other options with the default widget settings. If you want to hide suggestions, pages, collections or products, please choose the 0 value in the corresponding option in the Instant search widget > Content tab.


If those options aren't enough to achieve the look you want, you can make additional tweaks with Custom CSS. You can find the structure of the elements and examples below.


Note! The widget container automatically calculates its position based on the search bar position.

 

Section description

The first three containers mentioned below wrap all other blocks in the dropdown widget.


General container

Classic template

<div class="snize-ac-results">

    <div class="snize-dropdown-arrow">

        <div class="snize-arrow-outer"></div>

        <div class="snize-arrow-inner snize-arrow-inner-label"></div>

    </div>


    <ul>

        [[[ optimized mobile query input ]]]

        

        [[[ main content ]]] 

    </ul>

</div>


Single Column template

<div class="snize-ac-results">

    <div class="snize-dropdown-arrow">

        <div class="snize-arrow-outer"></div>

        <div class="snize-arrow-inner snize-arrow-inner-label"></div>

    </div>


    <div class="snize-ac-results-content">

        [[[ optimized mobile query input ]]]


        [[[ main content ]]]

    </div>

</div>


Multi Column template

<div class="snize-ac-results">

    <div class="snize-dropdown-arrow">

        <div class="snize-arrow-outer"></div>

        <div class="snize-arrow-inner snize-arrow-inner-label"></div>

    </div>


    <div class="snize-ac-results-content">

        <div class="snize-results-html"></div>

        <div class="snize-ac-results-columns">

            <div class="snize-ac-results-column">

                [[[ pages, categories, suggestions ]]]

            </div>

            <div class="snize-ac-results-column">

                [[[ products ]]]

            </div>

        </div>

    </div>

</div>

Did you mean

This block contains possible autocorrections for the user’s query and is displayed in case the search query returns no results. If the Auto spell correction feature is enabled, the mentioned block isn’t displayed. 


<li class="snize-label snize-removable">Products</li>

<li class="snize-no-products-found snize-removable">

    <div class="snize-no-products-found-text">

        <span>Sorry, nothing found for <b>incorrect query</b>.</span>

        <span>Showing <b>3</b> results for "<a class="snize-no-products-found-link" href="#">correct query</a>"</span>

        <div class="snize-did-you-mean">

            <span>Did you mean: <a class="snize-no-products-found-link" href="#">correct query</a>?</span>

        </div>

    </div>

</li>


Suggestions

Each suggestion is wrapped in a block with the snize-suggestion class. In the settings, you can specify what the app should display one-word suggestions, or automatically generated suggestions.

The structure example:  


<li class="snize-label snize-removable">Popular suggestions</li>

<li class="snize-suggestion snize-ac-odd snize-removable">Suggestion name</li>

<!-- Other suggestions are located here, limited by the Suggestion qty. option -->


Collections/Categories

Each category (collection in Shopify) is wrapped in a block with the snize-category class. Categories/Collections structure example:

<li class="snize-label snize-removable">Categories</li>

<li class="snize-category snize-ac-even snize-removable">

    <a class="snize-view-link"><strong>Category name</strong></a>

</li>

<!-- Other categories are located here, limited by the Categories qty. option -->


Pages

Each page is wrapped in a block with the snize-page class. Example of a page structure:


<li class="snize-label snize-removable">Pages</li>

<li class="snize-page snize-ac-odd snize-removable">

    <a class="snize-view-link"><div class="snize-page-img"></div>Page name</a>

</li>

<!-- Other pages are located here, limited by the Pages qty. option -->


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’s ID.


For each discounted product the snize-price-with-discount class and the element with the discounted price are added to <span class=”snize-price”>. In case the Discount Label feature is enabled in the settings, the label will be added to the <div class="snize-product-label snize-product-discount-label"> element. 


<li class="snize-label snize-removable">Products</li>

<li class="snize-ac-odd snize-product snize-ac-even snize-removable snize-ac-over-nodrop" id="snize-ac-product-<ID>">

    <a class="snize-item clearfix">

        <span class="snize-thumbnail">

            <img class="snize-item-image" src="" />

        </span>

        <span class="snize-overhidden">

            <span class="snize-title">Product name</span>

            <span class="snize-sku">Product SKU</span>

            <span class="snize-description">...</span>

            <div class="snize-price-list">

                <span class="snize-price snize-price-with-discount">$10.00</span>

                <span class="snize-discounted-price">$0.00</span>

                <!-- Discount label -->

                <div class="snize-product-label snize-product-discount-label">

                    <span class="snize-left-arrow"></span>100% off

                </div>

            </div>

            <span class="snize-in-stock">Product status</span>

        </span>

    </a>

</li>

<li class="snize-separator snize-removable"></li>

<!-- Other products are located here, limited by the Products qty. option -->


Nothing found

The Nothing found block is displayed when nothing has been found by the search. You can change the message in the Translations tab.


<li class="snize-nothing-found snize-removable">

    <span>Sorry, nothing found for <strong>completely incorrect query</strong>.</span>

</li>


Custom HTML

These settings allow adding HTML blocks to the Instant search widget.

Show content on focus
This block is displayed when the cursor hovers over the search bar. Default settings:


<br><i>Start typing for instant search results</i><br><br>


Extra content

This block is displayed after the last block in the Instant search widget > Content > Search results order setting. Default value: 


<div style="text-align: center;">

    <a href="#" title="Exclusive sale">

        <img src="https://www.searchanise.com/images/sale_sign.jpg" style="display: inline;" />

    </a>

</div>


"Nothing found" content

This block is displayed when nothing has been found. Default settings:

<p>Sorry, nothing found for [search_string].</p>

<p>Try some of our <a href="#" title="Bestsellers">bestsellers →</a>.</p>


Customization examples

1. How to change the color of a product title?

In the Colors tab, please look for the Item title palette and change its color.


2. How to display a mobile widget upon clicking on the icon?

Please add the snize-custom-widget-opener class to the necessary element. Example:

<i class="icon-search snize-custom-widget-opener" ..>


3. How to disable Searchanise in certain search boxes or certain themes?

To disable Searchanise widgets, please add the snize-exclude-input class to the search input field, for example: 


<input class="snize-exclude-input" ..>


To enable Searchanise only in one theme of your store, you need to add the snize-exclude-input class to all search input fields in all themes, except the one you need.


4. How to hide the price of a certain product?

To do so, please add the following Custom CSS and replace <ID> with the ID of the necessary product:

div.snize-ac-results li.snize-product#snize-ac-product-<ID> div.snize-price-list {

    visibility: hidden;

}


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.



Search results widget

Settings for this widget are located in the section of the same name in the Searchanise control panel. In case these settings are not enough, you can use Custom CSS.


Note! This widget is also used by Filters on collections(Smart Navigation), the differences between them are:

  • Smart Navigation doesn’t show pages and collections in search results

  • The results section is hidden (Products, Categories, Collections), also the search box is hidden, the frame around results’ section and the frame around sorting dropdown are hidden. The «Showing 128 results for «Cat» (where «Cat» is collection name) text moved to the results’ section position.

  • Collections’/Categories’ filter is disabled.

Sections description

General container

This container wraps around all other blocks. The snize-options class is added to the container in case the Display options swatches feature is enabled. If Filters on collections (Smart Navigation) is enabled, the snize-collection-mode class is added to the general container on category/collection pages.


<div class="snize snize-search-results" id="snize_results">

    [[[ main content ]]]

</div>


Main panel

It contains tabs for products, collection/category, and page navigation. It also contains the sorting dropdown and icons for the Grid/List view.

<div class="snize-main-panel">

    <div class="snize-main-panel-controls">

        [[[ tabs content ]]]

    </div>

    <div class="snize-main-panel-view-mode">

        <a href="#" class="snize-view-mode-icon snize-grid-mode-icon active"></a>

        <a href="#" class="snize-view-mode-icon snize-list-mode-icon"></a>

    </div>

    <div class="snize-main-panel-dropdown">

        <a href="#" class="snize-main-panel-dropdown-button"></a>

        <ul class="snize-main-panel-dropdown-content">

            [[[ sorting content ]]]

        </ul>

    </div>


    <!-- Filters’ button appear only on mobile platforms -->

    <div class="snize-main-panel-mobile-filters">

       <a href="#">Filters<span class="snize-selected-filters-count-container"></span>

       </a>

    </div>

</div>


Heading

It contains text with the number of found products. The example below shows HTML for Filters on collections (Smart Navigation). For the search query, the text changes to Showing [count] results for [search_string].


<div class="snize-header">

    <div class="snize-search-results-header">Showing 5 results</div>

</div>


Filters

Desktop

Filters can be displayed at the top of the Search results widget and on the left side. You can choose which set of filters to show or hide in the Search results widget Filters tab. You can also disable showing filter variants with no results here.


The structure of the left-side set of filters is shown in the example below. <ATTR> is replaced by the filter code, e.g. price, category.

<div class="snize-filters-sidebar snize-product-filters">

    <div id="snize_filters_block_<ATTR>" class="snize-product-filters-block">

        <div class="snize-product-filters-title open">

            <i class="snize-product-filters-close"></i>

            <i class="snize-product-filters-open"></i>

            <span>Filter name</span>

        </div>

        <ul class="snize-product-filters-list">

            [[[ filters content ]]]

        </ul>

    </div>

</div>


Mobile

A separate structure is used for filters on mobile devices. They are displayed in the modal window.

Below you will see the example of a modal window having only the In-stock filter in it. 

This filter is associated with two general blocks. The first block with the snize-products-filters-list-container class contains the list of all available filters having the snize-product-filter-opener class. The second block with the snize-product-filter-container class contains filter values.


In the example below <ATTR> is displayed instead of the filter code (e.g. price, category).


<div id="snize-modal-mobile-filters-dialog" class="snize snize-modal">

    <button class="snize-close-button"></button>

    <div class="snize-modal-content">

        <div id="snize_filters_block_header" class="snize-product-filters-header">

            <span class="snize-product-filters-title">Filters</span>

        </div>

        <div id="snize_filters_block" class="snize-product-filters-list-container">

            <div class="snize-product-filter-opener" data-se-facet-attribute="<ATTR>"><span class="snize-product-filter-title">In stock</span></div>

        </div>

        <div id="snize_product_filter_<ATTR>" class="snize-product-filter-container" style="display: none;">

            <ul class="snize-product-filters-list">

                [[[ main content ]]]

            </ul>

        </div>

        <div class="snize-product-filters-buttons-container">

            <button class="snize-product-filters-show-products">Show 10 products</button>

            <button class="snize-product-filters-reset-all">Reset filters</button>

        </div>

    </div>

</div>


Products

Each product is wrapped into the block with the snize-product class and the snize-product-<ID> ID attribute. The Searchanise settings allow you to adjust the number of strings in the product description and title, and the number of products shown per page.


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 class selected is defined by the page width.


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

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


<div class="snize-search-results-main-content">

    <div id="snize-search-results-grid-mode" class="snize-three-columns">

        <ul class="snize-search-results-content clearfix">

            <li class="snize-product" id="snize-product-<ID>" data-product-variant="<VARIANT_ID>">

                <a href="#" class="snize-view-link" data-no-instant="true" draggable="false">

                    <div class="snize-item clearfix">

                        <div class="snize-thumbnail-wrapper">

                            <span class="snize-thumbnail"><img src="" class="snize-item-image" alt="" border="0"></span>

                        </div>

                        <span class="snize-overhidden">

                            <span class="snize-title"></span>

 <div class="snize-price-list"></div>

 <span class="snize-out-of-stock"></span>

 <button class="snize-button snize-action-button snize-view-product-button">View product</button>

                        </span>

                    </div>

                </a>

            </li>

        </ul>

    </div>

</div>


Quick view

You can select to show the Quick View button in the Search results widget > Content tab. After the Quick View button is clicked, the modal window with product images, quantity and option variants appears.


Note: The Quick View button isn't displayed on mobile devices.


The structure below represents two blocks located on the left and right sides of the modal window. The image of the product is located in the left block. The product information, options, and Add to cart button are located in the right block.


<div id="snize-modal-product-quick-view" class="snize-modal">

    <button class="snize-close-button"></button>

    <div class="snize-modal-content-wrapper">

        <div class="snize-quick-view-content-left">

            <a href="#" data-no-instant="true">

                <div class="snize-quick-view-image-wrapper">

                    <img src="" class="snize-quick-view-image">

                </div>

            </a>

        </div>

        <div class="snize-quick-view-content-right">

            <a href="" class="snize-quick-view-title" data-no-instant="true"></a>

            <div class="snize-quick-view-price-wrapper">

                <span class="snize-price"></span>

            </div>

            <div class="snize-quick-view-reviews-wrapper"></div>

            <div class="snize-quick-view-description"></div>

            <a href="#" class="snize-quick-view-show-more" data-no-instant="true">View full details</a>

            <div class="snize-quick-view-form-wrapper">

                [[[ product form ]]]

            </div>

        </div>

    </div>

</div>


Pagination

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 Search results widget Content tab.


Down below you will find an example of the numeric pagination with an active first page that has the active class.


<div class="snize-pagination">

    <ul>

        <li><span class="snize-pagination-prev disabled">«</span></li>

        <li><a href="#" class="active">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

        <li><span>...</span></li>

        <li><a href="#">99</a></li>

        <li><a href="#" class="snize-pagination-next">»</a></li>

    </ul>

</div>


Customization Examples


1. How to change product price color?

You can change it in the Search results widget > Color tab with the Product prices palette.


2. How to change the number of products per row?

To increase the number of columns, please add the following CSS rule:


#snize-search-results-grid-mode li.snize-product {

    min-width: 190px; }


Try changing the 190px value to the larger or smaller number until you get the desired result.


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

Please add the following CSS rule: 


div.snize ul.snize-product-filters-list .snize-filter-variant-count {

    display: none;

}


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

Please add the following CSS rule:


div.snize div.snize-main-panel-controls ul li a span {

    display: none;

}


5. How to change the element to which the page scrolls up/down after updating the widget (for example, after selecting a filter variant)?

Please add the snize-results-custom-scroll class to one of the elements to which the page will scroll. In this example we add the snize-results-custom-scroll class to the <body> tag so the page will scroll to the top.


<body class="snize-results-custom-scroll" ..>


Recommendations

You can find a default set of customization settings in the Recommendation section of the Searchanise control panel. If they are not enough, you can use the Settings tab and add CSS rules.


Section description

General container

This container wraps around the products block. The root element has a different structure for the Magento platform:


<div class="snize-recommendation-wrapper" data-page-type="...">


In the example below we showed a container with just one recommendation block. You can add more blocks. The widget contains the searchanise-recommendations class and a unique ID. Navigation arrows are located on the left and right sides.

<div class="snize-recommendations page-width">

    <div class="searchanise-recommendations" id="<WIDGET_ID>">

        <div class="snize-recommendation">

            <h3 class="snize-recommendation-title">Title</h3>

            <div class="snize-recommendation-results">

                <a class="buttons prev disable" href="#">

                    <div class="snize-recommendation-arrow"></div>

                </a>

                <div class="viewport">

                    [[[ main content ]]]

                </div>

                <a class="buttons next" href="#">

                    <div class="snize-recommendation-arrow"></div>

                </a>

            </div>

        </div>

    </div>

</div>


Products

The structure is the same as the Search results widget structure. 


<li class="snize-product" id="snize-product-<ID>">

    <a href="#" class="snize-view-link" data-no-instant="true" draggable="false">

        <div class="snize-item clearfix">

            <div class="snize-thumbnail-wrapper">

                <span class="snize-thumbnail"><img src="" class="snize-item-image" alt="" border="0"></span>

            </div>

            <span class="snize-overhidden">

                <span class="snize-title"></span>

                <div class="snize-price-list"></div>

                <span class="snize-out-of-stock"></span>

                <button class="snize-button snize-action-button snize-view-product-button">View product</button>

            </span>

        </div>

    </a>

</li>


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.