• Overview
• Requirements
• Integration Steps
  • Step 1: Create Algolia App
  • Step 2: Create Algolia Indices
  • Step 3: Get Algolia IDs and API Keys
  • Step 4: Add Algolia IDs, API Keys and Indices to the Storefront App
• Configuration Steps
• Data Mapping
  • Product Mapping
  • Category Mapping
  • Manufacturer Mapping
• Front End Implementation
• Notes

 

Overview

Algolia.com is a robust, lightning-fast search and discovery platform specifically designed to elevate your e-commerce website's search and category experience. With cutting-edge technology, Algolia.com empowers brands to deliver instant and relevant search results, improving user satisfaction and engagement. Key features include customizable search algorithms and seamless scalability. This design enables you to provide users with an unrivaled search experience. By utilizing Algolia.com, organizations can enhance conversion rates, reduce bounce rates, and ultimately, boost revenue.

Key Features:

• Customizable Search Algorithms: Tailors search results to match your users' preferences and improve relevance.
• Seamless Scalability: Scale your search infrastructure effortlessly as your business grows.
• User Engagement: Enhance user experience with lightning-fast, relevant findings on search results and category pages.
• Conversion Optimization: Increase conversions and reduce bounce rates with Algolia.com's advanced search capabilities.

 

Learn More: https://www.algolia.com/

View Algolia Documentation: https://www.algolia.com/doc/

Requirements

1. A Cart.com Storefront account
2. Free or Paid Algolia account
3. Algolia Application ID
4. Algolia Admin API Key
5. Algolia Search API Key

Integration Steps

Step 1: Create Algolia Application

 

After logging into your Algolia account, at the top left corner click the Application drop down, then click Create Application. Follow the prompts to build an application that will best meet your needs. TIP: Use the data center closest to your main geographic location of your customers to ensure the fastest response times for the majority of your customers.

Step 2: Create Algolia Indices

After creating your application, you will create the primary index for your application. Name your first index “product_index”. This will be the primary index for your products. 

 

After creating the first index, at the bottom left corner of your screen, click Data Sources and then click Indices in the left menu. Next, on the right side of the screen, click the button CREATE INDEX. Name your second index “category_index”. Follow the previous steps again to create a third index, titling it “manufacturer_index”.

 

Step 3: Get Algolia IDs and API Keys

At the bottom left corner of your screen, select SETTINGS. Under the far right category called Teams and Access, click API Keys.

 

After opening up the API Keys tab, keep this page open in order to copy the keys to your Storefront app integration.

Step 4: Add Algolia IDs, API Keys and Indices to the Storefront App

In a new window or tab, log into your Cart.com Storefront. Navigate to the Algolia application by clicking Tools in the left sidebar menu. Select Apps & Addons, then click on Algolia.

 

Copy the Application ID from Algolia and paste it into the Application ID field. 

Copy the Admin API Key from Algolia and paste it into the Admin API Key field. 

Copy the Search API Key from Algolia and paste it into the Search API Key field.

Type “product_index” into the Catalog Index field.

Type “category_index” into the Category Index field.

Type “manufacturer_index” into the Manufacturer Index field.

 

Scroll to the bottom to set your Sync Interval. You can update indexes manually, or automatically on a selected interval. 

At the top of the page, click the Integration Active toggle button to make it blue.  Click SAVE at the top right corner to save your settings.

 

After syncing, confirm data is populating in the correct Algolia indices by returning to Algolia and click the Search icon on the left sidebar menu. Next, check each index by clicking the Index drop down, to the right of the Application drop down. 

 

 

Integrating the Storefront product, category, and manufacturer data is now complete.

 

Configuration Steps

Configuring all of the merchandizing, sorting and filtering results, etc. can be found on Algolia’s support documentation. 

 

https://www.algolia.com/doc/guides/managing-results/relevance-overview/

 

Data Mapping

Products

 

 

Categories

 

 

Manufacturers

 

 

Front End Implementation

We created a widget to simplify the process of placing the search option in your theme. To add this widget, navigate to Themes > Edit > Header > Widgets > Add Widget > Alogia Searchbox 

The following settings are available for the widget:

 

Default Search Widget Item Template

<div class="aa-ItemWrapper">
<div class="aa-ItemContent">
<a href="${item.url}" style="display: inline-flex;">
<div class="aa-ItemIcon aa-ItemIcon--alignTop">
<!-- <img src="${item.image}" alt="${item.title}" width="40" height="40" /> -->
</div>
<div class="aa-ItemContentBody">
<div class="aa-ItemContentTitle">
${components.Highlight({
hit: item,
attribute: 'title',
})}
</div>
</div>
</a>
</div>
</div>

The docs linked below have info on how to use the templates to change how the search results are displayed.

 

For front end implementation of search results and filtering widgets, see Algolia’s documentation below. 

https://www.algolia.com/doc/guides/building-search-ui/getting-started/js/

 

Need some help? Contact us to obtain a custom implementation quote!

Notes

When you refresh the indices, you are replacing all current data in the Algolia indices. If you modify the data manually in Algolia, that data will be overwritten the next time you refresh the data from the application.