As of December 31, 2023, Shopify no longer allows apps to modify theme code.
To integrate Autocomplete and InstantSearch, use the Algolia AI Search & Discovery app’s App Embed and App Blocks.
To get started, see Quickstart and Algolia configuration.
Enable named tags
To activate named tags, go to the Products section of the Indexing tab and select the Index named tags option.
Add named tags to products
To add a named tag to a product, open the product’s page on Shopify and add a tag with the named tag format.Default tags
- Format:
attr:value - Extracts
valueas astring - Must not contain commas
- Example:
author:Isaac Asimov
Boolean tags
- Format:
attr:boolean:value - Value can be
trueorfalse - Extracts
valueas aboolean - Example:
suitable_for_children:boolean:true
Number tags
- Format:
attr:number:value - Value can be an integer or decimal number
- Extracts
valueas anumber - Examples:
age:number:34,alternative_price:number:199.90
Encoded tags
- Format
attr:encoded:value - Extracts and decodes a URL-encoded
value. - Can have commas
- Example:
alternative_name:encoded:Me%2C%20Myself%20and%20I
You need to replace
, with %2C,
but the URL-encoded approach offers a safe way to make sure that all characters are properly interpreted by Shopify’s tag engine.- An online encoder
- A function built into your programming language, such as
encodeURIComponentin JavaScript
Restrict named tags to specific variants
Shopify tags are only available at the product level, so you can’t restrict them to a subset of your variants. Algolia provides a workaround with named tags. To do this, add a prefix in brackets to the named tag:[option_name:option_value]variant_tag:variant_tag_option.
For example:
- To add the named tag
long_name:Smallto a product’s size S variant, add the following tag to the product:[size:S]long_name:Small. - To add the named tag
original_price:number:19.90to a product’s size S and blue variant, add the following tag to the product:[size:S][color:blue]original_price:number:19.90
size and color,
and you specify only one, the named tag is applied to all matching variants that share that option.
To target option values that begin with the same text, add an asterisk (*) at the end of the value.
For example, [color:B*] matches all values that start with “B”, such as Blue and Brown.