How to Add Related Products in Shopify

Adding related products to your Shopify store is a powerful strategy to enhance user experience and increase sales through cross-selling and upselling. By showing customers products related to what they’re viewing, you encourage them to explore more of your offerings and potentially make additional purchases. This guide will show you how to implement related products on your Shopify product pages.

Step 1: Determine the Logic for Related Products Decide how you want to define ‘related products’. Common strategies include matching by the same product type, collection, or tags. Choose a method that makes the most sense for your store’s inventory and customer shopping habits.

Step 2: Edit Your Product Template Access your Shopify admin panel, go to Online Store > Themes, choose your current theme, and then click on ‘Actions’ > ‘Edit code’. Find the product template file (usually product.liquid or product-template.liquid).

Step 3: Add Related Products Code Insert the following Liquid code to display related products based on product tags. This code snippet fetches up to four products sharing the same tags as the currently viewed product.

Code Example: Displaying Related Products Based on Tags

<!-- Example Liquid code to display related products on a Shopify product page (pseudo-code) -->
<div class="related-products">
  <h2>You may also like</h2>
  {% assign found_products = 0 %}
  {% assign current_tags = product.tags %}
  {% for product in collections.all.products %}
    {% if product.tags contains current_tags and found_products < 4 %}
      <div class="related-product">
        <a href="{{ product.url }}" title="{{ product.title }}">
          <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
          <p>{{ product.title }}</p>
          <p>{{ product.price | money_with_currency }}</p>
        </a>
      </div>
      {% assign found_products = found_products | plus: 1 %}
    {% endif %}
    {% break if found_products >= 4 %}
  {% endfor %}
</div>

Step 4: Customize the Display You can customize the appearance of the related products section by editing the HTML and CSS. Ensure that it aligns with your store’s design and branding.

Step 5: Test the Functionality Preview your changes in the theme editor and test the related products feature to ensure it works correctly. Check different products to confirm that the related items are indeed relevant.