Customize search results with the renderer

The product result renderer is a JavaScript class that controls how search results are displayed.

The Zoovu Search Plugin Renderer lets you change how search results look without affecting important features like tracking, product comparison, or chat. Instead of overriding the entire template, you can adjust specific parts: SKUs, the layout, or call-to-action (CTA) buttons.

Using the renderer approach is ideal when you:

• Need to preserve built-in tracking and interactions.
• Want an easier way to enable extra features like chat, comparison, and recommendations.
• Prefer not to completely override the result card template.

Adjust styling with the renderer

If you want to adjust styling (like price display or SKU position), go to Design & Publish > Advanced > Additional CSS.

Add the following code:

.z-search-suggests__content {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: 2fr 1fr;
}
.z-search-suggests__price {
    color: #c5000c;
    font-family: 'gibson_semibold';
    font-size: 27px;
    line-height: 1.4;
}

If you need to modify how search results behave, define a custom product result renderer:

class CustomProductResultRenderer extends ProductResultRenderer {
    renderDataPoints(wrapper, product) {
        const dataPoints = this.getDataPoints(product);
        const ul = document.createElement('ul');
        ul.className = 'z-data-points';
        dataPoints.forEach((dp) => {
            const li = document.createElement('li');
            li.innerText = `${dp.key}: ${dp.value}`;
            li.className = 'z-data-points__entry';
            ul.appendChild(li);
        });
        wrapper.appendChild(ul);
        return ul;
    }
renderHeader(wrapper, product) {
        const header = super.renderHeader(wrapper, product);
        if (product.getIdentifier() !== undefined) {
            const skuNode = document.createElement('p');
            skuNode.className = 'z-sku';
            skuNode.innerText = `SKU: ${product.getIdentifier()}`;
            header.appendChild(skuNode);
        }
        return header;
    }
getCtas(product, _resultGroup) {
        return [{
            text: 'View product',
            link: this.getLink(product),
            primary: true,
            icon: 'none'
        }];
    }
}

Customizing renderer methods

Method	Description	Arguments	Returns
render	The main method that creates the wrapper for the search result and calls all relevant rendering functions.	Search result, isHidden flag, active result group.	The rendered HTML node.
createWrapperElement	Creates a wrapper <li> element for the search result card.	Search result, isHidden flag, active result group.	The wrapper HTML node.
createResultNode	Creates the actual search result card.	Search result	The result card HTML node.
getWrapperClassList	Returns a list of class names to be added to the wrapper element.	-	Array of class names.
getLink	Returns the link for the search result.	Search result	The search result link.
getReadableLink	Returns a readable version of the search result link for display in the UI.	Search result	The readable search result link.
getImage	Returns the main image for the search result.	Search result	The main image source.
getImages	Returns all images associated with the search result.	Search result	Array of image sources.
getMaxNumberOfBadges	Returns the maximum number of badges that can be displayed for a result.	-	Maximum number of badges.
getBadges	Returns all badges to be displayed for the result.	Search result	An array of badges, each containing value and icon properties.
getDataPoints	Returns all data points for the result, such as price or availability.	Search result	An array of data points, each with key and value properties.
getVariantImages	Returns all images for product variants.	Search result	An array of variant images, each with name, image, optimizedImage, identifier (variant SKU), and link.
getCtas	Returns a list of call-to-action (CTA) buttons for the result.	Search result, result group	An array of CTA definitions, each with text, link, renderAsButton, icon, clickCallback, getLink, and primary properties.
getTitle	Returns the title of the search result.	Search result	The result title.
getSnippet	Returns a short description (snippet) for the search result.	Search result	The result snippet.
createImages	Creates the image container, including all images, badges, and variant thumbnails.	Search result	The images wrapper HTML node.
createImageNode	Creates an image element for the result.	Search result, image source, index in images array.	The image HTML node.
createCarousel	Creates an image carousel for navigating through multiple images.	Search result, array of image sources.	The navigation HTML node.
createCarouselPaginationButton	Creates a next/previous button for image navigation.	Type (prev or next), label.	The pagination button HTML node.
createVariantThumbnails	Creates thumbnail images for product variants.	Search result	A container node for the variant thumbnails.
createBadges	Creates a container for displaying badges.	Search result	The badges wrapper HTML node.
createBadge	Creates a single badge element.	Badge definition (value and icon).	The badge HTML node.
createDataPointsTable	Creates a table to display data points.	Map of keys to data point definitions, array of all data point keys.	The data points table HTML node.
createDataPointsRows	Creates table rows for data points.	Array of data point definitions (key and value).	An array of table row HTML nodes.
renderHeader	Creates and appends the result title section to the search result card.	Result card HTML node, search result	The header HTML node or undefined.
renderLink	Creates and appends the clickable result link to the search result card.	Result card HTML node, search result	The link HTML node or undefined.
renderSnippet	Creates and appends the search snippet (short description) to the result card.	Result card HTML node, search result	The snippet HTML node or undefined.
renderCtas	Creates and appends CTA buttons (e.g., "View product") to the result card.	Result card HTML node, search result, result group	The CTA wrapper HTML node or undefined.
renderCta	Creates and appends a single CTA button to the result card.	CTA wrapper HTML node, search result, CTA definition (text, link, renderAsButton, icon, clickCallback, getLink, primary).	The created CTA button/link HTML node.
renderDataPoints	Creates and appends the data points section to the result card.	Result card HTML node, search result	The data points table HTML node or undefined.
renderContent	Creates and appends all search result content (header, link, snippet, data points, etc.).	List item wrapper element, search result, result group	The rendered content node.
isLinksOpenNewTab	Checks if clicking a result should open it in a new tab.	Search result	true or false.
isHasVariantLabel	Checks if variant thumbnails or a text label should be displayed.	Search result	true (display text label) or false (display variant thumbnails).
isHasVariantImages	Checks if the result has multiple variant images.	Search result	true (multiple variant images available) or false (single variant image).

