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)
• your marketwebpresenceid (required for product syncing)

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"
      }
    ]
  }

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.

Markets

In order to get unique products for every market/language combination, product id's are a compound of marketid_marketwebpresenceid_locale_productid.

The marketwebpresenceid is not available on Shopify's frontend in liquid files. In order to target the correct collection or product, this id needs to be saved to a market metafield (for example tweakwise_webpresenceid).

For every connected storefront/market combination, this metafield must be filled correctly to ensure the right collection and products are targeted.

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>

<!-- 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" %}