VIDEO INSTRUCTIONS

 

 

 

Adding a Product With an External URL

1. Create a new product and save
2. click the 3 ellipse on the top right of the product page and select “Edit Metafields”
3. Click Add Metafields and assign the following values: Namespace: external-url Key: external-url Value type: Sting Value: URL with http://
4. Click add and then save.

---

CODE BITS - For Developers Only

1. Open Product-loop.liquid and find the anchor ( <a></a>) code that wraps the collection image. Add the following code before the anchor tag:

<!-- product-loop.metafields.namespace['key'] -->
{% assign externalUrlMeta = product-loop.metafields.external-url['external-url'] %}
{% unless externalUrlMeta == blank %}    

  <a target="_blank" class="caption clearfix" href="{{ externalUrlMeta }}">

Copy the thumbnail and include inside of the anchor tag.

{% if settings.show-vendor-with-thumbnail == 'above-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
<h4 class="product-title">{{ product-loop.title }}</h4>
{% if settings.show-vendor-with-thumbnail == 'below-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
<div class="shopify-product-reviews-badge" data-id="{{ product-loop.id }}"></div>
{% if has_prices and product-loop.price > 0 %}
<div class="product-price">
  {% if settings.show-compare-at-price and product-loop.compare_at_price > 0 %}
  {% capture was %}
  {% include '__localize' with 'was' %}
  <span class="money">
    {% if settings.show-currency-with-prices == "with-currency" %}
    {{ product-loop.compare_at_price_max | money_with_currency }}
    {% else %}
    {{ product-loop.compare_at_price_max | money }}
    {% endif %}
  </span>
  {% endcapture %}
  <small class="text-muted"><del>{{ was | strip }}</del></small>&nbsp;
  {% elsif product-loop.price_varies %}
  <small class="text-muted">
    {% include '__localize' with 'from' %}
  </small>
  {% endif %}

  {% include '__poa-tag' with product-loop %}
  {% if price_is_poa %}
  <span>{% include '__localize' with 'POA' %}</span>
  {% else %}
  {% include 'product-price' with product-loop.price %}
  {% endif %}
  {% include 'product-labels' with product-loop %}
</div>
{% endif %}

Now after the closing </a> anchor tag add the following code.

{% else %} <!-- Display products as normal -->

  <a href="{{ product_url }}" class="caption clearfix">
    {% if settings.show-vendor-with-thumbnail == 'above-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
    <h4 class="product-title">{{ product-loop.title }}</h4>
    {% if settings.show-vendor-with-thumbnail == 'below-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
    <div class="shopify-product-reviews-badge" data-id="{{ product-loop.id }}"></div>
    {% if has_prices and product-loop.price > 0 %}
    <div class="product-price">
      {% if settings.show-compare-at-price and product-loop.compare_at_price > 0 %}
      {% capture was %}
      {% include '__localize' with 'was' %}
      <span class="money">
        {% if settings.show-currency-with-prices == "with-currency" %}
        {{ product-loop.compare_at_price_max | money_with_currency }}
        {% else %}
        {{ product-loop.compare_at_price_max | money }}
        {% endif %}
      </span>
      {% endcapture %}
      <small class="text-muted"><del>{{ was | strip }}</del></small>&nbsp;
      {% elsif product-loop.price_varies %}
      <small class="text-muted">
        {% include '__localize' with 'from' %}
      </small>
      {% endif %}

      {% include '__poa-tag' with product-loop %}
      {% if price_is_poa %}
      <span>{% include '__localize' with 'POA' %}</span>
      {% else %}
      {% include 'product-price' with product-loop.price %}
      {% endif %}
      {% include 'product-labels' with product-loop %}
    </div>
    {% endif %}
  </a>
{% endunless %}  <!--   End the Metafields query   -->

And thats it!. The final code will look like:

<!-- product-loop.metafields.namespace['key'] -->
{% assign externalUrlMeta = product-loop.metafields.external-url['external-url'] %}
{% unless externalUrlMeta == blank %}    

  <a target="_blank" class="caption clearfix" href="{{ externalUrlMeta }}">
      {% if settings.show-vendor-with-thumbnail == 'above-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
      <h4 class="product-title">{{ product-loop.title }}</h4>
      {% if settings.show-vendor-with-thumbnail == 'below-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
      <div class="shopify-product-reviews-badge" data-id="{{ product-loop.id }}"></div>
      {% if has_prices and product-loop.price > 0 %}
      <div class="product-price">
        {% if settings.show-compare-at-price and product-loop.compare_at_price > 0 %}
        {% capture was %}
        {% include '__localize' with 'was' %}
        <span class="money">
          {% if settings.show-currency-with-prices == "with-currency" %}
          {{ product-loop.compare_at_price_max | money_with_currency }}
          {% else %}
          {{ product-loop.compare_at_price_max | money }}
          {% endif %}
        </span>
        {% endcapture %}
        <small class="text-muted"><del>{{ was | strip }}</del></small>&nbsp;
        {% elsif product-loop.price_varies %}
        <small class="text-muted">
          {% include '__localize' with 'from' %}
        </small>
        {% endif %}

        {% include '__poa-tag' with product-loop %}
        {% if price_is_poa %}
        <span>{% include '__localize' with 'POA' %}</span>
        {% else %}
        {% include 'product-price' with product-loop.price %}
        {% endif %}
        {% include 'product-labels' with product-loop %}
      </div>
      {% endif %}    
  </a>

{% else %} <!-- Display products as normal -->

  <a href="{{ product_url }}" class="caption clearfix">
    {% if settings.show-vendor-with-thumbnail == 'above-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
    <h4 class="product-title">{{ product-loop.title }}</h4>
    {% if settings.show-vendor-with-thumbnail == 'below-product-title' %}<div class="product-vendor">{{ product-loop.vendor }}</div>{% endif %}
    <div class="shopify-product-reviews-badge" data-id="{{ product-loop.id }}"></div>
    {% if has_prices and product-loop.price > 0 %}
    <div class="product-price">
      {% if settings.show-compare-at-price and product-loop.compare_at_price > 0 %}
      {% capture was %}
      {% include '__localize' with 'was' %}
      <span class="money">
        {% if settings.show-currency-with-prices == "with-currency" %}
        {{ product-loop.compare_at_price_max | money_with_currency }}
        {% else %}
        {{ product-loop.compare_at_price_max | money }}
        {% endif %}
      </span>
      {% endcapture %}
      <small class="text-muted"><del>{{ was | strip }}</del></small>&nbsp;
      {% elsif product-loop.price_varies %}
      <small class="text-muted">
        {% include '__localize' with 'from' %}
      </small>
      {% endif %}

      {% include '__poa-tag' with product-loop %}
      {% if price_is_poa %}
      <span>{% include '__localize' with 'POA' %}</span>
      {% else %}
      {% include 'product-price' with product-loop.price %}
      {% endif %}
      {% include 'product-labels' with product-loop %}
    </div>
    {% endif %}
  </a>
{% endunless %}  <!--   End the Metafields query   -->