Search X / Search Results / Custom HTML

Custom HTML

You can define a custom function to render your own HTML product result tiles. Your function must return a string of HTML.

Fields Allowed Values Description
options.display.html function Define a custom function that returns html. This function will receive a single argument typeof object, function myCustomHtml (data) {}.


 

Callback Argument typeof object Description
data.entity object This object will be the Product, Article, Collection, or Page object. This gives you full access to the data associated with the result.
data.style object This object be passed conditionally if entity is type Product, and using show_all_variants configuration.
data.imageHtml string This string is our image html for entity or style.
data.titleHtml string This string is our title html for entity or style.
data.priceHtml string This string is our price html for entity or style. We respect selected currency and Shopify’s conversion. We are working on supporting Shopify’s new country/currency mapping, but their API responses are not yet ready.
data.ratingHtml string This string is our rating html for for the product if enabled.
data.quickshopHtml string This string is our quickshop button html.
data.variantThumbsHtml string This string is for variant thumbnails html if enabled.


 

Your declared function should return a string of html.

Additional Considerations

Quick Shop

If you would like to use our existing Quick Shop feature, you must return the contents of the arguments imageHtml and quickShopHtml in your string. The javascript for our Quick Shop references their html contents, and requires specific attributes in order to function correctly.

~CE

<script>
  function myCustomHtml (data) {
    var html = data.imageHtml + '<div class="sxr-info">' + data.titleHtml + data.ratingHtml
    var isProduct = data.entity.pathname.indexOf('/products/') > -1
    if (isProduct) {
      html += data.entity.in_stock ? data.priceHtml : '<div class="sx-price" role="note" tabindex="0">Sold Out</div>'
    }
    return html + '</div>' + data.quickshopHtml
  }

  window.sx_results = window.sx_results || {}
  window.sx_results.options = window.sx_results.options || {}
  window.sx_results.options.display = window.sx_results.options.display || {}
  
  window.sx_results.options.display.html = myCustomHtml
</script>
HTML