Upsell snippet

{% assign current = product.handle %}
{%- assign max_height = 345 -%}
{% assign handle = "" %}
{% for tag in product.tags %}
{% if tag contains "rel" %}
{% assign handle = tag | remove: "rel_" %}
{% endif %}
{% endfor %}
{% unless handle == "" %}

{% assign products_col = "" %}

{%- assign collection = collections[handle] -%}

{% for product in collection.products %}
{% if current != product.handle %}
{% assign products_col = products_col | append: product.handle | append: ',' %}
{% endif %}
{% endfor %}

{% assign related_products = products_col | split: ',' %}

<div class="hc-related-section">
  <h2>Add the perfect Accessories to your product</h2>
  <p>Mechanisms and eraser stoppers are compatible with all pencils.</p>
  <div class="hc-related-products">
    {% for product_handle in related_products limit:4 %}
    {% assign product = all_products[product_handle] %}  
    <div class="hc-related">
      <a href="{{product.url}}">
        <img src="{{product.featured_image | img_url: 'x400' }}">
        <p>{{ product.title }}</p>
        <p>{{ product.price | money }}</p>
      </a>
       <!--start add to cart buttons on popup -->
       <!-- <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
            {% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper js product-form__item">
                  <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>
                  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                    {% for value in option.values %}
                      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                    {% endfor %}
                  </select>
                </div>
              {% endfor %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">         
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                    {{ variant.title }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
            </select>

             <div class="product-form__item product-form__item--submit">
                           
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
                     
            </div>
          </form>
     end add to cart buttons on popup -->
    </div>
    {% endfor %}
  </div>
</div>
{% endunless %}