Related products section for Debut

related products.md

What you want

You want to create a section with settings that can be toggled on and off:

How you get it

1. Create the 'related-products.liquid' as a section file.
2. In the product template file, add the following section inclusion: {% section 'related-products' %} right beneath the {% section 'product-template' %} line.

related-products.liquid

{% if section.settings.show_related_products == true %}
<hr>
<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
 
{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = section.settings.related_grid_num %}
{% assign number_of_rows = section.settings.related_grid_row %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = section.settings.related_title %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
  {% assign current_product = product %}
  
  {% case number_of_related_products_per_row %}
    {% when '1' %}
      {% assign grid_item_width = '' %}
    {% when '2' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-half' %}
    {% when '3' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
    {% when '4' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
    {% when '5' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
    {% when '6' %}
      {% assign grid_item_width = 'small--one-half medium-up--one-sixth' %}
    {% else %}
      {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
  {% endcase %}


  {% capture related_items %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">

  {% for product in collection.products %}
  {% unless product.handle == current_product.handle %}
  {% unless same_vendor and current_product.vendor != product.vendor %}
  {% unless same_type and current_product.type != product.type %}
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-card-grid' %}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endunless %}
  {% endunless %}
  {% endunless %}
  {% endfor %}
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h2 class="section-header__title">{{ heading }}</h2>
      </header>
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

  {% endunless %}
     
{% endif %}
  
</div>
{% endif %}

{% schema %}
{
  "name": "Related products",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_related_products",
      "label": "Show related products",
      "default": false
    },
    {
      "id": "related_title",
      "type": "text",
      "label": "Section title",
      "default": "Other fine products"
    },
    {
      "type": "select",
      "id": "related_grid_num",
      "label": "Products per row (Desktop)",
      "default": "4",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "related_grid_row",
      "label": "Number of rows (Desktop)",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ]
    }
  ]
}
{% endschema %}

Hey Nicole,

Is there a way to set the image size to a smaller size? I looked through your code but couldn't find an obvious piece to change.

Appreciate the great free resource, thanks!

Hi Nichole,

I am getting an error.

Line 132 — Liquid syntax error: Unknown tag 'schema'

Can you help me?

Thank you

@wealllikedan Make sure you are adding a section and not a snippet: https://ecommerce.shopify.com/c/ecommerce-design/t/dbut-theme-related-product-issue-liquid-syntax-error-unknown-tag-schema-396038

I'm trying to find {% section 'product-template' %} in the product-template.liquid file to place {% section 'related-products' %} under. However, I can't find {% section 'product-template' %}. What line is {% section 'product-template' %} on in the product-template.liquid file? I do see {% section 'product-template' %} in the product.liquid file though. Should it not be there? Any suggestions? Thank you!

Hi, at step 7 it explains how to add randomness to the recommended related products, but the explanation is for a snippet. How do we add it for a section? These are the snippet instructions if it helps at all:

Step 7. Configuring (optional) and adding randomness

At the top of the snippet file, you'll find this:

{% assign number_of_related_products_to_show = 3 %}
{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}

By editing the above lines of code, you can change: heading text, number of product recommendations, and size of the recommended product image. Valid values for size are: 'small', 'compact' or 'medium'. How big are those sizes? Check here.

If you are a designer, and are thinking of integrating related products in a theme, consider creating settings on the Customize theme page to toggle recommendations on and off.

You can output all products from the relevant collection and pick a limited number of products randomly using this jQuery plugin: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js

If you do that, remove the limit from the related-products.liquid snippet.

Change this line:

{% for product in collection.products limit: number_of_related_products_to_fetch %}

To this:

{% for product in collection.products %}

Then, upload the file jquery.pick.js to your Theme Assets. (You will find that file here: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js)

Then, add the following code at the bottom of your related-products snippet:

{{ 'jquery.pick.js' | asset_url | script_tag }}

<script type="text/javascript" charset="utf-8"> // li').pick(howMany); }); //]]> </script>

You still need to perform 1 more step to make your "related products" section visible. See step 3 down below:

1. Create the 'related-products.liquid' as a section file.
2. In the product template file, add the following section inclusion: {% section 'related-products' %} right beneath the {% section 'product-template' %} line.
3. Exit out of HTML/CSS mode, and go to "Customize theme". Go to a product page and you'll see a newly added "Related products" section in the theme editor. Check the "Show related products" box. The related products section should appear.

THANK YOU Scootcho! I was wondering what I was missing! :)

And much love Nicole Mackin, this is brilliant! Thank you so much.