🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
Integrations / Shopify

Shopify Algolia configuration

Starting December 31, 2023, the Algolia Search and Discovery app won’t be able to change Shopify theme code. Algolia stores all configurations in the Shop metafields. For more information, see The Asset API resource in the Shopify documentation.

Where to find the Algolia configuration settings

The Algolia Search and Discovery app creates metafields in the Shop object. You can see the Shop metafields in your Shopify admin.

  1. In your Shopify admin, on the left sidebar, open the Home* tab.
  2. Add /metafields.json to the end of the URL.

    assets/algolia_config.js.liquid is still available in your theme. However, after December 31, 2023, the Algolia Search and Discovery app will not be able to update the theme code.

The Algolia Search and Discovery app uses the namespace algolia_search.

Metafields are grouped into these keys:

  • translations—translations for labels and placeholder text
  • facets—instantsearch facets for filters
  • sort_orders—instantsearch sort orders
  • algolia_config—Algolia configuration settings
  • collections_facets_<COLLECTION_ID>—customized collection facets
  • collections_sort_orders_<COLLECTION_ID>—customized collection sort orders

Collections facets and sort orders are only created when you customize the collection. Each collection has its own metafield for facets and sort orders for load optimization.

The following example shows how the Algolia configuration settings are stored in the Shop metafields.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    {
      "id": 22262894166073,
      "namespace": "algolia_search",
      "key": "algolia_config",
      "value": ""
      "type": "json_string",
   },
   {
      "id": 28038128697506,
      "namespace": "algolia_search",
      "key": "collection_sort_orders_293559566498",
      "value": "[{\"key\":\"recently_ordered_count\",\"title\":\"Popularity\",\"desc\":{\"active\":true,\"title\":\"Most popular\"}}]",
      "description": null,
      "owner_id": 47976251554,
      "created_at": "2023-11-15T15:05:03-05:00",
      "updated_at": "2023-11-15T15:05:03-05:00",
      "owner_resource": "shop",
      "type": "json_string",
      "admin_graphql_api_id": "gid://shopify/Metafield/28038128697506"
   }

Metafield updates

Metafields are automatically updated when you make changes to your Algolia configurations.

Shop Metafields are not available in Settings > Custom. You can update Shopify Shop metafields with API calls.

Migrating to metafield configurations

  1. In your Shopify admin, locate your Theme library and click Edit code for the theme you want to migrate.

    Shopify theme library code editor

  2. Click theme.liquid in the Layout folder and scroll down to the line containing algolia_config.js.

    algolia_config.js

  3. Replace that whole line with {% render 'algolia_config' %}
  4. *Save** your updates.

    Save theme

  5. On the left, scroll down to the Snippet folder and click Add a new snippet.
  6. Type algolia_config into the box and click Done.
  7. Copy and paste the following code into the new snippet.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    
    <script>
       window.algoliaShopify = window.algoliaShopify || {};
       {% if shop.metafields.algolia_search.algolia_config %}
          window.algoliaShopify.config = window.algoliaShopify.config || {};
          window.algoliaShopify.config = {{ shop.metafields.algolia_search.algolia_config | json }};
       {% else %}
          window.algoliaShopify.config = algoliaShopify.config || {};
       {% endif %}
       {% if shop.metafields.algolia_search.instantsearch_sort_orders %}
          window.algoliaShopify.config.sort_orders = {{ shop.metafields.algolia_search.instantsearch_sort_orders | json }};
       {% endif %}
       {% if shop.metafields.algolia_search.instantsearch_facets %}
          window.algoliaShopify.config.facets = {{ shop.metafields.algolia_search.instantsearch_facets | json }};
       {% endif %}
    
       {% if collection %}
          window.algoliaShopify.current_collection_id = {{ collection.id }};
       {% endif %}
    
       {% assign sort_orders_collection_meta = 'collection_sort_orders_' | append: collection.id %}
       {% if collection %} 
          {% if shop.metafields.algolia_search[sort_orders_collection_meta] %}
             window.algoliaShopify.config.collection_sort_orders = window.algoliaShopify.config.collection_sort_orders || {};
             window.algoliaShopify.config.collection_sort_orders['{{ collection.id }}'] = {{ shop.metafields.algolia_search[sort_orders_collection_meta] | json }};
          {% else %}
             window.algoliaShopify.config.collection_sort_orders = window.algoliaShopify.config.collection_sort_orders || {};
             window.algoliaShopify.config.collection_sort_orders['default'] = {{ shop.metafields.algolia_search['collection_sort_orders_default'] | json }}
          {% endif %}
       {% else %}
          window.algoliaShopify.config.collection_sort_orders = null
       {% endif %} 
    
       {% assign facet_collection_meta = 'collection_facets_' | append: collection.id %}
       {% if collection %} 
          {% if shop.metafields.algolia_search[facet_collection_meta] %}
             window.algoliaShopify.config.collection_facets = window.algoliaShopify.config.collection_facets || {};
             window.algoliaShopify.config.collection_facets['{{ collection.id }}'] = {{ shop.metafields.algolia_search[facet_collection_meta] | json }};
          {% else %}
             window.algoliaShopify.config.collection_facets = window.algoliaShopify.config.collection_facets || {};
             window.algoliaShopify.config.collection_facets['default'] = {{ shop.metafields.algolia_search['collection_facets_default'] | json }}
          {% endif %}
       {% else %}
          window.algoliaShopify.config.collection_facets = null
       {% endif %}
    </script>
    
  8. Click Save.
Did you find this page helpful?