Content result renderer

The content result renderer is used for displaying non-product pages like blog posts, articles, or videos. It works automatically and doesn’t require any extra customization methods.

Custom result renderer

The custom result renderer is used for custom search results that are set up in Result Manager > Custom Results. Like the content renderer, it works out of the box and does not include additional customization options.

Product result renderer

The product result renderer is used for displaying products in search results. Unlike the content and custom renderers, this one offers extra methods you can override to adjust how products are displayed. You can use these methods to modify pricing, stock availability, CTAs, and more.

Method	Description	Arguments	Returns
findDataPoint	Retrieves a specific data point based on its key.	Search result, data point key	The data point (an object with key and value properties) or undefined if not found.
getPriceDataPoint	Finds a price-related data point. If no specific key is provided, it tries to match based on the given setting.	Search result, data point key, setting name ('newPrice' or 'oldPrice')	The price data point or undefined if not found.
getStockDataPoint	Retrieves stock availability information for the result.	Search result	The stock data point or undefined if unavailable.
getRatingDataPoint	Retrieves the rating value for the result.	Search result	The rating data point or undefined if unavailable.
getRatingCountDataPoint	Retrieves the number of ratings associated with the result.	Search result	The rating count data point or undefined if unavailable.
createComparisonAction	Creates a checkbox for adding the product to a comparison list.	Search result	The generated HTML checkbox node or undefined if comparison is disabled.
createZoeChatAction	Creates a "Chat about this product" button.	Search result	The CTA button HTML node or undefined if Zoovu Chat is not enabled.
renderActions	Adds comparison and chat buttons to the result card.	Result card HTML node, search result	The actions wrapper HTML element or undefined if no actions are enabled.
renderPrice	Displays the product price and appends it to the result card.	Wrapper HTML node, search result, modifier ('grid' or 'list'), attachItemProps flag	The price wrapper HTML element or undefined if no price is available.
renderStock	Displays stock availability and appends it to the result card.	Result card HTML node, search result	The stock information wrapper HTML element or undefined if stock data is missing.
renderRating	Displays the product rating and appends it to the result card.	Result card HTML node, search result	The rating wrapper HTML element or undefined if no rating is available.
renderVariantsLabel	Displays a label for product variants and appends it to the result card.	Result card HTML node, search result	The variants label HTML element or undefined if no variants exist or if variant thumbnails are being used instead.

Search result

The search result object contains useful properties and methods that help control how a search result is displayed. You can use it to access product details, images, prices, and other key data when rendering the search result card.

Properties

Property	Description
contentGroup	The result group the search result belongs to.
suggest	The raw data of the main product or content result (excludes variants).
variants	An array of all variant data for the result.
pinned	true if this result was pinned in the result manager, false otherwise.
plain	The raw data of the result, either as a single content item or an array of products.
randomId	A randomly generated ID for the result, useful for creating unique element identifiers.
isRelation	true if the result comes from a related search, false otherwise.

Methods

Method	Description	Arguments
getOriginalContentGroup	Returns the actual result group name, ignoring "all results".	-
getLink	Returns the clickable link for the result.	-
getName	Returns the title of the result.	-
getType	Returns the type of result ('custom', 'HTML' for content/product, or 'YOUTUBE_VIDEO').	-
getHtml	Returns the custom result's HTML markup.	-
getImage	Returns the main image for the result.	true if optimized image is allowed, false otherwise.
getOriginalImage	Returns the original, unoptimized image for the result.	-
getDataPoints	Returns all data points associated with the result.	Content data point name (optional, used to ignore specific data points).
hasImage	true if the result has an image, false otherwise.	-
hasContent	true if the result includes a search snippet, false otherwise.	-
getContent	Returns the search snippet.	Content data point name (if the snippet should be taken from a specific data point).
getId	Returns the unique ID of the result.	-
getGroupId	Returns the group identifier for the product.	-
getIdentifier	Returns the product identifier (e.g., SKU).	-
getAllVariantImages	Returns all variant images. Each variant image includes name (variant name), image, optimizedImage, identifier (variant SKU), and link (variant link).	-
getUniqueVariantImageCount	Returns the number of unique images across all variants.	-
getImages	Returns all images associated with the result, including the main product image.	-
isResizedImage	true if an optimized image version is available, false otherwise.	-
getRelationTypes	Returns an array of relation types available for the result.	-
getColSpan	Returns the number of columns a custom result should span.	Layout configuration
getRandomId	Returns the randomly generated ID for this result.	-

Example: Adding SKU and custom stock message

This example:

• displays SKU under the product title
• adds a custom stock message ("This product will never be available")

class CustomProductResultRenderer extends ProductResultRenderer {

    renderHeader(wrapper, product) {
        const header = super.renderHeader(wrapper, product); // keep default rendering
        if (product.getIdentifier() !== undefined) { // add the identifier if available
            const skuNode = document.createElement('p');
            skuNode.className = 'z-sku';
            skuNode.innerText = `SKU: ${product.getIdentifier()}`;
            header.appendChild(skuNode);
        }
        return header;
    }

    renderStock(wrapper, product) {
        const stockNode = document.createElement('span');
        stockNode.className = 'z-stock';
        stockNode.innerText = `${product.getName()} will never be available`;
        wrapper.appendChild(stockNode);
        return stockNode;
    }

}

Using callbacks to override renderers

If you need to override multiple renderers (e.g. product, content, and custom result), you can use callbacks to modify them dynamically.

• getProductResultRenderer
• getContentResultRenderer
• getCustomResultRenderer

Each callback receives the default renderer class as an argument and should return your custom renderer class.