How To Add Custom Related Products To Your Product Page Shopify

Adding related products to your Shopify store can help increase sales by providing customers with additional options and choices. In this video, we show you how to add related products manually, using the Shopify Liquid Code.

Create New Metafield

Goto settings > Metafields > Products and create a new definition with the following namespace value

custom.related_products

From the Content type drop-down select Product then List of products

Schema settings for main-product.liquid file

Add the following code below "blocks": [

{
  "type": "related_products",
  "name": "Custom Related Products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Related Products"
    },
	{
      "type": "number",
      "id": "heading_font_size",
      "label": "Heading font size (px)",
      "default": 18
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#121212"
    }
  ]
},

Liquid code for main-product.liquid file

Add the following code below {%- case block.type -%}

{%- when 'related_products' -%}
  {% if product.metafields.custom.related_products %}
    {% assign relatedProducts = product.metafields.custom.related_products.value %}
    <!-- check at least one recommended product is available --> 
    {%- liquid 
      assign has1product = false
      for prod in relatedProducts
        if prod.available == true
          assign has1product = true
        endif
      endfor
    -%}
    {% if has1product %}
      <p class="related-products-heading" style="font-size: {{block.settings.heading_font_size}}px; color: {{block.settings.heading_color}};">{{ block.settings.heading }}</p>
      <div class="related-products" id="related-products-{{ block.id }}">
        {% for prod in relatedProducts %}
          {% if prod.available == true %}
            <a href="{{ prod.url }}" class="related-product" aria-label="{{prod.title}}" title="{{ prod.title }}">
              <img class="related-product__image" src="{{ prod.images[0] | img_url: '500x' }}" alt="{{ prod.title }}">
            </a>
          {% endif %}
        {% endfor %}
      </div>
      <style>
        #related-products-{{ block.id }} {
          text-align: left;
          display: flex;
          flex-wrap: wrap;
        }
        #related-products-{{ block.id }} .related-product {
          display: inline-block;
          width: calc(25% - 0.4rem);
          margin: 0px 0.4rem 0.8rem 0px;
          position: relative;
          border: 1px solid transparent;
          text-align: center;
        }
        #related-products-{{ block.id }} .related-product:last-child {
          margin-right: 0;
        }
        #related-products-{{ block.id }} .related-product__image {
          width: 100%;
          max-width: 100%;
          height: 100%;
          object-fit: cover;
        }
        #related-products-{{ block.id }} .related-product:hover {
          border-color: {{ block.settings.hover_border_color }};
        }
      </style>
    {% endif %}
  {% endif %}