Related Products & Color Options Block for Product Page - Shopify

Visit my store for the PRO version:

https://shop.ed.codes/products/related-products-block

Set up the metafield

In your Shopify admin, navigate to Settings > Metafields.
Click on Products. This will display any product metafields you have set up.

Define the metafield

Click on “Add Definition”.
In the Name field, write “Related Products”. You can name it differently if you want. This doesn’t affect the functionality.
In the Namespace and key field, put product_info.related_products. This connects to the code so don’t change it - it needs to be exactly as written.
The Description is optional, but I recommend writing something like “Related Products - https://shop.ed.codes/products/related-products-block”. You should add the link to the product page so that you know where you can re-download these instructions and video in case you lose/delete them in future.
Ignore the checkbox that says “Expose this metafield to Storefront API requests”
Click Select content type and select Product.
Below that, select List of products.
Hit save

Fill out the metafield

Now you can go to any product in the admin, and you should see our new metafield at the bottom of the page.

Clicking into the field will open up a product selector. Now you can easily ad your related products.

Have a large inventory?

If you have lots of products, and it would be too time-consuming to go into each one to add the related products, then you need a way to do this in bulk. You should watch my video on bulk editing metafields - https://youtu.be/xSY1ktiJkm8

The settings schema

This part creates the block and the settings fields in the theme customizer sidebar.

Scroll lower down in main-product.liquid until you find a line that says {% schema %} (or just search for ‘{% schema %}’). In the beginning of the schema you should see a few lines like this:

{% schema %}
{
  "name": "t:sections.main-product.name",
  "tag": "section",
  "class": "section",
  "blocks": [

Paste the following code directly onto the next line after “blocks”: [ (Press enter to move the app block lower down)

{
  "type": "related_products",
  "name": "⚡️ 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"
    },
    {
      "type": "color",
      "id": "hover_border_color",
      "label": "Border color (hover)",
      "default": "#121212",
      "info": "Make color field blank (transparent) if you don't want a border"
    }
  ]
},

The main output code

Search for the line that says {%- case block.type -%}. There will only be one of these in the whole file. It should be directly under another line that says {%- for block in section.blocks -%}. This is where all of the product information blocks are added.
Paste the following code on the line directly under {%- case block.type -%}. The next line would normally be {%- when '@app' -%} so just place your cursor before this line and hit enter to make a new line and move that one down.

Tip: To keep your code neat, try to fix the indentation if it pastes in wrong. Highlight the part you want to move, and use tab to indent and shift+tab to unindent.

{%- when 'related_products' -%}
  {% if product.metafields.product_info.related_products %}
    {% assign relatedProducts = product.metafields.product_info.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 %}