Search & Filtering
      Back to home
      1. Knowledge Base
      2. Apps
      3. Search & Filtering

      Algolia Search

      Fast on-site search for your blazing fast website

      This article takes you through Nyla's integration with Algolia, from how to activate the app and adding search to your site, through to tips and tricks on how to get the most out of Algolia functionality. 

       

      This article covers: 

       

      App Activation

      • If you haven't already installed Algolia into your Shopify instance, you should do this first. 
        • When setting up through the Shopify app, you should select your brand on the Application field, verify that the Search API Key + Write API Key fields are automatically filled, and make sure the Indexes prefix is set as "shopify_" (without the quotation marks). 
      • Install the Algolia app by navigating in the Editor → Apps → Algolia. Insert the API keys (retrievable from Algolia from this page once you’re logged into Algolia).
      • Save, Queue and Publish.
      • Once you have connected the app and waited 24 hours, you should then add your search UI to your site. 

      Quick start screen recording:

       

      Adding search to your site

      In order to add search to your site, you should add one of Nyla's templates or blocks as a starting point. From here you can edit your templates in order for the UI & UX to be as you want for your site. 

      If you are using the legacy search modal, see here for instructions on how to upgrade to this version .

      Templates and Blocks

      There are two main options to start from, a section template if you want to have search on a specific page, or a block with a modal if you want to have your search on a modal on all pages. 

      You can use these templates as a jumping off point to further customise your search look and feel. The properties from Source Algolia are available in order to create dynamic layouts and conditions. 

      Section Template: 

      • Algolia Search
        • This template comes with a search UI that enables customers to browse search results for products, pages and blog posts
        • You should add a collection as the empty search results recommendation in order to avoid this returning blank

      Block: 

      • Algolia Search - Modal
        • Block that comes with a search icon that generates a modal with the search UI
        • The search UI that enables customers to browse search results for products, pages and blog posts
        • You should add a collection as the empty search results recommendation in order to avoid this returning blank. This requires you to go into the block itself and set this. 

      Hiding products from search

      To hide a product from search, you can should:

      • If you are not using the legacy modal using the TOGGLE_SEARCH link action:
      • If you are using the legacy modal using the TOGGLE_SEARCH link action:
        • Add the nyla_hidden tag to the product in Shopify. You need to force a full site build after hiding products in order for the tag to take effect. 

      Hiding pages or blog posts from search

      To hide a page from search, you should hide the page from search in the page settings. You need to force a full site build after hiding pages in order for the tag to take effect. 

      Updates to indexed

      Algolia will index your site on every full site build. This means that in order to add a product or page to search that was previously not there, you should force a full site build. 

      Index management

      • Nyla’s integration with Algolia relies on three indices: nyla_pages, and nyla_articles. All of the data required for these indices to be accurate is synced automatically to Algolia from Nyla, and there is no need to adjust the data directly.
        • Legacy search also uses nyla_products , so the same applies to that index if you are using this integration version. 
      • Make sure not to delete any of these indices as the Nyla search relies on them. If you happen to delete one by mistake, let us know and we’ll reinitialize, reindex and you’ll be back in business.
      • It's possible also use manual indexes that you can create yourself in order to have custom searchable indexes on your site. See below for more details. 

      Searchable attributes

      • In each index, you can see how the attributes Algolia actually searches are ranked by clicking into a given index, clicking Configuration, and referring to the sort order indicated.
      • In all three indices, the title of the entity is weighted the highest in the algorithm, followed by its description. It is possible to change this ranking by adjusting searchable attributes.
      • Note that Algolia is indexing data provided by Nyla for pages and articles. 
        • In legacy search modals using the TOGGLE_ALGOLIA link action, Algolia is indexing data provided by Nyla, which includes data retrieved previously from Shopify, but no data is being directly indexed from Shopify. 

      Synonyms

      It's important to set synonyms (words that have the same meaning for the purpose of search). Fortunately, it's easy to do so in Algolia. Here's how:

      For more information, check out this Algolia support article on synonym management.

      To get the most out of Algolia


      Basic optimizations

      Relevance Tuning
      Analytics

       

      [DEPRECATED - this is only for legacy Algolia search UI] Merchandise the products that appear in search (i.e. your initial “empty search” results).

      For customers using the latest version of the Algolia search integration, in order to set your empty search results for the templates and blocks, you should set a Shopify collection. 

      For further reading

      https://baymard.com/blog/ecommerce-search-query-types

       

      Building with Algolia

      Algolia works as a source with properties in conjunction with a form. The properties available in each source can be used to configure specific layouts. You can search within just one index if you want to limit to searching in that index only (e.g only products, or only blog articles). 

      Source Algolia & Properties

      Algolia has the following sources that contain properties you can use to display your search UI:

      The Source Algolia content item enables you to access any of the sources above. You access the different sources depending on the Index you choose. For example: 

      • Articles references properties from the Article source
      • Pages references properties from the Page source
      • Products references properties from the Product source
      • Setting the "Search results count" boolean as true will access the Summary source. 

      Source Algolia Content Item

      The source Algolia content item has the following settings: 

      • Search results count: Setting the "Search results count" boolean as true turns the source into a summary of the search results in each of the indexes below it, enabling you to  access the Summary source. 
      • Index: Set the Index you want to reference in the source. Depending on what you enter here, you will have different results returned by Algolia and will determine the properties that are returned. 
      • Group variants: Having this set to "On" will group product variants into single product listings provided the setting is also enabled in Algolia (see more below). If it is off, Algolia will return results as individual variants.

        In order to group variants into single products, this setting also needs to be configured within the Algolia app. In Shopify, go to Apps > Algolia > Search Options > Additional Settings, and enable the option "Show products instead of variants". 

        If the grouping feature isn't functioning correctly, please re-index your product data within the Algolia app. To do this, navigate to Indexing > Indexing status > Reindex Product Variants.
      • Limit: Limits the number of results returned

      When setting either Products or Manual index, you are prompted to manually enter an index. 

      • By default, the Products source defaults to the shopify_products index. The manual index also defaults to shopify_products if left empty.
      • By populating the manual index field, you can enter a specific index that you created in Algolia. Depending on the index type, this will either be a products or pages index. 

      When setting either Products you also have the option of whether to group the results into single product listings or split by variant. 

      Suggested building structure


      We recommend to build with the following structure:

      • Summary as the parent
        • You should have the Search results count boolean as on
        • This allows you to get counts for each individual index
        • Have a form input with a the following link action: 
          • SUBMIT_FORM(Form 1 ID,Form 2 ID,Form 3 ID)
          • Each form ID should be the corresponding content item ID. This submits all forms at once within the respective index. 
      • The individual indexes beneath (products, pages, articles - or the indexes of your choosing) 
        • This enables you to get search results returned for each index
        • Each index should have a form with the APPS_ALGOLIA_SEARCH form action
        • There should be a form field that can be hidden, with the title "search"
        • You can use a custom property to hide or show each index results based on what has been selected by the user

      Using manual indexes

      If building using a manual index, you should add the Index name in the Index field. 

      • You should enter your index name in the Custom name field when you select Manual index
      • Your grid layout should iterate over the apps.algolia.list property
      • Using the apps.algolia.list with the json filter (e.g apps.algolia.list | json) will allow you to see all the properties available for you to use.
      • Using apps.algolia.indexName in source Algolia if the "Search results count" toggle is on 
        will return the search results quantity for your manual index.
      • Using apps.algolia.indexName on the nested sources will return the indexName used on the source

      For example, if you created an index named "key_pages" that you want to make searchable, you would use the Index "key_pages": 

      You would iterate your results over apps.algolia.list: 

      By using the json filter, you would be able to see the properties available in the Index. 

       

      These will be based on the attributes you set in Algolia. For example, this manual index would return properties for firstname, lastname and zip_code: 

       

      For the results count, you would use apps.algolia.key_pages inside the Algola source with the

      Search results count toggle switched on

       

      Using metafields with Algolia  

      In order to use metafields on your search grid, you need to index the metafields in Algolia in addition to adding them in Nyla. Once the metafields are indexed in Algolia they'll be available as properties within the Algolia source.

      After adding your metafields in Algolia, you should reindex your products. 

      See Algolia docs on how to do this. 


      Using Algolia with multicurrency

      To use Algolia with multicurrency you need to first follow the step as per the Algolia docs here, contacting their support team to enable Shopify Markets support:  

      • https://www.algolia.com/doc/integration/shopify/sending-and-managing-data/markets/?client=ruby#enable-markets-indexing

      Once you have done that, you need to complete all the steps mentioned in the "Enable markets indexing" section of this document. 

      After you have completed that, you should go to the Algolia app in Nyla and add the markets index for each currency you want to enable. The currency code should match that set in Shopify markets, and the index name should match the corresponding Market Index Suffix that you set for that currency in the Algolia app. 

      Once you have done this, you should save and publish the app. 

      Example of the setup in the Algolia app: 

      The currency code and matching index name set in the Nyla Algolia app: 

       

       

      Upgrade from legacy search to the latest version of the integration

      If your site is using the non-editable modal generated by using the TOGGLE_SEARCH link action, you can upgrade to the latest version by:

      The benefits of upgrading to the latest search include: 

      • Control over UI and layout using Nyla building capabilities
      • Ability to use source & properties in order to create layout conditions 
      • Support to add manual indexes
      • The ability to group or split out product results by variant
      • Pull product indexes directly from the Algolia integration with Shopify

      Troubleshooting

      Why is Algolia not pulling in any results? 

      We usually have 2 main reasons that may cause this issue:

      Cause 1: You have not completed the Algolia installation on Shopify.

      In order to me sure the customer has completely installed Algolia on Shopify account, on Shopify go to Apps > select Algolia in the app list. For the cases that the customer didn't complete the installation, at the moment this article was written, you will see a message like this:

      In this case, please click on "Get Started" and follow the instructions on the next screens.

      Select your brand on the Application field, verify whether the Search API Key + Write API Key is automatically filled, and make sure the Indexes prefix is set as "shopify_".

      You should also ensure that you have followed the instructions for activating the app in Nyla, checking that the right API keys are in place for each field. They should match to the settings in Algolia app. 

       

      Cause 2: The customer has reached the limit of the data indexing of the current billing plan.

      To verify this potential cause, on Shopify go to Apps > select Algolia in the app list. Once the information of the app is completely loaded, please wait around 10 seconds and check wether some kind of warning message related to the limit of data indexing is displayed. At the moment that this article was written, this warning message looks like this:

      If you find this warning message, the customer needs to upgrade the current Algolia plan.

      Why is a product not appearing in search?

        • Ensure it doesn't have the nyla_hidden tag
        • If it has been newly added, you should rebuild your site given that indexes only update after each site build
        • Nyla’s integration with Algolia relies on the indices: nyla_pages, and nyla_articles. All of the data required for these indices to be accurate is synced automatically to Algolia from Nyla, and there is no need to adjust the data directly. However you can create manual indexes and use these freely. 
          • Note that Nyla's legacy implementation also relies on nyla_products
        • Make sure you have not to deleted any of the following three indices: nyla_products, nyla_pages, and nyla_articles. If you happen to delete one by mistake, let us know and we’ll reinitialize, reindex and you’ll be back in business.

      How can I hide a product from search?

      Why isn't my product showing up under the search terms I expect?

      How do I group product variants into a single product listing?

      Within Nyla, locate the Algolia source content item associated with your product index. Then, navigate to Design and enable the "Group variants" option.

      In order to group variants into single products, this setting also needs to be configured within the Algolia app. In Shopify, go to Apps > Algolia > Search Options > Additional Settings, and enable the option "Show products instead of variants". 

      If the grouping feature isn't functioning correctly, please re-index your product data within the Algolia app. To do this, navigate to Indexing > Indexing status > Reindex Product Variants.

      How do I set a collection to display as the recommendation for empty search results?

      Algolia section template: Select the template instance and click on the “Empty Search Results Collection” override to set the collection for empty search results. 

       

      Algolia Block: Select the Block, scroll to the bottom > Click on Empty Search > Click on Source Collection > Click on the Settings tab > Collection > Set a collection. Here you can see the steps: