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.
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. You can use this or generate your own.
data.titleHtml string This string is our title html for entity or style. You can use this or generate your own.
data.priceHtml string This string is our price html for entity or style. You can use this or generate your own. 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. You can use this or generate your own.
data.quickshopHtml string This string is our quickshop button html. You can use this or generate your own.


 

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) {
    console.log('data', data)
    return data.imageHtml + '<div class="sxr-info">' + data.titleHtml + data.ratingHtml + '</div>' + data.quickshopHtml
  }

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