Unlike many Shopify integrations, Tweakwise doesn't rely on Shopify apps or app embeds. Instead, it can be installed directly into your theme code, giving you complete control over the implementation and ensuring better performance and customization options.

This manual installation approach means you'll be adding code snippets directly to your theme files, allowing for:

Greater flexibility in customization
Better performance without app overhead
Full control over when and how Tweakwise loads
No dependency on third-party app infrastructure

Before you start

Go to the Tweakwise app and gather the following information:

your instancekey (on the Tweakwise app dashboard)
your root category id (select the root category in the categories module, often 0)

💡
If you have a multilang/multistore instance, this guide will not fit perfectly. Consider this as a guide and adapt the examples to your needs.

Settings

Open config/settings_schema.json and add a Tweakwise section with settings for instancekey and the root categoryid:

{
    "name": "Tweakwise",
    "settings": [
      {
        "id": "tweakwise_instancekey",
        "type": "text",
        "label": "Tweakwise instancekey",
        "default": "your instancekey"
      },
      {
        "id": "tweakwise_root_cid",
        "type": "text",
        "label": "Tweakwise root category",
        "default": "0"
      }
    ]
  }

Notes:

The instancekey can be found in your Tweakwise App dashboard.
The cid must be the Tweakwise category id you want to scope your search to. You can find the category id in the Tweakwise app.

Installation

Create a snippet snippets/tweakwise-snippet.liquid and copy the following code:

{% comment %}
  Renders Tweakwise installation

  Usage:
  {% render 'tweakwise-snippet' %}
{% endcomment %}

{% assign instancekey = settings.tweakwise_instancekey %}
{% assign cid = settings.tweakwise_root_cid %}

<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/starter.js" />
<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/{{ instancekey }}/tweakwise.js" />

<script defer="defer"
        src="https://gateway.tweakwisenavigator.net/js/{{ instancekey }}/tweakwise.js"
        data-failover="https://gateway.tweakwisenavigator.com/js/{{ instancekey }}/tweakwise.js"
        onerror="window.tweakwiseFailover(this.dataset.failover)"></script>

<script>(function(w, d, l, i, u) {w['_twa'] = l;w[l] = w[l] || [];w[l].push({ 'twa.start': new Date().getTime(), event: 'twa.js' });w[l].push({ 'twa.instance': i, event: 'twa.init' });var f = d.getElementsByTagName('script')[0],j = d.createElement('script');j.async = true;j.src = u;f.parentNode.insertBefore(j, f);
})(window, document, 'tweakwiseLayer', '{{ instancekey }}', "//navigator-analytics.tweakwise.com/bundles/scout.js");</script>

<!-- prevent tweakwise auto initialize -->
<script>
  window["twn-starter-config"] = window["twn-starter-config"] || {};
  window["twn-starter-config"].auto = false;
</script>

Apply the snippet in theme.liquid in the head:

{% render "tweakwise-snippet" %}