In your online store, go to your theme and choose "Edit code".

Installation

Go to theme.liquid and follow the Basic web app configuration guide:

{% assign key = 'instancekey' %}

<!-- default installation -->
<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/starter.js" />
<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/{{ key }}/tweakwise.js" />

<script defer="defer"
        src="https://gateway.tweakwisenavigator.net/js/{{ key }}/tweakwise.js"
        data-failover="https://gateway.tweakwisenavigator.com/js/{{ key }}/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', '{{ key }}', "//navigator-analytics.tweakwise.com/bundles/scout.js");</script>

<!-- config overrides -->
<script>window["twn-starter-config"] = window["twn-starter-config"] || {};</script>
<script>
  window['twn-starter-config'].input = null;
  window['twn-starter-config'].cid = '0';
  window['twn-starter-config'].lang = '{{ request.locale.iso_code }}';
</script>

Notes:

The cid must be the Tweakwise category id you want to scope your search to.

Search

To actually implement search, we need a search results page and a search input:

Go to your store pages, and add a new dedicated page for the search results (remember the page path)
Go to header.liquid and add a search input on your desired location or alter the existing input:

<div class="tweakwise-search">
  <form action="/pages/results">
		<input name="tn_q" id="tweakwise-input" autocomplete="off" placeholder="Search for something..">
  </form>
</div>

Notes:

If your theme already has a search input, make sure there's a form around it.
Make sure the form action is equal to the page path you created before.

Suggestions

Go to theme.liquid and follow Suggestions initialization:

<script>
  window.addEventListener("twn.suggestions.ready", function () {
    window.tweakwiseSuggestions({
      input: "#tweakwise-input",
      instancekey: "{{ key }}",
      cid: "0",
      lang: '{{ request.locale.iso_code }}',
      searchPhrases: {
        handle(event) {
          var suggestion = event.data;          
          location.href = '/page/searchresults?tn_q=' + suggestion.match;
        }
      }
    });
  });
</script>

Note:

Make sure the handle functions redirect to the results page path you created before.

Lister pages

Go to main-collection-product-grid.liquid and remove the default shopify lister code, and add the Tweakwise JS navigation configuration:

{{ 'template-collection.css' | asset_url | stylesheet_tag }}

<div class="page-width">
  <div id="tweakwise-navigation-output">
		<!-- optionally add skeleton to prevent any CLS issues (page jump) -->
	</div>
    
  <script>
    window['twn-starter-config'].navigation = {
      cid: '{{ collection.id }}',
      output: '#tweakwise-navigation-output' 
    };
  </script>
  
</div>

Recommendations

Go to related-products.liquid, remove the default shopify recommendations and add the Tweakwise JS reocmmendations configuration:

<div id="tweakwise-recommendations"></div>

<script>
  window.addEventListener("twn.recommendations.ready", function () {
    window.tweakwiseRecommendations({
      output: "#tweakwise-recommendations",
      instancekey: "{{key}}",
      related: {
        productId: "{{product.id}}",
        groupKey: "crosssell"
      }
    });
  });
</script>

Notes:

the groupkey should be replaced with the correct group key related