To give the user the full e-commerce shopping experience they are used to, we need to use a dedicated search results page.

To display the search results on the dedicated page, make sure you have a dedicated search input as trigger for the search action. We recommend to make this input always visible in the header (not hide it behind a search button), to make searching as easy as possible.

Foundation

In the code editor, create a new section tweakwise-search.liquid and copy the following snippet:

<div class="section section-{{ section.id }}">
  <div id="tweakwise-output" class="page-width">
    <div class="tw-skeleton__container">
      <h3>{{ 'content.search_results' | t }}</h3>
      <div class="tw-skeleton__grid">
        <div class="tw-skeleton__left">
          <div class="tw-skeleton"> </div>
          <div class="tw-skeleton"> </div>
          <div class="tw-skeleton"> </div>
        </div>
        <div class="tw-skeleton__right">
          {% for i in (1..9) %}
          <div>
            <div class="tw-skeleton is-square"> </div>
            <div class="tw-skeleton is-low"> </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

{%- style -%}
  .section-{{ section.id }} { margin-top: 20px; }
  .tw-skeleton__container { min-height: 100vh; }
  .tw-skeleton { background: #f2f2f2; margin-bottom: 20px; min-height: 1.5em; }
  .tw-skeleton.is-low { min-height: 1em; }
  .tw-skeleton.is-square { aspect-ratio: 1/1; margin-bottom: 7px; }
  .tw-skeleton.is-square + .tw-skeleton { margin-bottom: 10px; }
  .tw-skeleton__grid { display: grid; grid-template-columns: 1fr 3fr; gap: 20px; }
  .tw-skeleton__right { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
{%- endstyle -%}

<script>
window.addEventListener('twn.starter.ready', function () {
  const params = new URLSearchParams(location.search);
  var term = params.get("tn_q");
  if(term){
    const listerPage = tweakwiseListerPage({
      query: params.get("tn_q"),
      output: "#tweakwise-output",
      cid: "{{settings.tweakwise_root_cid}}",
      lang: '{{ request.locale.iso_code }}'
    });
  }
});
</script>

{% schema %}
  {
    "name": "Tweakwise Search",
    "settings": [],
    "presets": [{
      "name": "Tweakwise Search",
      "category": "Tweakwise"
    }]
  }
{% endschema %}

Notes:

• this code assumes the collections are synced with the collection.id as categoryid. If you choose a different id in the data sync (for example, with a language prefix), make sure you update this cid to use that format.
• the template places a skeleton structure to fight CLS, you can update this by choice.
• update the tweakwiseListerPage call to what you need, using the available Options.

Go to your store theme into edit mode and open the Search page:

In the left sidebar:

• Disable/hide the Search and Search results section
• Add the Tweakwise Search section

Create a Prominent Search Input

Go to your header (depending on your theme) and make sure there is a dedicated, always-visible search input in your header.

This can be done as simple as:

<div class="tweakwise-search">
  <form action="{{ routes.search_url }}">
		<input name="tn_q" id="tweakwise-input" autocomplete="off" placeholder="Search for something..">
  </form>
</div>

💡

Why always visible? In e-commerce, search is one of the most critical user actions. Research shows that prominent, always-visible search inputs significantly improve user experience and conversion rates. Hiding search behind a toggle button creates unnecessary friction and reduces search usage.

Notes:

• You can style the input and form to your desire.
• Make sure there's a form around the input, with a form action that points to the search results page (/search).
• Make sure the search query parameter is tn_q
• If you already had a search input, update the input id to tweakwise-input so the suggestions get mapped correctly.
• Consider making the search input prominent with adequate sizing and positioning in your header layout.

Implement suggestions

Open tweakwise-snippet.liquid or theme.liquid and add the following code:

<script>
  window.addEventListener("twn.suggestions.ready", function () {
    window.tweakwiseSuggestions({
      input: "#tweakwise-input",
      instancekey: "{{ settings.tweakwise_instancekey }}",
      cid: "{{settings.tweakwise_root_cid}}",
      lang: '{{ request.locale.iso_code }}'
    });
  });
</script>

Notes:

• update the tweakwiseSuggestions call to what you need, using the available Options.

Test

Now you should have the e-commerce search basics working: a search input with suggestions, when hitting "enter" or selecting a searchphrase suggestion the user is redirected to the search results.