3 instantsearch+ customizing- table of contents...

1 Overview #2

2

AutoComplete Dropdown Customization #3

1 Dashboard Configuration #4

2 Advanced Style Customization #5

3 CSS Overrides #6

4 CSS Overrides Examples #7

3Search Results Page Customization #8

1 Dashboard Configuration

2 CSS Overrides #9

3 CSS Overrides Examples #10

4

Advanced HTML Customization using JavaScript #21

1 IS+ Options JavaScript definitions #22 8 IS+ Quick View Examples #55

2 ISP_PRODUCTS Documentation #24 9 IS+ No Results Examples #58

3 IS+ Dropdown Examples #25

4 IS+ Recommendation Examples #36

5 IS+ Collections Examples #38

6 IS+ Search Results Examples #40

7 IS+ Facets Examples #54

InstantSearch+ Customizing- Table of Contents

InstantSearch+ CustomizingInstantSearch+ features are designed to fit your site by inheriting your site's design. In case additional customization is needed, there are a few ways to achieve that:

Overview

InstantSearch+ Dashboard ConfigurationDisabling a feature you don't need or adding one you desire to your Premium Search Results Page or AutoComplete Dropdown, might be one click away. We recommend you to start by taking a look at InstantSearch+ dashboard sections.

Style Customization using CSS overridesRequires HTML and CSS FamiliarityChanging the style of your site's premium search results page or AutoComplete Dropdown is possible via CSS overrides. You can change the design of the search results features: colors, fonts etc.This document gives guidelines for the easiest way to do so, and includes specific examples for popular customizations you can implement to your site.

HTML Content Customization using IS+ JavaScript Callback Requires Web Development expertiseAdding details to your site's premium search results page is possible via a JavaScript callback function.It is called upon the rendering of the InstantSearch+ search results.

2

2. IS+ AutoComplete Dropdown Customization

2.1. IS+ AutoComplete Dropdown Dashboard Configuration

We recommend you start by taking a look at InstantSearch+ AutoComplete Configuration section. [InstantSearch+ dashboard > AutoComplete tab]. You can preview the changes as you go, using the InstantSearch+ preview- for easy, visual customization.

GeneralDefine which content will be shown on the dropdown.• Change the number and order of products, categories and popular searches suggestions.• Disable categories suggestions – do not show any categories. • Hide product descriptions – uncheck if you wish to see the description.

StyleThese settings allow you to change the style of the dropdown content. (Products, categories, popular suggestions and their headers)• Text color – when drop down appears. • Hover text color – the color of text after placing the cursor over the product.• Hover background gradient top, Hover background gradient bottom – the color of product background after placing the cursor over the product.• Headers background, Headers text color – change the Headers style ("Products", "Categories", "Popular searches")

3

Dropdown style Change the style of the dropdown box. Note that you can reset to default at any time.• Dropdown layout– you can choose between two dropdown layouts:

Vertical dropdown layout (default): Or Horizontal dropdown layout:

• Dropdown background color – when dropdown appears• Width (px) – you can change the dropdown box width. • Max description characters – if you chose to show the description.• Border color, Border width (px), Border radius (px) – border settings.• Shadow color, Shadow horizontal (px), Shadow vertical (px), Shadow blur (px) – shadow settings.

4

2.2. IS+ AutoComplete Dropdown Advanced Style Customization

Additional configuration to your site's AutoComplete Dropdown is possible on InstantSearch+ AutoComplete tab – Advanced style section. In the advanced style section you will find additional configurations that allow you to change and add content to the dropdown. (This section also includes the option to add CSS style rules, discussed below.)

Advanced StyleAdd a URL of an image that will be shown in the following cases: • Ranked Product Badge image – the image will be shown next to 'always' ranked products.• Default Category thumbnail image – to be used when a category does not have an associated image.• Default Product thumbnail image – to be used when a product does not have an associated image.

These settings Require HTML and CSS Familiarity:• Bottom HTML Banner – add an HTML banner to the bottom of the drop down list with every suggestion. • This can be useful for an ongoing promotions, sales, gift cards, or any other banner that you want displayed

for any search. • For example: <a href="/your-list-goes-here"> • Custom CSS - InstantSearch+ allows adding custom CSS. This option is discussed in the next section.

5

2.3. IS+ AutoComplete Dropdown Advanced Style Customization - CSS overrides

Changing the style of your AutoComplete dropdown is possible via CSS overrides. You can use the rules examples on this document, or create your own CSS rule.After creating the desired rule, paste it in the "Custom CSS" box on InstantSearch+ Dashboard > AutoComplete tab > Advanced Style:

6

2.4 IS+ AutoComplete Dropdown CSS Overrides ExamplesThis section contains basic CSS rules that can be applied to your AutoComplete dropdown:

.ui-autocomplete,

.as_magento_price,.isp_price_compare_at_price_exist,.as_magento_product_name,.as_magento_product_desc,

.as_magento_product_section, .n_b_acp { font-size: 11px !important; font-weight: normal !important; }

🔍 Change the font style

ul.ui-autocomplete .ui-menu-item { margin: 5px 0 !important; }

🔍 Change the space between items

li#acp_footer_css:hover { color: #fff; }li#acp_footer_acp { font-size: 16px !important;)

🔍 Change the "Show-all-results" footer font style

.as_magento_product_sku { display: block !important; }

🔍 Show SKU

@media (max-width: 768px) { @supports (-webkit-overflow-scrolling: touch) { // For Safari only .ui-autocomplete { display: block !important; } } }

🔍 Keep displaying dropdown after scroll on IOS devices (IOS momentum scroll fix)

7

3. IS+ Search Results Page CustomizationDisabling a feature you don't need or adding one you desire to your Premium Search Results Page, might be one click away. We recommend you start by taking a look at InstantSearch+ Search Results Configuration section on InstantSearch+ dashboard > Search Results tab.

3.1. IS+ Search Results Page Dashboard Configuration

Search page functionality: • "Did You Mean" suggestions – suggests visitors’ typo-corrected results.• Related Searches – don't show associated search terms. • Search results sorting – allow visitors to sort results by relevancy, price, popularity or arrival date• InstantSearch+ Search Box – control the appearance of the large InstantSearch+ search box at the

top of• the search results page.• Favorite product marking by end-users – let visitors to create a favorites list of products for easy

access. • Content (blogs, articles, pages) search – allow InstantSearch+ to search your site's content and

display relevant results.

Showing/ hiding information about products: • Add to Cart button – present visitors Add-to-Cart button within the search results page.• Quick View – allow immediate product details view from within the search results page..• Sold Out Banner – add a sold out banner to out of stock products (requires having Out of Stock

sync on)• SKU – show product SKUs on the search results page.• Prices – display or hide prices on the search results page.• Product description – show or hide product descriptions.• Color swatch – show color swatches instead of color names filters. • Badges (Shopify and WooCommerce ) – add products badges to your products, based on products

tags.• The badge will be added to the top left corner. You can modify it using custom CSS, extra details

below.

8

3.2. IS+ Search Results Page Style Customization - CSS Overrides

Changing the style of your site's premium search results page is possible via CSS overrides. You can change the design of the search results features such as colors and fonts. You can use the rules examples on this document, or create your own CSS rule.The easiest way to create a new CSS rule is by:

1. Open the page in Google Chrome2. Right-click on the desired element in the screen.3. Select "Inspect"4. In the Style section hit the "+" sign and override the CSS Rule5. Paste it in the "Custom SERP CSS" box on InstantSearch+ Dashboard

9

3.3 IS+ Search Results Page CSS Overrides ExamplesThis section contains basic CSS rules that can be applied to your InstantSearch+ Premium Search Results Page. General - Search Results Page style

.isp_results_summary_wrapper { display: none !important; }

🔍 Remove the Search Results Page title: "Showing # of results for ..."

li.isp_grid_product { border: none !important; }

🔍 Remove all products borders

.favorite_is-favorited .heart {

fill: #c72929 !important;

stroke: #c72929 !important; }

🔍 Change the favorites hearts color

.isp_sorting_and_result_view_wrapper #isp_search_res_sorting_menu li#search_res_sorting_title { font-weight: normal !important; }

🔍 Change the 'Sort by:' text design (bold to normal)

li.isp_grid_product { width: 30%;height: 75%;}

🔍 Change product default size / change number of products per row

10

3.3 IS+ Search Results Page CSS Overrides ExamplesGeneral - Search Results Page style

li.isp_grid_product div.isp_product_info { font-size: 12px; /* Default size - 17px */}

🔍 Change product description font size

.isp_sold_out_banner_container { /*Change the banner container position*/ }

.isp_sold_out_banner_content { /*Change the “Sold Out” text design*/ }

🔍 Change Sold Out banner design

.isp_sold_out_banner {/*Change the banner rotation and color*/ transform: (45deg); color: red; }

🔍 Change “Sold Out” banner rotation and font color

div.isp_quick_view_content_left div.isp_sold_out_banner_content::after, div.isp_quick_view_content_left div.isp_sold_out_banner_content::before, li.isp_grid_product div.isp_sold_out_banner_content::after, li.isp_grid_product div.isp_sold_out_banner_content::before { border-bottom: red solid 2px; border-top: red solid 2px; }

🔍 Change “Sold Out” banner border color

li.isp_grid_product div.isp_product_info { width: 33.1%; /* bigger ‘%’ = lass product per row */}

🔍 Change product width size / amount of product per row

11

3.3 IS+ Search Results Page CSS Overrides ExamplesProducts

.isp_badge .isp_product_image_wrapper:after { background-size: 100%; background-position: bottom; }

🔍 Product badge position - stretched at the bottom of the product

.isp_badge_TAGNAME .isp_product_image_wrapper:after { bottom: 3px; top: unset; height: unset; content: "LOW STOCK"; background: (0,0,0,0.7); color: white; font-size: 0.7em; }

🔍 Specific product badge position - stretched at the bottom of the product

#isp_product_quick_view_model .isp_compare_at_price, li.isp_grid_product div.isp_product_info .isp_compare_at_price { color: #000 !important; font-style: italic !important; text-decoration: line-through !important; }

🔍 Change 'compare at price' design

12

3.3 IS+ Search Results Page CSS Overrides ExamplesProducts

li.isp_grid_product span.isp_search_term_highlight { background: none !important; }

🔍 Remove search term highlighting

.isp_product_title:hover { color: #000 !important; }

🔍 Change product title color upon hover

.isp_grid_product { border: none !important; background-image: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }

🔍 Remove boxes from products

#isp_search_results_container li.isp_grid_product .isp_product_image {width: 200px !important; /* Custom width */ height: 200px !important; /* Custom height */ }

🔍 Change product image size

13

3.3 IS+ Search Results Page CSS Overrides ExamplesProducts - Color swatches in the product and in the filters

.isp-product-color-swatch-gray { /* replace 'gray' with the color as named in your product variants, omitting non-word characters such as '/' */ background-color: #eeeeee; /* replace with the necessary color */ }

🔍 Customize color swatches for each color

.isp-product-color-swatch-plaid { /* replace 'plaid' with the color as named in your product variants, omitting non-word characters such as '/' */ background-image:URL("https://cdn-gae-ssldefault.akamaized.net/images/swatches/plaid.png"); /*replace with the URL of your own image (20x20 px) */}

🔍 If you want to use an image instead of a plain color, use:

.isp_product_color_swatch .product-color-swatch { width: 20px !important; height: 20px !important; border-radius: 0% !important; border: 1px solid #000 !important; }

🔍 Change the swatch shape to square:

.isp_product_color_swatch .product-color-swatch:hover { border: 3px solid #C97320; }

🔍 Highlight swatch on hover:

14

3.3 IS+ Search Results Page CSS Overrides ExamplesProducts - Color swatches in the product and in the filters

span.extra_swatch_text {display: none !important;} span.isp_product_color_swatch_pop_up {display: block;opacity: 1 !important;} span.minimize_pop_up {display: none !important;}

🔍 Show all Color Swatches

div#single_swatch { visibility: visible !important; }

🔍 Show a single swatch (if the product has only one color variant)

15

3.3 IS+ Search Results Page CSS Overrides Examples

'Add to cart' and 'Quick View' buttons

li.isp_grid_product input[type="submit"].isp_add_to_cart_btn {color: blue !important; /*text color*/ background: green !important; font-size: 12px !important; }

🔍 Change the colors of the 'add to cart' button

input.isp_add_to_cart_btn:hover { background: #000 !important; }

🔍 Change the colors of the 'add to cart' background – upon hover

#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button { color: #000 !important; background-color: (255,255,255,0.9) !important; }

🔍 Change the colors of the quick view button

#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button:hover { color: #000 !important; background-color: (255,255,255,0.9) !important; }

🔍 Change the colors of the quick view button - upon hover

16


'Add to cart' and 'Quick View' buttons

.isp_quick_view_add_to_cart_form input.isp_quick_view_add_to_cart_btn { -webkit-appearance: none !important; }

🔍 Apply quick view button CSS on iPhone (or other Apple products)

li.isp_grid_product form.isp_add_to_cart_form { display: block; /* Display "Add to Cart" button at all times */ }

div.isp_center_container ul#isp_search_results_container li.isp_grid_product { min-height: 435px; /* Make the grid product high enough so the "Add to Cart" button is visible. This is a custom height which might be different for each site */ }

🔍 Make the Add To Cart button always display

#isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button {position: absolute !important; left: 10% !importantwidth: 10% !important; display: block !important; top: 0; }

🔍 Make the quick view button always display on the left corner of the product

17


Review Stars

<script> var __isp_options = { isp_serp_raty_reviews_option: { starType: 'i', // Font-based stars (instead of images)

starHalf: 'spr-icon spr-icon-star-half-alt’, starOff: 'spr-icon spr-icon-star-empty’, starOn: 'spr-icon spr-icon-star’ }

} </script>

<style> .isp_product_info i.spr-icon { font-size: 80% !important; color: #bfa349; } </style>

🔍 Changing review stars color, by switching to font-based stars (For more details: https://github.com/wbotelhos/raty)

.isp_related_wrapper .yotpo { display: inline-block !important; }

.isp_related_wrapper .yotpo-stars { display: block !important; }

.isp_related_wrapper .yotpo .pull-left { text-align: center !important; }

.isp_related_wrapper .yotpo .text-m { display: inline-block !important; }

🔍 Center align review stars to product titles

18


Search Filters

#isp_left_container_facets .isp_search_res_facets_container .isp_facet_value a { color: #000 !important; font-size: 13px !important; }

🔍 Changing the filters values (attribute values) design

.isp_single_facet_wrapper .isp_facet_title .isp_facet_title_name { color: #000 !important; }

🔍 Changing the filters titles (attributes) design

#isp_left_container_facets .isp_search_res_facets_container .isp_single_facet_wrapper { border-bottom: none !important; }

🔍 Removing the borders between the filters

#isp_left_container_facets .isp_search_res_facets_container .isp_facet_value { margin: 4px !important; }

🔍 Spacing out the left sidebar

span.isp_facet_value_counter { display: none !important; }

🔍 Avoid showing the filters counter

19


Search Filters

#isp_left_container_facets .isp_search_res_facets_container .isp_facet_show_hide_values { font-size: 0.75em !important; color: #707070 !important; }

🔍 Changing the ' + Show more' and ' - Show less' design

div#isp_search_results_filter_tags .isp_filter_removable_tag { background-color: #e8e8e8 !important; font-size: 0.8em !important; color: #000 !important; }

🔍 Changing the filters tags design

20

4. IS+ Advanced HTML Customization using JavaScript

You can customize the various look and feel HTML elements of the Search Results, Instant Dropdown and Product Recommendation using the below JavaScript object. The main vehicle is using the JavaScript Callback functions, which are called after the rendering of the InstantSearch+ results.

The JavaScript object should be plugged at the top of your theme HTML. Notice this requires web development expertise. Our examples are provided as is and requires web developer testing before implemented on your site.

21

4.2 ISP_PRODUCTS Documentation

ISP_PRODUCTS is a JavaScript object with the currently viewed products in the search results page. In most situations the web developer will use this Object to change the content of the search results page.

Property Description Type Example

id product identifier Integer id: ”175898317”

sku product SKU code String sku: ”P64”

l Title String l: ” Skinny Jeans”

d Description String d: ”High quality martial!”

p price Float p: ”34.99”

p_c compare at price Float p_c: ”0.00”

p_min variant minimum price Float p_min: ”34.99”

p_max variant maximum price Float p_max: ”37.99”

p_max_c compare at price max Float p_max_c: ”0.00”

p_min_c compare at price min Float p_min_c: ”0.00”

t product image url String t: “https://cdn.shopify.com/...”

v_c number of variants Integer v_c : 3

vra Object containing the list of the product Variants and their attributes and values

Object

vra: Array(3):0: (2) [12190016438396, Array(4)]1: (2) [28257466961, Array(5)]2: (2) [12191863013500, Array(4)]

att product attributes (if enabled) Object

att: Array(3)0: (2) ["Brand", Array(1)]1: (2) [“Shippable", Array(1)]2: (2) [“Fabric", Array(1)]

24

4.3 IS+ Dropdown Examples

<script>function isp_add_to_cart(event, product_id) { document.getElementById('form_' + product_id).submit(); event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); return false; } var __isp_options = { isp_dropdown_callback: function(jquery_li_element, item) { var product_id = jquery_li_element.attr('isp_v_id'); if (!item.id || item.category || !item.product_url) { return jquery_li_element; } var addtocart_html = '<form name="form_' + product_id + '" id="form_' + product_id + '" action="/cart/add?id=' + product_id + '" enctype="multipart/form-data" method="post" style="float: right; margin-bottom: 0px;">'; addtocart_html += '<input name="product_id" type="hidden" value="' + product_id +'">'; addtocart_html += '<input name="action" type="hidden" value="add">'; addtocart_html += '<input type="hidden" id="quantity_' + product_id + '" name="qty[]" value="1">'; addtocart_html += '<input onclick="isp_add_to_cart(event, ' + product_id + ')" type="button" value="Buy!" name="button" style="padding: 0px 10px;">'; addtocart_html += '</form>'; return jquery_li_element.prepend(addtocart_html); } };</script>

🔍 Add an Add-to-Cart button in the instant suggestions dropdown (Shopify)

25

4.4 IS+ Product Recommendation Examples

<script> var isp_related_options = { slider_options_slidesToShow: 4 } </script>

🔍 Change the number of products to be shown in the Product Recommendation widget

<script> var isp_related_options = { STAR_REVIEWS_POSITION: 1 } </script>

🔍 Review stars before price

<script> var isp_related_options = { DISABLE_EXEC_SLIDE: true } </script>

🔍 Control when to initialize the Product Recommendation Slider

<script> __isp_exec_slide(); </script>

🔍 Then, when you want to show the product recommendation:

<script> var isp_related_options = { custom_related_products_render: function (data) { } // handle the related products JSON in your own style }; </script>

🔍 Render recommendation JSON by yourself

36

4.4 IS+ Product Recommendation Examples

<script> var isp_related_options = { LAZYLOAD: "progressive" } </script>

🔍 Load product recommendation images on widget initialization

<script> var isp_related_options = { PRICE_FROM_ALWAYS: true, DECIMALS_REMOVE_ON_ROUND_PRICES: false }; </script

🔍 Show decimals on products recommendations widget

<script> var isp_related_options = { RANDOMIZE: true }; </script>

🔍 Random order of products on the products recommendations widget, upon refresh

<script> var isp_related_options = { WOOCOMMERCE_IMAGE_SIZE = '147x300’ } </script>

🔍 Change the products recommendations widget image size (WooCommerce)

37

4.5 IS+ Collections Examples

<a class="product-vendor vendor" href="https://www.revittle.com/collections/all-products?narrow=[[“Vendor”,”{{ product.vendor }}”]]&category_id=427319060&category_url=%2Fcollections%2Fall-products&disable_semantics=1">{{ product.vendor }}</a>

🔍 Set default collection links on Shopify by vendors (example from www.revittle.com)

<script> var __isp_options = { isp_serp_callback: function() { //Filter order var order = ["Categories" ,"Tags" ,"Price" ,"Color”, “Size”]; if (document.location.pathname.indexOf(!--Name of collection to apply filter order--!) != -1) { for (var i = order.length - 1; i > -1; i--) { $(".isp_facet_title_name").each(function(index) { if (order[i] == $(this).text()) { $(".isp_single_facet_wrapper").eq(index).prependTo( $(".isp_search_res_facets_container")); } }) } } } } </script>

🔍 Change filters order for specific collection

<script> var __isp_options = { isp_serp_callback: function() { $jquery_isp('.isp_single_facet_wrapper').each(function() { if ($jquery_isp(this).find('.isp_facet_value').length === 1) { $jquery_isp(this).remove(); }

}};</script>

🔍 Remove filters with only 1 option

38

4.5 IS+ Collections Examples

{% if collection.handle == 'new-arrivals’ %} <script> var __isp_options = { isp_smart_nav_default_sort: 'creation_date' // 'relevency', 'creation_date’ } </script> {% endif %}

🔍 Change the Default sort order in Smart Navigation per the viewed Collection -

• IS+ Dashboard > Collections tab, set the Default Sort order to be Best Match.• In your theme’s Collection.Liquid file, add the following at the top:

{% if collection.handle != 'all’ %} /* Smart Navigation script taken from the IS+ Collections tab goes here...*/{% else %} /* Shopify Built-in Collection rendering goes here ...*/{% endif %}

🔍 Avoid having Smart Navigation on a specific collection• Follow the instructions in the script and paste it in the Collection.Liquid file• Replace ‘all’ with the name of the collection you wish to keep as Shopify collection

39

4.6 IS+ Search Results Examples

<script> var __isp_options = { isp_add_to_cart_callback: function(product_id, form_id) {} } </script>

🔍 Perform a custom operation after a successful submission of Add-to-Cart from Search Results page

<script> var __isp_options = { isp_add_to_cart_callback: function(product_id, form_id) { document.location = " Cart location URL "; } } </script>

🔍 Redirect to the cart page after submission of Add-to-Cart from Search Results page

<script> var __isp_options = { isp_serp_callback: function() { if (ISP_LAST_SEARCH.search_term == 'XYZ’) { $jquery_isp('#isp_search_results_banner') .html('<discount>'); } } } </script>

🔍 Show a specific banner per a search query in the Search Results page

40

4.7 IS+ Facets Examples


isp_serp_callback: function () {

$jquery_isp('div#isp_left_container').before($jquery_isp('div#isp_search_results_filter_tags'));

},

isp_serp_pre_filter_callback: function() {

$jquery_isp('div#isp_left_container').before($jquery_isp('div#isp_search_results_filter_tags'));

}

};</script>

🔍 Move “Applied filters” to the top of the left container

54

4.8 IS+ Quick View Examples


isp_serp_quickview_callback: function() {$('.isp_quick_view_description').html(""); var id = $(".isp_quick_view_title").attr("product_id");

var url = ISP_PRODUCTS[id].u; $.ajax({ url: url, success: function(data) { data = $(data).find('div.description'); $('.isp_quick_view_description').html(data); } }); } }</script>

🔍 Show exact (HTML structure) product description from product page on Quick View

<script>var __isp_options = { isp_serp_quickview_callback: function () { var sizes = ['XS', 'SM', 'MD', 'LG', 'XL', '2X', '3X']; var options = $jquery_isp('.isp_quick_view_variant_select option'); var arr = options.map(function(_, o) { return { t: $jquery_isp(o).text(), v: o.value }; }).get(); arr.sort(function(o1, o2) { return sizes.indexOf(o1.t) > sizes.indexOf(o2.t) ? 1 : sizes.indexOf(o1.t) < sizes.indexOf(o2.t) ? -1 : 0; }); options.each(function(i, o) { o.value = arr[i].v; $jquery_isp(o).text(arr[i].t); });}}</script>

🔍 Sort Quick View variant options according to size

55

4.9 IS+ No Results Example

<script>var __isp_options = { isp_serp_no_results_callback: function() { for (var i = 0; i < Object.keys(ISP_PRODUCTS).length; i++) { (function(i) { var id = Object.keys(ISP_PRODUCTS)[i]; $jquery_isp.getJSON(ISP_PRODUCTS[id].u, {id: id}, function(data) { ISP_PRODUCTS[id].secondImage = data.product.images[1].src; }); })(i); } }}</script>

🔍 Enable 2nd image rollover on no results page

<script>var __isp_options = { isp_serp_no_results_callback: function() { $jquery_isp('.isp_no_results_title').text('New Title'); });

</script>

🔍 Change “no result” title in no result page

58

3 instantsearch+ customizing- table of contents...

Documents