Skip to main content

Help Center

< Back
You are here:
Print

Custom Templates (HTML Editor)

Created On
Last Updated On
by

What Are Custom Templates?

ExpertRec allows you to create fully custom HTML templates for every part of the search experience. Instead of using the default search result layout, you can design your own using HTML, CSS, and template variables that pull in live product data.

Available Template Types

  • Search results template — Controls how each product card looks in results
  • Autocomplete/suggestions template — Controls the dropdown suggestions as users type
  • Filter template (desktop) — Controls how facets/filters appear on desktop
  • Filter template (mobile) — Separate template optimized for mobile screens
  • Pagination template — Controls page navigation display
  • No-results template — What shows when search returns nothing

Template Variables

The following variables are available in all templates and are replaced with live product data at render time:

  • {{title}} — Product title
  • {{description}} — Product description
  • {{price}} — Product price
  • {{image}} — Product image URL
  • {{url}} — Product URL
  • {{brand}} — Brand name
  • {{category}} — Product category
  • {{rating}} — Average rating
  • {{in_stock}} — Stock status (true/false)
  • Custom fields are also available as {{field_name}}

How to Access the Template Editor

Navigate to: Dashboard > UI Customization > Custom Templates, then select the template type you want to edit.

Example Search Result Template

<div class="er-result-item">
  <a href="{{url}}">
    <img src="{{image}}" alt="{{title}}" loading="lazy">
    <div class="er-result-info">
      <h3 class="er-result-title">{{title}}</h3>
      <p class="er-result-price">{{price}}</p>
      {{#if in_stock}}
        <span class="er-badge er-badge-green">In Stock</span>
      {{else}}
        <span class="er-badge er-badge-gray">Out of Stock</span>
      {{/if}}
    </div>
  </a>
</div>

CSS Customization Within Templates

Add <style> blocks directly in your template or reference your store’s existing CSS classes. ExpertRec templates are scoped to avoid conflicts with your theme.

Mobile vs Desktop Templates

Create separate templates for mobile and desktop to optimize the experience for each device. Mobile templates should use larger touch targets (minimum 44px height) and simplified layouts. Switch between templates using the device toggle in the editor.

Best Practices

  • Always include the product URL as a clickable link
  • Use lazy loading for images (loading="lazy") to improve page performance
  • Test templates on both mobile and desktop before publishing
  • Keep templates lightweight — avoid heavy JavaScript inside templates
  • Use the built-in preview feature to see how templates look before going live
  • Keep a backup of your working template before making major changes
Table of Contents