Check out my Youtube channel

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

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

Define the metafield

  1. Click on “Add Definition”.
  2. In the Name field, write “Related Products”. You can name it differently if you want. This doesn’t affect the functionality.
  3. 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.
  4. 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.
  5. Ignore the checkbox that says “Expose this metafield to Storefront API requests”
  6. Click Select content type and select Product.
  7. Below that, select List of products.
  8. 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.

  1. 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": [
  1. 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

  1. 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.
  2. 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 %}

Want posts like this in your inbox? Subscribe to the newsletter.

Comments

12 comments
  • Cristian Taut

    Hello! Thanks for this tutorial, it's awesome!

    I managed to do the first part, I have it in my list, but for the second code, I cannot find the {%- case block.type -%} element. I use the Palo Alto theme. Could you tell me where I can add the second code?

    Thanks!


  • Gulugul

    For some reason the error: Invalid value for type in block '9062ebd8-cb4c-47fc-b250-78f4e4ce323f'. Type must be defined in schema.
    Schows up even though I definded the block in schema like in the tutorial. Any help is higly appreciated


  • Laura

    Hi! I have been looking for this for months! I have the WOKIE theme and it already contains some related products code but it's automatically picking up products randomly and I would prefer to select it like you showed on youtube. I manage to create the metafields but I cannot add your code to my theme as it says there is already a related product section. Can you help ?


  • Francine

    Hi,
    Thank you for this tutorial!
    I'm trying to apply this concept to display a list of related collections (as opposed to products) but it's not working...
    Are you able to adjust the code for me?
    I'd greatly appreciate it!


  • Michael

    Hi there, I just went through this tutorial. It's been something I'm been looking for so thanks a lot! I managed to get the Metafields to work find in the back end, as well as the block showing up in settings, however, the products aren't showing on my page. I used the Free version since the paid version doesn't apply to my theme, Prestige. Any guidance would be really appreciated.


  • David skelton

    how do we display the product name under the image instead of hoover over ?


    1 reply
    • Jakaria Abeer

      on the image tag you will see prod.title that's the code for title


  • Aidan

    Is it possible to get it to show related products titles?


  • Junaid

    Hi,

    I want to add product by metafiled to my product page as Button (like Get Sample Product)


  • jim

    hi, can someone help me? i have done all the steps, but it didn't work, i have it on my sidebar but i don't see anything at the product page


  • robincingh

    Hi, thanks for this. it only shows related product, but how to add this on to cart without going to the product (something like an upsell)


    1 reply
    • 1 reply
      • robincingh

        Thanks, i have coded it as related product block with add to cart but just wanted to see if it was possible to do it with the style/code section you built.


  • Simone

    Does this only work for dawn? or can it work for impulse also?


    1 reply
    • Eduard Fastovski

      It can work for Impulse. You need to open two files, the schema goes in 'main-product.liquid' and the html goes in 'product-template.liquid'


      2 replies
      • Iselin

        i dont have a code file name 'main.product.liquid?


      • Vitor

        Tried it, but it didn´t work, can someone help me?