Commerce Pages

Shopify Collections

To display Tweakwise Commerce Pages on your collections, create a custom Tweakwise Product Grid section.

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

{%- style -%}
  .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; }
  .section-{{ section.id }} { padding: 20px 0; }
  .section-{{ section.id }} .twn-starter__pagination.is-top { display: none; }
{%- endstyle -%}

  <div class="section section-{{ section.id }}">
  <div id="tweakwise-navigation-output" class="page-width">
    <div class="tw-skeleton__container">
      <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>
        
<script>
window.addEventListener('twn.starter.ready', function () {
  const listerPage = tweakwiseListerPage({
    output: "#tweakwise-navigation-output",
    cid: "{{collection.id}}",
    lang: '{{ request.locale.iso_code }}',
    filters: {
      hideActiveCategoryFilter: true
    },
    ui: {
      closeSearchButton: false
    }
  });
});
</script>

{% schema %}
  {
    "name": "Tweakwise Product Grid",
    "settings": [ ],
    "presets": [{
      "name": "Tweakwise Product Grid",
      "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.

Using the section

In your theme, go to the Collection template.

  • Disable/remove/hide the default Collection Product Grid.
  • Add the Tweakwise Product Grid: