Algolia custom hooks events with Shopify

Customize the HTML output of Algolia Search results with custom hooks events in Shopify.

Custom hooks events

Once you have implemented Algolia Search in your Shopify theme, you can do quite a lot of customization directly on the Algolia Shopify app and the Algolia Dashboard.

One of the things that you cannot do in the portals is to modify the HTML output of the Algolia Search results. In the past, it was possible to edit the HTML code that was uploaded to the Shopify theme, but that's no longer possible. Nowadays, custom hooks events allow you to modify the HTML code of the Algolia Search results.

There's a lot of hook events that you can use to adapt the HTML code to your needs.

Useful InstantSearch hooks

beforeInstantSearchProductTemplate

This hook is called before the product template is rendered. You can use it to modify the HTML code of the product card template.

For example, you may need to add a custom product field apart from the title to each rendered product card. With this hook, you have control of the HTML code so the possibilities are endless.

document.addEventListener('algolia.hooks.initialize', function () {
  algoliaShopify.hooks.registerHook(
    'beforeInstantSearchProductTemplate',
    function (_defaultTemplate, hit, html, components) {
      return html`
        <div
          class="ais-hit ais-product"
          data-algolia-index="${hit.index}"
          data-algolia-position="${hit.productPosition}"
          data-algolia-queryid="${hit.queryID}"
          data-algolia-objectid="${hit.objectID}"
          data-handle="${hit.handle}"
          data-variant-id="${hit.objectID}"
          data-distinct="${hit._distinct}"
          data-product-id="${hit.id}"
          onClick="${() => algoliaShopify.helpers.handleItemClick(hit)}"
        >
          <img
            class="ais-hit--picture"
            src="${algoliaShopify.helpers.mediumImage(hit)}"
            alt="${hit.title} - ${hit.variant_title}"
          />

          <div class="ais-hit--details">
            <p class="ais-hit--title">
              <a
                data-algolia-index="${hit.index}"
                data-algolia-position="${hit.productPosition}"
                data-algolia-queryid="${hit.queryID}"
                data-algolia-objectid="${hit.objectID}"
                href="${algoliaShopify.helpers.instantsearchLink(hit)}"
                title="${algoliaShopify.helpers.fullTitle(
                  hit.title,
                  hit._distinct,
                  hit.variant_title
                )}"
              >
                ${components.Highlight({ attribute: 'title', hit })} ${algoliaShopify.helpers.variantTitleAddition(
                  hit,
                  hit._distinct
                )}
              </a>
            </p>
            <p
              class="ais-hit--subtitle"
              title="${hit.product_type}${algoliaShopify.translation_helpers.by(
                hit.vendor
              )}"
            >
              ${components.Highlight({ attribute: 'product_type', hit })} ${hit.vendor &&
              html` <span> ${algoliaShopify.translations.by} </span> `} ${hit.vendor &&
              components.Highlight({ attribute: 'vendor', hit })}
            </p>
            <p class="ais-hit--price">
              <b>${algoliaShopify.helpers.displayPrice(hit, hit._distinct)}</b>
              ${!hit._distinct &&
              html`
                <span class="ais-hit--price-striked"
                  ><span
                    >${algoliaShopify.helpers.displayStrikedPrice(
                      hit.price,
                      hit.compare_at_price
                    )}</span
                  ></span
                >
              `} ${!hit._distinct &&
              html`
                <span class="ais-hit--price-discount"
                  >${algoliaShopify.helpers.displayDiscount(
                    hit.price,
                    hit.compare_at_price,
                    hit.price_ratio
                  )}</span
                >
              `}
            </p>
            <!-- Extra info examples - Remove the display: none to show them -->
            <p class="ais-hit--info" style="display: none">
              ${hit.sku &&
              html`
                <span class="algolia-sku"
                  >${components.Highlight({ attribute: 'sku', hit })}</span
                >
              `} ${hit.barcode &&
              html`
                <span class="algolia-barcode"
                  >${components.Highlight({ attribute: 'barcode', hit })}</span
                >
              `} ${hit.weight &&
              html` <span class="algolia-weight">${hit.weight}</span> `} ${!hit.taxable &&
              html`
                <span class="algolia-taxable"
                  >${algoliaShopify.translations.taxFree}</span
                >
              `}
            </p>
            <!-- Tags example - Remove the display: none to show them -->
            <p class="ais-hit--tags" style="display: none">
              ${hit?._highlightResult.tags?.map(
                (tag) => html` <span class="ais-hit--tag">${tag.value}</span> `
              )}
            </p>
            ${!hit._distinct &&
            html`
              <form
                id="algolia-add-to-cart-${hit.objectID}"
                style="display: none;"
                action="/cart/add"
                method="post"
                enctype="multipart/form-data"
              >
                <input type="hidden" name="id" value="${hit.objectID}" />
              </form>
              <p class="ais-hit--cart">
                ${hit.can_order
                  ? html`
                      <button
                        class="ais-hit--cart-button"
                        data-form-id="algolia-add-to-cart-${hit.objectID}"
                      >
                        ${algoliaShopify.translations.addToCart}
                      </button>
                    `
                  : html`
                      <button
                        class="ais-hit--cart-button ais-hit--cart-button__disabled"
                      >
                        ${algoliaShopify.translations.outOfStock}
                      </button>
                    `}
              </p>
            `}
          </div>
        </div>
      `
    }
  )
})