for

Customization - Introduction

Introduction to how to change our code to match your search expectations.


The customization options are described in the Configuration documentation section.
This section is here if you want to go further. Indeed, if you want to customize your search more than this, you'll need to modify the files we installed in your theme. This requires a certain level of JavaScript and CSS.

If you modify files in your theme, you won't be able to update to the latest version of our front-end anymore because an upgrade would override your files.

Resources

When installing Algolia in your front-end, we're loading a few resources. Here is a full explanation of what we're putting in your theme.

We're first loading some external libraries, then some files that will apply everywhere and finally some specific files for the autocomplete and for the search page.

Third-party libraries

Third-party libraries are hosted in your Shop theme using the Shopify Assets Management

In terms of front-end logic, we are using a few libraries to build the search experience provided in your front-end:

  • polyfill: polyfill.io is a service allowing to add missing features to old browsers with no overhead for the most recent ones.
  • lodash v3: Lodash is an utility suite that provides helpful methods to manipulate collections, arrays, objects in a cross-browser way
  • jQuery: jQuery is a library designed to manipulate the DOM more easily. Its methods also provide a great abstraction over features implemented differently between browsers
  • Hogan.js: Hogan is a templating engine. It has its own section in this documentation
  • algoliasearch: JavaScript API client for Algolia — needed by autocomplete.js
  • autocomplete.js: Algolia's autocompletion library
  • instantsearch.js: Algolia's library of widgets to build an instant search page

For the design, we're using an icon pack:

Generic assets

We're installing 5 generic assets in your theme:

File Description
snippets/algolia_money_format.liquid Simple file to retrieve the currency used in your shop
assets/algolia_config.js.liquid File in which your configuration will be saved. This file is overwritten on every configuration update in your app, that's the only file you should't touch
assets/algolia_init.js.liquid Initialization file. Creates the algoliaShopify object, loads libraries in noConflict mode if available and adds a few generic logic methods
assets/algolia_helpers.js.liquid Hogan templating logic helpers. See the dedicated section
assets/algolia_translations.js.liquid File grouping all the constant strings of our app for easy translation into your own language

Styling

Our styling is splitted into two CSS files, one for the autocompletion menu and one for the instant search page. See their dedicated sections for more details.