Advanced Features & Customization

Using the Liquid Drop

SearchJet provides a Liquid drop object (searchjet) for advanced theme developers to have full control over the integration.

Example: Accessing Search Data in a Template (e.g., search.liquid)

liquid

{% if searchjet.performed %}
  <h1>Search Results for "{{ searchjet.terms | escape }}"</h1>
  <p>Found {{ searchjet.results_count }} results.</p>

  {% for product in searchjet.results %}
    <div class="product-item">
      <a href="{{ product.url }}">
        <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
      </a>
    </div>
  {% endfor %}

  <!-- Pagination -->
  {% if searchjet.pagination.pages > 1 %}
    <div class="pagination">
      {{ searchjet.pagination | default_pagination }}
    </div>
  {% endif %}

{% endif %}

Key Liquid Objects:

• searchjet.performed: Returns true if a search was performed.
• searchjet.terms: The user’s search query.
• searchjet.results: The array of product results.
• searchjet.results_count: The total number of results.
• searchjet.pagination: Handles pagination links.

Theme Integration (Manual)

If the automatic injection doesn’t work perfectly with your theme, you can manually replace your theme’s search form.

1. Locate your theme’s search form. This is typically in a file like sections/header.liquid or layout/theme.liquid.
2. Replace the existing form. Find the <form> tag with action="/search" and replace it with the form structure provided in the SearchJet documentation or admin panel, which typically points to the SearchJet-handled search route.

Example Manual Search Form:

html

<form action="/pages/searchjet-search" method="get" role="search">
  <input type="search"
         name="q"
         placeholder="Search our store..."
         value="{{ search.terms | escape }}">
  <button type="submit">Search</button>
</form>

(Note: The exact action URL may vary; refer to the app’s instructions).