Shopify: Install M:AI on old vintage themes (pre 2.0)

How to install M:AI on old themes pre Online Store 2.0?

Only applies if you have a 5+ year old Shopify theme. Shopify officially released the Online Store 2.0 (OS 2.0) theme architecture on June 29, 2021.

Install M:AI on "locked" themes

Do you have a Shopify store that runs an old theme such as Debut theme (vintage / pre-Online-Store-2.0)?
On those themes Shopify does not let you add app blocks/sections in the editor — that's why "Add section → Apps" is empty and the product page is locked.

M:AI Search still works because it installs as an app embed (a different mechanism that old themes do support);
M:AI Recommendations use app blocks, so they have to be placed in the theme code by hand. Nothing is broken on our side — it's a Shopify limitation for this theme type. We'll ship a one-click loader later so this isn't needed for future old-theme stores, but here is the manual install to unblock the theme now.

Step-by-step instructions

1. Load the recommendation engine on every page (do this once)

Go to Online Store → Themes → … → Edit code
Open Layout/theme.liquid and paste this just before the closing :

<script>
  (function (d, w, id) {
    if (d.getElementById(id)) return;
    fetch('/tools/ai-search-86b74/recommendation')
      .then(r => r.text())
      .then(code => {
        var ts = d.createElement('script');
        ts.innerHTML = code; ts.id = id;
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ts, s);
      });
  })(document, window, 'm-ai-recommendation-init');
</script>

Each placeholder needs the Widget ID of the recommendation you want there.

You get it from your list: open the recommendation in /dashboard/recommendations/list and copy its ID (see the image below).
Replace WIDGET_ID below.

Product page → open Sections/product-template.liquid, paste where you want the widget to show:

<div class="mai-recommendation-block mai-recommendation-block--product"
     data-id="WIDGET_ID" data-product-id="{{ product.id }}"></div>
<div class="mai-recommendation-block mai-recommendation-block--product"
     data-id="WIDGET_ID" data-product-id="{{ product.id }}"></div>

Collection page → open Sections/collection-template.liquid:

<div class="mai-recommendation-block mai-recommendation-block--collection"
     data-id="WIDGET_ID" data-collection-id="{{ collection.id }}"></div>

Start page → paste this code where you want it on the homepage (e.g. inside the home section you prefer). It needs no product/collection id:

<div class="mai-recommendation-block" data-id="WIDGET_ID"></div>

Important:
The {{ {{product.id}} }} / {{ {{collection.id}} }} parts only fill in automatically inside their own page section (product placeholder in the product section, collection placeholder in the collection section) — Shopify inserts the real IDs there.

Do not move those two placeholders into a global file like theme.liquid, or the IDs come out empty.