Product Page Shopify Tech

Add 3 or more specific related products to a product page using only Liquid

We’ll be looking at a way to access product information for adding specific related products on a product detail page. 

We can achieve this by using all_products

Let us have a quick look at what’s happening. the syntax is pretty simple, all_products takes product handle as its arguement.

For this week’s Liquid Shopify tutorial, we’ll be looking at a way to access product information using all_products and metafields to add specific related products.

EXAMPLE for related products.

The logic for this code is pretty simple

  • get the metafield
  • split the metafield value
  • loop the array
  • use all_products to reference a product, and show title on the page.
{%- comment -%}
  Grab product handles from metafield.
  Loop the handles, showing the product title.
  The metafields fields value to be stored:
  Namespace: related
  Key: products
  Value: (comma separated String value)
{%- endcomment -%}

{%- if product.metafields.related.products != blank -%}
    {%- assign relatedProductArray = product.metafields.related.products | split:',' -%}
    {%- for relatedProductValue in relatedProductArray -%}
    {%- assign b = all_products[relatedProductValue] -%}
    <li><a href="/products/{{ relatedProductValue }}">{{ b.title }}</a></li>
    {%- endfor -%}
{%- endif -%}

Also look at the post Create customizable products