like product shopify code example

Example 1: how to fetch another product name in another product shopify

{% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product', product, id: form_id, class: 'product-single__form' %}

   {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
    {% for option in product.options_with_values %}
      {% assign hide = false %}
      {% if option.name == 'color' and product.metafields.color.value %}
        {% assign hide = true %}
      {% endif %}
      {% if settings.variant_type == 'button' %}
        {% include 'variant-button', section_id: section_id, option_drop: option, hide: hide %}
      {% else %}
        {% include 'variant-dropdown', section_id: section_id, hide: hide %}
      {% endif %}
    {% endfor %}
  {% endunless %}

 <!--  {% comment %}
    [Custom Feature] Color swatches
  {% endcomment %}
  {% if product.metafields.color.value %}
    {% assign product_types = product.type | split: ',' %}
    {% assign product_type = product_types[3] | handle %}
    {% comment %} The most specific hierarchy = fourth field in product type {% endcomment %}
    {% if collections[product_type] %}
      <div class="color-swatches">
        <label class="variant__label">Colors</label>
        {% include 'swatch' with product_type %}
      </div>
    {% endif %}
  {% endif %}-->

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__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 }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}
  </select>

  {% if settings.quantity_enable %}
    <div class="product__quantity product__quantity--{{ settings.variant_type }} js-qty">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      <input type="number" hidden="hidden" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1" class="js-qty__fallback">
    </div>
  {% endif %}

<!--   <div class="rte">
    <div class="product-outofstock-message">
      {{ 'products.product.outofstock_email_notify_html' | t }}
    </div>
  </div> -->

  {% if settings.enable_payment_button %}
    <div class="payment-buttons">
  {% endif %}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      id="AddToCart-{{ section_id }}"
      class="{% if settings.enable_payment_button %}btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span id="AddToCartText-{{ section_id }}">
        {% if current_variant.available %}
          {{ 'products.product.add_to_cart' | t }}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </button>
<!--     ADDITIONAL ADD TO WISHLIST    -->

      <div style="display: flex; flex-wrap: wrap">
        <div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}" style="outline:none;margin-top:15px; border:1px solid black;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%"></div>
        <a onclick="justClick()" class="btn--secondary update-cart share-this-item" style="margin-top:15px; border:none;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%">
          <span>
            Or, share this item
          </span>
        </a>
      </div>
      <script type="text/javascript">
        function justClick(){
          document.getElementById("ztb-sb-9abf1166-widget").style.display="block !important"
        }
      </script>
<!--  END -->


    {% if settings.enable_payment_button %}
      {{ form | payment_button }}
    {% endif %}

  {% if settings.enable_payment_button %}
    </div>
  {% endif %}
{% endform %}

Example 2: related products shopify code

{% assign heading = 'You may also like' %}
   {% assign limit = 4 %}
   <div class="page-width product-recommendations" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ product.id }}" data-limit="{{ limit }}" data-section-id="{{ section.id }}" data-section-type="product-recommendations">
     {% if recommendations.performed %}
       {% if recommendations.products_count > 0 %}
         <div class="section-header text-center">
           <h2>{{ heading }}</h2>
         </div>
         <ul class="grid grid--uniform grid--view-items">
           {% for product in recommendations.products %}
             <li class="grid__item small--one-half medium-up--one-quarter">
               {% include 'product-card-grid', max_height: 250 %}
             </li>
           {% endfor %}
         </ul>
       {% endif %}
     {% else %}
       <div class="product-recommendations__loading-dots">
         <div class="product-recommendations__loading-dot"></div>
         <div class="product-recommendations__loading-dot"></div>
         <div class="product-recommendations__loading-dot"></div>
       </div>
     {% endif %}
   </div>

Tags:

Misc Example