Modification to make alternate templates functional

product-template-alternate.liquid

<!-- /sections/product-template.liquid -->
{% assign uniqueString = section.id | remove: "product-template" %}

{% comment %}
Settings
{% endcomment %}
{%- assign product_icon_color = section.settings.product_icon_color -%}
{%- assign tab_1 = section.settings.tab-1 -%}
{%- assign tab_2 = section.settings.tab-2 -%}
{%- assign tab_3 = section.settings.tab-3 -%}
{%- assign tab_2_content = section.settings.tab_2_content -%}
{%- assign tab_3_content = section.settings.tab_3_content -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{% case section.settings.image_size %}
  {% when 'small' %}
    {%- assign image_grid = 'one-half' -%}
    {%- assign product_image_width = 'large' -%}
  {% when 'medium' %}
    {%- assign image_grid = 'one-half' -%}
    {%- assign product_image_width = 'grande' -%}
  {% when 'large' %}
    {%- assign image_grid = 'three-fifths' -%}
    {%- assign product_image_width = '1024x1024' -%}  
{% endcase %}
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}

{% comment %}
Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}

{% comment %}
Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if current_variant.compare_at_price > current_variant.price %}
{% assign on_sale = true %}
{% endif %}
<style>
.product-details .social-sharing a {
  color:{{section.settings.product_icon_color}};
}
</style>
<div data-section-id="{{ section.id | remove: uniqueString }}" data-section-type="product" id="quick">
  <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm-{{ section.id | remove: uniqueString }}" class="form-vertical">
    {% comment %}
    MOBILE TOP BUTTONS AND PRICING
    {% endcomment %}
    <div class="product-top-buttons grid--full main-content wrapper tbm_mobile-pricing">
      <div class="grid__item one-half">
        <div class="top-button-inner">
          <span id="ProductPriceMobile" class="h2 js-prod-price" itemprop="price" content="{{ current_variant.price | divided_by: 100  }}">
            {{ current_variant.price | money  }}
          </span>
        </div>
      </div>
      <div class="grid__item one-half">
        <div class="top-button-inner">
          <button type="submit" name="add" id="AddToCart" id="AddToCart-{{ section.id | remove: uniqueString }}" class="btn mobile-add-to-cart-btn js-prod-disable-on-soldout" {% if sold_out %}disabled{% endif %}>
            <span id="AddToCartText" class="js-prod-show-available" {% if sold_out %}style="display:none"{% endif %}>{{ 'products.product.add_to_cart' | t }}</span>
            <span id="AddToCartTextDesk" class="js-prod-show-soldout js-prod-soldout-btn-text" {% unless sold_out %}style="display:none"{% endunless %}>{{ 'products.product.sold_out' | t }}</span>
          </button>
        </div>

      </div>
    </div>

    <div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id | remove: uniqueString }}" data-enable-history-state="true">
      <meta itemprop="name" content="{{ product.title }}">
      <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
      <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

      <div class="grid--full product-single card-shadow">
        <div class="grid__item large--{{ image_grid }} text-center {{ product_image_width }} grid-product-container product-image">
          {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
          {% if product.images.size > 1 %}
          <div class="product__slides product-single__photos  {%if section.settings.enable_zoom%}product-featured-image{%else%}product-featured-image-no-zoom{%endif%}" id="ProductPhoto-{{ section.id | remove: uniqueString }}" {% if section.settings.image_size == 'large'%}data-response-adapt-height="true"{%endif%}>
            <div class="product__photo" data-thumb="{{ featured_image.src | img_url: 'small_cropped' }}">
              <img src="{{ featured_image | img_url: product_image_width }}" alt="{{ image.alt | escape }}"
                   data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"
                   data-image-id="{{ featured_image.id }}"
                   class="ProductImg-{{ section.id | remove: uniqueString }} ">
            </div>
            {% for image in product.images %}
            {% unless image contains featured_image %}
            <div class="product__photo{% unless forloop.first == true %} product__photo--additional{% endunless %}" data-thumb="{{ image.src | img_url: 'small_cropped' }}">
              <img src="{{ image.src | img_url: product_image_width  }}" alt="{{ image.alt | escape }}"
                   data-mfp-src="{{  image | img_url: '1024x1024' }}"
                   data-image-id="{{ image.id }}"
                   class="ProductImg-{{ section.id | remove: uniqueString }}">
            </div>
            {% endunless %}
            {% endfor %}
          </div>
          <div id="ProductThumbs-{{ section.id | remove: uniqueString }}" class="product__thumbs--square"></div>
          {%else%}          
          <div class="product__photo {%if section.settings.enable_zoom%}product-featured-image{%else%}product-featured-image-no-zoom{%endif%}">
            <img src="{{ featured_image | img_url: product_image_width  }}" alt="{{ image.alt | escape }}"
                 data-mfp-src="{{ featured_image | img_url: '1024x1024'}}"
                 data-image-id="{{ featured_image.id }}"
                 class="ProductImg-{{ section.id | remove: uniqueString }}">
          </div>
          {%endif%}
         
          <div class="sold-out collection-product-sale-badge js-prod-show-sale js-prod-badge" {%if sold_out or on_sale == false%}style="display:none"{%endif%}>
            {% include 'tbm-icons', icon: 'sale' %}
          </div>      
          <div class="sold-out collection-product-soldout-badge js-prod-show-soldout js-prod-badge" {%unless sold_out%}style="display:none{%endunless%}">
            {% include 'tbm-icons', icon: 'soldout'%}
          </div>
        </div>
        <div class="grid__item large--one-half product-mobile {% unless product.images.size > 1%}mobile-prod-title{% endunless %}">
          <h1 itemprop="name">{{ product.title }}</h1>
          {% if section.settings.show_vendor %}
          <h4 itemprop="brand" class="product-single__vendor">{{ product.vendor | link_to_vendor }}</h4>
          {% endif %}
          <span id="ProductPrice" class="h2 small--hide medium--hide js-prod-price" itemprop="price" content="{{ current_variant.price | divided_by: 100  }}">
            {{ current_variant.price | money  }}
          </span>
          {% if on_sale %}
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          <p id="ComparePrice" data-compare-text="{{ 'products.product.compare_at' | t }}">
            {{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}
          </p>
          {% endif %}
          {%comment%}
          DESKTOP PRODUCT DESCRIPTION  
          {%endcomment%}
              {%if section.settings.button_location == "above"%}
          {%comment%}
          DESKTOP PRODUCT DETAILS  
          {%endcomment%}
          {% include 'product-details'%}  
          {%endif%}
          <div class="large--show medium-down--hide act-desc">
            {% include 'product-description' %}
          </div>
          <div class="quick-desc" style="display:none;">
            <div class="product-description" itemprop="description">
              <div class="rte">
                <div class="description" itemprop="description">          
                  {{product.description | truncatewords:50 | strip_html }}      
                  <a href="{{product.url}}" class="h4 view-more-quick">{{'products.general.view_more' | t }}</a>
                </div>
              </div>
            </div>            
          </div>
          {%if section.settings.button_location == "below"%}
          {%comment%}
          DESKTOP PRODUCT DETAILS  
          {%endcomment%}
          {% include 'product-details'%}  
          {%endif%}
        </div>
      </div>
    </div>
    {%comment%}
    MOBILE PRODUCT DESCRIPTION  
    {%endcomment%}
    {% unless product.description == blank %}
    <div class="large--hide medium-down--show mobile-prod-desc mobile-block card-shadow">
      <div class="grid--full product-single">
        <div class="grid__item large--three-fifths medium-down--one-whole text-center">
          {% include 'product-description'%}
        </div>
      </div>
    </div>
    {% endunless %}
  </form><!-- form end -->
</div>



{% schema %}
{
"name": "Product pages",
"class": "section-product-template",
"settings": [
{
"type": "select",
"id": "image_size",
"label": "Desktop image size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium"
},
{
"type": "select",
"id": "button_location",
"label": "Add to cart location",
"options": [
{
"value": "above",
"label": "Above"
},
{
"value": "below",
"label": "Below"
}
],
"default": "below",
"info": "Above or below description"
},
{
"type": "checkbox",
"id": "use_ajax_cart",
"label": "Use AJAX Cart",
"default": true
},
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": "Show quantity selector",
"default": false
},
{
"type": "text",
"id": "tab-1",
"label": "Tab #1",
"info": "By default, tab #1 always shows your product's description"
},
{
"type": "text",
"id": "tab-2",
"label": "Tab #2"
},
{
"type":"page",
"id":"tab_2_content",
"label":"Tab #2 content"
},
{
"type": "text",
"id": "tab-3",
"label": "Tab #3"
},
{
"type":"page",
"id":"tab_3_content",
"label":"Tab #3 content"
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": "Enable image zoom",
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
},
{
"type": "color",
"id": "product_icon_color",
"label": "Social icon color",
"default": "#292929"
}
]
}
{% endschema %}