Product recommendations are a powerful way to increase sales, improve customer experience, and boost your average order value. By showing relevant products at the right time, you can guide customers toward items they're likely to purchase.

Strategic Placement

Homepage - Featured Recommendations Use featured product recommendations on your homepage to showcase:

Best-selling items
New arrivals
Seasonal promotions
Curated collections

Featured recommendations help visitors discover products immediately and set the tone for their shopping experience.

Product Pages - Related Recommendations On product detail pages, use related recommendations to display:

Complementary items (cross-sell)
Similar products (upsell)
Items frequently bought together
Alternative options in different sizes or colors

Related recommendations capitalize on customer interest and can significantly increase cart value by suggesting relevant add-ons.

Implementation

In the theme's code editor, create a new section tweakwise-recommendations.liquid and copy the following snippet:

<div class="section-{{ section.id }} section section--page-width">
  <div class="page-width tws-recommendations">
    
    <div class="tws-recommendations__title">
      <h3>{{ section.settings.title }}</h3>
    </div>
    
    <div class="tws-recommendations__body" id="tweakwise-recommendations" >      
      <div class="tw-skeleton__container">
        {% assign count =  8 %}
        {% if section.settings.view == 'carousel' %}
          {% assign count =  4 %}
        {% endif %}
        <div class="tw-skeleton__right is-{{section.settings.view}}">
          {% for i in (1..count) %}
          <div>
            <div class="tw-skeleton is-square"> </div>
            <div class="tw-skeleton is-low"> </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

{%- style -%}
  .tws-recommendations__title {
    padding: 20px;
    text-align: center;
  }
  .tws-recommendations__body{margin: 0 0 40px 0;}
  .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__right.is-carousel { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; }
  .tw-skeleton__right.is-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; }
{%- endstyle -%}

{%  if section.settings.type != blank %}
<script>
  window.addEventListener("twn.recommendations.ready", function () {
    window.tweakwiseRecommendations({
      output: "#tweakwise-recommendations",
      instancekey: "{{ settings.tweakwise_instancekey }}",
      view: "{{ section.settings.view }}",
{%  if section.settings.type == "related" %}
      related: {
        productId: "{{product.selected_variant.id}}",
        groupKey: "{{ section.settings.groupKey }}"
      }
{% endif %}
{% if section.settings.type == "featured" %}
      featured: {
        id: "{{ section.settings.featuredId }}"
      }
{%  endif %}
    });
  });
</script>
{%  endif %}

{% schema %}
  {
    "name": "Tweakwise Recommendations",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "default": "For you",
        "label": "Title",
      },
      {
        "type": "select",
        "id": "type",
        "default": "featured",
        "options": [
          { "value": "featured", "label": "Featured" },
          { "value": "related", "label": "Related" }
        ],
        "label": "Type"
      },
      {
        "type": "text",
        "id": "groupKey",
        "default": "pdp-cross",
        "label": "Group key",
        "visible_if": "{{ section.settings.type == 'related' }}"
      },
      {
        "type": "text",
        "id": "featuredId",
        "label": "Featured id",
        "visible_if": "{{ section.settings.type == 'featured' }}"
      },
      {
        "type": "select",
        "id": "view",
        "default": "carousel",
        "options": [
          { "value": "carousel", "label": "Carousel" },
          { "value": "grid", "label": "Grid" }
        ],
        "label": "View"
      }
    ],
    "presets": [{
      "name": "Tweakwise Recommendations",
      "category": "Tweakwise"
    }]
  }
{% endschema %}

In the visual editor, a Tweakwise Recommendations section should be available:

In the visual editor, new sections are available

Using the section

In your theme, go to the Product template.

Remove/disable any existing Related Products or Featured Collections.
Add the Tweakwise Recommendations section.
In the section settings, select Related and enter the group key configured in Tweakwise.

Notes:

The groupkey can be found in Tweakwise app in the up & cross selling recommendations module.
The featured products id can be found in the Tweakwise app in the featured products recommendations module.