3 InstantSearch+ Customizing- Table of Contents 4cdn.instantsearchplus.com/docs/IS++Customization+Guide.pdf · use the rules examples on this document, or create your own CSS rule.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.
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.
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.
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:
@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.
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
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
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; }
🔍 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 */ }
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
<script> var __isp_options = __isp_options || {}; __isp_options.isp_serp_callback = function(data, facets_only) {} // SERP rendered __isp_options.isp_serp_no_results_callback = function() {} // *no* results __isp_options.isp_serp_with_product_attributes = '1' // Include product attributes __isp_options.isp_add_to_cart_callback = function(product_id, form_id) {} // After cart quantity update __isp_options.isp_serp_quickview_callback = function() {} // QuickView opened __isp_options.isp_serp_look_a_like_txt = 'Related…' // Button text __isp_options.isp_serp_articles_tab_name = 'Blog Posts' // CMS tab name __isp_options.isp_serp_shopify_image_size = '206x309' // Change default image resolution __isp_options.isp_serp_disable_seo_schema = true // Remove itemscope div __isp_options.isp_dropdown_callback = function(li_element, item_data) {} // Dropdown item __isp_options.isp_dropdown_select_callback = function(event, ui) {} // Upon dropdown item click __isp_options.isp_dropdown_open_callback = function() {} // Upon dropdown render __isp_options.isp_dropdown_with_product_attributes = '1' // Include product attributes __isp_options.dropdown_align_inputbox = 'right' // Dropdown alignment __isp_options.keep_open_all_the_time = ‘1’ // Dropdown will remain open __isp_options.dropdown_narrow_by = [[]] // Filter by parameters (JSON) __isp_options.isp_serp_ajax_header_narrow_facets =[[]]] // Filter serp by parameters __isp_options.appendTo = 'div#search_header_id' // Optional element to attach the Dropdown HTML __isp_options.STAR_REVIEWS_POSITION = 1 // 1 above or 0 under price __isp_options.isp_turbo_link_in_new_tab = false // Turbo links in new tab or same window __isp_options.variant_color_attribute = ‘color’ // Attribute name for color swatches __isp_options.isp_serp_pre_filter_callback: function(event) { }, // Fired after a shopper selects a filter __isp_options.isp_serp_avoid_scroll_after_filter: true, //Avoid the scrolling after filter select. }; </script>
4.1 IS+ Options JavaScript definitions
Have your developer use these at the <head> tag of your theme:
The JavaScript SERP callback functions may run twice if the search results filters given the filters deferred load. Your code should address the fact that the callback might be triggered twice per a given search query.
22
<script> var isp_related_options = isp_related_options || {}; isp_related_options.isp_related_callback = function() {} // Recommendations rendered isp_related_options.slider = options_slidesToShow: 4 // Max product recommendations isp_related_options.with_product_attributes = false // Include product attributes isp_related_options.DECIMALS_REMOVE_ON_ROUND_PRICES = true // Remove .00 from prices like $49.00 isp_related_options.LAZYLOAD = "progressive" // Load images in advance isp_related_options.PRICE_FROM_ALWAYS = true // Render from price wording isp_related_options.RANDOMIZE = true // Add extra randomization isp_related_options.STAR_REVIEWS_POSITION = 1 // 1 for above or 0 for under price isp_related_options.responsive: [{breakpoint: 1400, settings: { slidesToShow: 4, slidesToScroll: 3, infinite: false}}, {breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 2, infinite: false}}] </script>
4.1 IS+ Options JavaScript definitions
Have your developer use these at the <head> tag of your theme:
23
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
🔍 Add an Add-to-Cart button in the instant suggestions dropdown (WooCommerce – AJAX)
29
4.3 IS+ Dropdown Examples
<script> var __isp_options = {dropdown_align_inputbox:'right’ }</script>
🔍 Align dropdown to the right
<script> var __isp_options = { DROPDOWN_TOP_OFFSET: '10', // Extra top offset for dropdown DROPDOWN_LEFT_OFFSET: '10' // Extra left offset for dropdown }</script>
🔍 Change the dropdown position
<script> var __isp_options = { isp_dropdown_callback: function(jquery_li_element) { var product_id = jquery_li_element.attr('isp_id’); var is_category = jquery_li_element.attr('isp_category’); return jquery_li_element.find('.isp_price_compare_at_price_exist').append(' <input type="button“ onclick="alert(product_id)" value="push me"/>'); } };</script>
🔍 Change the features of the drop down
30
4.3 IS+ Dropdown Examples
<script> var __isp_options = { dropdown_narrow_by: [], // Parameters to be filtered with AVOID_POP_PRODUCTS_PRELOAD: false }; </script>
🔍 Show filtered results in the instant search dropdown
<script> var __isp_options = { search_element_id: 'search_box_id',// Element ID of the search box in the Content/Hubspot site HOSTNAME: 'my-eCommerce-site.com ' // Your eCommerce store destination }; </script>
🔍 Install the IS+ Dropdown Widget on a 3rd party content site like HubSpot:
1. Copy the HTML Snippet from our Sync tab of our dashboard and place it in your Content/Hubspot template in the <head>
2. Copy the following HTML Snippet while adjusting the two parameters there
32
4.3 IS+ Dropdown Examples
<script>var __isp_options = { isp_dropdown_callback: function(jquery_li_element_html, item_data) { if (jquery_li_element_html.find('.isp_product_dropdown_review').length === 0 && item_data.reviews_count) { var stars = item_data.review / 20; var starImage; var reviews = item_data.review; var reviewsContainer = $jquery_isp('<div class="isp_product_dropdown_review" title="Average Score: ' + stars + ' | Total reviews: ' + item_data.reviews_count + '"></div>'); jquery_li_element_html.find('.as_magento_product_section').append(reviewsContainer); for (var i = 1; i <= 5; i++) { if (reviews <= 0) { starImage = $jquery_isp('<img src=“/* Empty star image */" title="empty"/>'); reviews = reviews - 20; jquery_li_element_html.find('.isp_product_dropdown_review').append(starImage); } else if (reviews % 20 === 0) { starImage = $jquery_isp('<img src=“/* Full star image */" title="full"/>'); reviews = reviews - 20; jquery_li_element_html.find('.isp_product_dropdown_review').prepend(starImage); } else { starImage =$jquery_isp('<img src=“/* Half star image */" title="half"/>'); reviews = reviews - (reviews % 20); jquery_li_element_html.find('.isp_product_dropdown_review').prepend(starImage); } } jquery_li_element_html.find('.isp_product_dropdown_review').append('<span class="isp_product_dropdown_reviews_count">(' + item_data.reviews_count + ')</span>'); } return jquery_li_element_html; }};</script>
if (!item_data.att) { return jquery_li_element_html } var tag = item_data.att; var found = false; for (var i = 1; i < 20 ; i++) { if(tag[i][0] == "attributes name") { tag = tag [i][1]; found = true; break; } } if(found){ var product_price = jquery_li_element_html.find(".as_magento_price").text() + " /" + tag; jquery_li_element_html.find(".as_magento_price").text(product_price); } return jquery_li_element_html; }};
<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
🔍 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
🔍 Add a banner with title and description to top of Search Results Page
<script> var favorites = document.getElementsByClassName("isp_favorite"); for (var i = 0; i < favorites.length; i++) { var product_id =(favorites[i].parentNode.parentNode. parentNode.getAttribute("product_id")); favorites[i].childNodes[0].setAttribute("onclick", favorites[i]. childNodes[0]. getAttribute("onclick") + "; addFunction(" + product_id + ")") }function addFunction(product_id) { // Add function logic here } </script>
🔍 Add functionality to favorites icon (heart above item)
43
4.6 IS+ Search Results Examples
<script> var __isp_options = { isp_serp_callback: function() { $('.isp_grid_product') .each(function(index) { var isp_variants_options = new Object; // key: option name| value: values list var p_id = $(this) .attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' || option_name == 'Sellable') { continue; } var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); } if (option_name in isp_variants_options) { for (v in option_vals) { if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); } } } else { isp_variants_options[option_name] = option_vals; } } $(this) .find('.isp_product_info') .html(''); for (var option_name in isp_variants_options) { $(this) .find('.isp_product_info') .append(option_name + ': ' + isp_variants_options[option_name] +
'<br>'); } }); } }</script>
🔍 Add product attributes in search results page
44
4.6 IS+ Search Results Examples
<script> var __isp_options = { isp_serp_callback: function() { $('.isp_grid_product') .each(function(index) { var isp_variants_options = new Object; var p_id = $(this).attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' || option_name == 'Sellable') { continue; } var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); } if (option_name in isp_variants_options) { for (v in option_vals) { if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); } } } else { isp_variants_options[option_name] = option_vals; } } $(this).find('.isp_product_info').html(''); for (var option_name in isp_variants_options) { $(this).find('.isp_product_info’)
<script>var __isp_options = { isp_serp_callback: function() { $jquery_isp("body").on('DOMSubtreeModified', "/***cart counter class or id***/", function () { $jquery_isp("/***mini container class or id***/").load(location.href + " /***mini
container class or id***/ > *"); }); }}</script>
🔍 Update mini-cart content after adding product to main cart
<script> var __isp_options = { isp_serp_callback: function() { $('.isp_grid_product') .each(function(index) { var isp_variants_options = new Object; var p_id = $(this).attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' || option_name == 'Sellable') { continue; } var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); } if (option_name in isp_variants_options) { for (v in option_vals) { if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); } } } else { isp_variants_options[option_name] = option_vals; } } $(this).find('.isp_product_info').html(''); for (var option_name in isp_variants_options) { $(this).find('.isp_product_info').append(option_name + ': ‘ +
<script> var __isp_options = { isp_serp_callback: function() { jQuery.each(ISP_PRODUCTS, function(id, el) { if (el.vra) { var size = jQuery.map(el.vra[0][1], function(a) { if (a[0] == "Size") { return a[1]} }); var year = jQuery.map(el.vra[0][1], function(a) { if (a[0] == "Year") { return a[1]} }); var price = jQuery.map(el.vra[0][1], function(a) { if (a[0] == "Price") { return a[1]} }); var item = jQuery('#search-results li.isp_grid_product[product_id=' + id + ']'); var desc = item.find('.isp_product_desc'); if (item.find('.isp_product_price2').length == 0 && $('.account-link').length > 0 &&!el.iso) { desc.after($('<br><div class="isp_product_price2"></div>').text(price)) } if (item.find('.isp_product_size').length == 0) { desc.after($('<br><div class="isp_product_size"></div>').text(size)) } if (item.find('.isp_product_year').length == 0) { desc.after($('<br><div class="isp_product_year"></div>').text(year)) } item.find('.isp_product_info').addClass('product-info inside'); item.find('.isp_product_price_wrapper');} }); $('.isp_product_price_wrapper').hide(); $.each($('.isp_product_info .isp_product_image_href'), function(i, el) { var title = $(el).find('.isp_product_title').clone(); var wr = $(el).closest('.isp_product_info'); $(el).remove(); wr.prepend(title).parent().find('.isp_product_image_href:first').append(wr); });}};</script>
🔍 Display product variant info on product hover
50
4.6 IS+ Search Results Examples
<script>var __isp_options = { isp_serp_with_product_attributes: '1', isp_serp_callback: function () { $jquery_isp('.isp_grid_product').each(function() { var id = $jquery_isp(this).attr('product_id'); // Product ID
var attributes = ISP_PRODUCTS[id].att; // Product Attributes for (var i = 0; i < attributes.length; i++) { var attr = attributes.find(function(element) {
return element[0] == "Sale" // Attribute to check})[1];
if (attr.includes("Yes")) { $jquery_isp(this).addClass('sale'); // Add class or html to the product } } }); }}</script
🔍 Add badges for products based on attributes
<script>var __isp_options = { isp_serp_callback: function () { $jquery_isp('.isp_grid_product').each(function() { var id = $jquery_isp(this).attr('product_id'); if ($jquery_isp(this).find('.cart-add').length === 0) { var addToCart = $jquery_isp('<a href=' + '"https://www.tonerbuzz.com/cart.php?action=add&product_id='+id+'" ' + 'class="cart-add">Add to Cart</a>'); addToCart.insertAfter($jquery_isp(this).find('.isp_product_info'));
} }); }}</script>
🔍 Replace IS+ “Add to Cart” button with BigCommerce native “Add to Cart” modal (BigCommerce)