Blink Auto Link Manager

The blink-auto-linker Liquid snippet reads the JSON from a shop metafield and automatically wraps matching phrases in your store content with anchor tags — no manual link insertion needed. The rules are applied in order of phrase length (longest first) to prevent shorter rules from matching inside longer ones.

[
  { "find": "Nike", "url": "/collections/nike" },
  { "find": "Running Shoes", "url": "/collections/running-shoes" }
]

{%- render 'blink-auto-linker', text: your_text_variable -%}

{% comment %}

SETUP
1. Create a shop metafield definition with namespace "blink" and key "autolinker". Set the content type to "JSON".
2. In the metafield value, add an array of objects with "find" and "url" properties. For example:
[
  {
    "find": "Your Brand Name",
    "url": "https://yourbrand.com"
  },
  {
    "find": "Another Phrase",
    "url": "https://anotherlink.com"
  }
]

3. Use the Blink Auto Link Manager tool to generate the JSON, then copy the output into the metafield value.
4. Render the snippet wherever you need auto-linking:
   {%- render 'blink-auto-linker', text: your_text_variable -%}
{%- endcomment -%}

<div id="blink-autolinker">{{ text }}</div>

<script>
  window.blinkAutoLinkerRules = {{ shop.metafields.blink.autolinker.value | json }};

  (function () {
  const rules = window.blinkAutoLinkerRules;
  const container = document.getElementById('blink-autolinker');
  if (!rules || !rules.length || !container) return;

  // Sort longest find phrase first to prevent shorter rules matching inside longer ones
  rules.sort(function (a, b) {
    return b.find.length - a.find.length;
  });

  // Work on a temporary element so we can walk text nodes safely
  const temp = document.createElement('div');
  temp.innerHTML = container.innerHTML;

  rules.forEach(function (rule) {
    const escaped = rule.find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const regex = new RegExp('\\b' + escaped + '\\b', 'gi');
    applyRule(temp, regex, rule.url);
  });

  container.innerHTML = temp.innerHTML;

  function applyRule(node, regex, url) {
    // Walk child nodes — skip anchor elements entirely to prevent nested links
    Array.from(node.childNodes).forEach(function (child) {
      if (child.nodeType === Node.TEXT_NODE) {
        if (regex.test(child.nodeValue)) {
          regex.lastIndex = 0;
          const span = document.createElement('span');
          span.innerHTML = child.nodeValue.replace(regex, function (match) {
            return '<a href="' + url + '">' + match + '</a>';
          });
          child.replaceWith(...span.childNodes);
        }
      } else if (child.nodeType === Node.ELEMENT_NODE && child.tagName !== 'A') {
        applyRule(child, regex, url);
      }
    });
  }
})();
</script>