Shopify Narrative product page with flex slider

product_template_alternative

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
  {%- assign current_variant_sale = true -%}
{% endif %}

<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% comment %}
  ------------------------------------------------------------------------------
  Product Form & Description & Featured Image
  ------------------------------------------------------------------------------
  {% endcomment %}
  
  <div class="product__content page-width--wide">
       
    <div class="grid">
      <div class="grid__item medium-up--one-half">
        
      <div class="flexslider">
          <ul class="slides">
    {% for image in product.images %}
           
        {% assign max_height = 650 %}
        {% assign max_width = 980 %}
        {% assign max_aspect_ratio = 1.50769 %}
            
            {% if image.aspect_ratio < max_aspect_ratio%}
          {% if image.height < max_height %}
            {% assign max_width = image.width | times: image.aspect_ratio | round %}
          {% else %}
            {% assign max_width = max_height | times: image.aspect_ratio | round %}
          {% endif %}
        {% else %}
          {% if image.width < max_width %}
            {% assign max_width = image.width %}
          {% endif %}
        {% endif %}
	   <li>
	        {{ image | product_img_url: 'original' | img_tag }}
	   </li>
	{% endfor %}
          </ul>
                 
  	</div>
              
        <script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: true
  });
});
</script>
        
        </div>
      
	<div class="grid__item medium-up--one-half">
		<div class="product__content-header">
          {% if section.settings.show_vendor %}
            <p class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</p>
          {% endif %}

          <h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
          <p class="product__price text-center {% if current_variant_sale %}product__price--sale{% endif %}" data-product-price aria-live="polite">

              <span class="product__sale-price-label visually-hidden"> {{ 'products.product.sale_price' | t }} </span>
              <span class="product__regular-price-label visually-hidden"> {{ 'products.product.price' | t }} </span>
              <span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>

              <span class="product__compare-price-label visually-hidden"> {{ 'products.product.regular_price' | t }} </span>
              <s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>
          </p>
     </div>
        <div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              <meta itemprop="priceCurrency" content="{{ shop.currency }}">
              <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

        	{% include 'product-form' %}
        
              {% if section.settings.show_share_buttons %}
                {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
                  <div class="product__share-wrapper small--hide">
                    <div class="product__share">
                        {% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: product %}
                    </div>
                  </div>
                {% endif %}
              {% endif %}

  <ul class="tabs">
    <li><a href="#tab-1">about</a></li>
    <li><a href="#tab-2">model</a></li>
    <li><a href="#tab-3">sizing</a></li>
    <li><a href="#tab-4">details</a></li>
  </ul>
        <div class="prodescript">
          <div id="tab-1">
            {{ product.description }}	
  			</div>
  			<div id="tab-2">
  				{% if product.tags contains 'shirt-beige' %} 
        		<div>
          			{% include 'shirt-beige' %}
				</div>
        	{% endif %}
			{% if product.tags contains 'shirt-black' %} 
        		<div>
          			{% include 'shirt-black' %}
				</div>
        	{% endif %}
              {% if product.tags contains 'shirt-lightblue' %} 
        		<div>
          			{% include 'shirt-lightblue' %}
				</div>
        	{% endif %}
              {% if product.tags contains 'cap-navy' %} 
        		<div>
          			{% include 'cap-navy' %}
				</div>
        	{% endif %}
			{% if product.tags contains 'cap-black' %} 
        		<div>
          			{% include 'cap-black' %}
				</div>
        	{% endif %}
              {% if product.tags contains 'cap-burgundy' %} 
        		<div>
          			{% include 'cap-burgundy' %}
				</div>
        	{% endif %}
  			</div>
  			<div id="tab-3">
    		{% if product.tags contains 'cap' %} 
        		<div>
          			{% include 'sizing-cap' %}
				</div>
        	{% endif %}
			{% if product.tags contains 'tshirt' %} 
        		<div>
          			{% include 'sizing-shirt' %}
				</div>
        	{% endif %}
  		</div>
  		<div id="tab-4">
  			{% if product.tags contains 'cap' %} 
        		<div>
          			{% include 'details-cap' %}
				</div>
        	{% endif %}
			{% if product.tags contains 'tshirt' %} 
        		<div>
          			{% include 'details-shirt' %}
				</div>
        	{% endif %}
  		</div>
        </div>
	</div>
          
   </div>
            
          </div>

        </div>

  {% comment %}
  ------------------------------------------------------------------------------
  Product Share Buttons
  ------------------------------------------------------------------------------
  {% endcomment %}
  {% if section.settings.show_share_buttons %}
    {% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
      <div class="product__share-wrapper product__share-wrapper--mobile medium-up--hide">
        <div class="product__share">
            {% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: product %}
        </div>
      </div>
    {% endif %}
  {% endif %}

  {% comment %}
  ------------------------------------------------------------------------------
 Unique Selling Points
  ------------------------------------------------------------------------------
  {% endcomment %}

      <div class="usp">
        <img src="https://cdn.shopify.com/s/files/1/1369/6043/files/Minimum_order_of_two-01.png?13699612375863590597">
        	<td>Minimum order quantity of two</td> 
    &nbsp;&nbsp;
        <img src="https://cdn.shopify.com/s/files/1/1369/6043/files/aeuoeu_-_icons_-_shipping.png?15306569674648658830">
        	<td>Free shipping within the Netherlands</td>
     &nbsp;&nbsp;
    	<img src="https://cdn.shopify.com/s/files/1/1369/6043/files/aeuoeu_-_icons_-_payment_methods.png?15306569674648658830">
            <td>Secure payment methods</td>
    &nbsp;&nbsp;
    	<img src="https://cdn.shopify.com/s/files/1/1369/6043/files/aeuoeu_-_icons_-_questions.png?15306569674648658830">
          	<td>Questions? <a href="http://aeuo.eu/pages/contact">Contact us</a></td>
  		</div>

    <script type="application/json" data-product-json>
      {{ product | json }}
    </script>

    <script type="application/json" data-variant-json>
      {{ current_variant | json }}
    </script>

</div>
 

    {% comment %}
  ------------------------------------------------------------------------------
  Product Data
  ------------------------------------------------------------------------------
  {% endcomment %}



      
{% schema %}
{
  "name": "Product pages",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": "Show variant labels",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show product vendor",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_variant_images",
      "label": "Hide variant images in gallery",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show social sharing buttons",
      "info": "Make sure you have enabled social sharing in general settings",
      "default": true
    }
  ]
}
{% endschema %}

      
<style>
  
  .flex-control-nav {
    position: absolute;
    bottom: -5px;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 2;
}
  
  .ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
  .flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
  

  
ul.tabs {
  text-align: center;
  margin: 5px;
  padding: 0;
  font-family: Helvetica Neue;
}
ul.tabs li {
  display: inline-block;
  float: middle;
  height: 30px;
  text-align: center;
  margin-bottom: 0;
  padding: 2px;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: #ff9696;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #ffffff;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 10px;
  text-decoration: none;
  width: auto;
  color: #000000;
  
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  color: #000000;
  height: 30px;
  margin: 0px;
  padding-top: 4px;
  text-decoration: underline;
  position: relative;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
  .usp img {
    width: 30px;
    top: 50%;
    position: relative;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
  
  .usp {
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    font-family: Avenir !important;
    font-size: 12px;
    height: 50px;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
    @include media-query($small) {
         display: block;   
      position: relative;
    width: 100%;
  }
    
  }
  
  .usp td {
    font-family: Avenir;
    color: #ff9696;
    top: 20%;
    position: relative;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  }

  .usp a {
    color: #000000;
  }
  .prodescript {
    text-align: justify;
    font-size: 12px !important;
  }
}
      </style>