Skip to main content

Add Custom Related Products

Display a custom "You might also like" section on product pages using product reference metafields.

Advanced Tutorial

Verified for the Debut theme only. May require adjustments for other themes.

Step 1: Create a Liquid Snippet​

Create related-products.liquid in Snippets:

<div class="related-products-wrapper">
  {%assign related_products = product.metafields.related_products.product_list.value %}
  {% if related_products %}
    <h3>You might also like:</h3>
    <div class="related-product-list">
      {% for related_product in related_products %}
        <a href="{{shop.url | append: '/products/' | append: related_product.handle }}">
          <div class="related-product">
            <div class="related-product-image">
              <img src="{{related_product.featured_image | img_url: 'medium' }}" />
            </div>
            <div class="related-product-name">{{related_product.title}}</div>
            <div class="related-product-price">{{related_product.price | money}}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  {%endif%}
</div>
<div class="related-products-dummy"></div>

Step 2: Include in Product Template​

{% render "related-products" %}

Step 3: Add CSS​

.related-products-dummy { padding: 10px; clear: both; }
.related-product-list {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.related-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  max-width: 165px;
}
.related-product-image {
  height: 165px;
  width: 165px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.related-product-image img { max-width: 100%; max-height: 100%; }

Step 4: Populate Metafields​

In Metafield Studio, create a product reference list metafield under the related_products namespace with the key product_list. Add references to the products you want to display.