Hi, my store is missing the size option. ((( azheatplug.com )))
Can you help?
I have this on the product.liquid
----
<!-- /templates/product.liquid -->
{% assign variant_tmp = product.selected_or_first_available_variant | default: product.variants.first %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% include 'breadcrumb' %}
{% assign media_col = settings.product_image_size %}
{% assign main_col = 12 | minus: settings.product_image_size %}
<div class="product-main">
<div class="container">
<div class="box_product_page">
<div class="row">
{% if settings.product_sidebar_position != 'none' %}
<div class="col-sm-9 product_content {% if settings.product_sidebar_position == 'left' %}f-right{%endif%}">
{%else%}
<div class="col-sm-12">
{%endif%}
<div class="product-view product">
<div class="product-essential">
<div class="row">
<div class="product-img-box col-sm-{{media_col}}">
<div class="product-img-list">
{% include 'media' %}
</div>
</div>
<div class="product-shop col-sm-{{main_col}}">
<div class="product-shop-wrapper">
{% if settings.product_prev_next != blank %}
<div class="prev-next-products">
{% if collection %}
{% if collection.previous_product or collection.next_product %}
{% if collection.previous_product %}
<div class="product-nav product-prev">
<a href="{{ collection.previous_product }}" title="Previous Product">
{{ settings.product_prev_text }}
</a>
{% assign words = collection.previous_product | split:'/' %}
{% assign word = words.last %}
<div class="product-pop theme-border-color" data-with-product="{{word}}">
<script type="text/template">
<img class="product-image" src="[img:medium]" alt="[title]"/>
<h3 class="product-name">[title]</h3>
</script>
</div>
</div>
{% endif %}
{% if collection.next_product %}
<div class="product-nav product-next">
<a class="product-next" href="{{ collection.next_product }}" title="Next Product">
{{ settings.product_next_text }}
</a>
{% assign words = collection.next_product | split:'/' %}
{% assign word = words.last %}
<div class="product-pop theme-border-color" data-with-product="{{word}}">
<script type="text/template">
<img class="product-image" src="[img:medium]" alt="[title]"/>
<h3 class="product-name">[title]</h3>
</script>
</div>
</div>
{% endif %}
{% endif %}
{% endif %}
</div>
{% endif %}
<div class="product-name top-product-detail">
<h2>
<a href="{{ product.url | within: collection }}">
{% if settings.language_enable %}
<span class="lang1">{{ product.title | split: '|' | first }}</span>
<span class="lang2">{{ product.title | split: '|' | last }}</span>
{% else %}
{{ product.title | split: '|' | first }}
{% endif %}
</a>
</h2>
</div>
{% if settings.product_sku %}
{% assign current_variant = product.selected_or_first_available_variant %}
<div class="product-sku"><span {% if settings.language_enable %}data-translate="products.product.sku"{% endif %}>{{ 'products.product.sku' | t }} </span><span class="sku">{{ current_variant.sku }}</span></div>
{% endif %}
<div class="review-product-details">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% include 'addthis' %}
{% if settings.product_short_desc %}
<div class="short-description-detail">
{% if settings.product_short_desc %}
<div class="short-description-detail">
<div class="short-description">
{%- assign description = product.description -%}
{%- if description contains '[countdown]' -%}
{%- assign description = description | split:'[/countdown]' | last -%}
{%- endif -%}
{%- if product.description contains '[shortdesc]' and settings.product_short_desc == '1' -%}
{%- assign first = description | split:'[/shortdesc]' | first -%}
{%- assign description = first | split:'[shortdesc]' | last -%}
{%- else -%}
{%- if product.description contains '[shortdesc]' -%}
{%- assign description = description | split:'[/shortdesc]' | last -%}
{%- endif -%}
{%- if product.description contains '[accesories]' -%}
{%- assign description = description | split:'[/accesories]' | last -%}
{%- endif -%}
{%- if description contains '[specifications]' -%}
{%- assign description = description | split:'[/specifications]' | last -%}
{%- endif -%}
{%- if settings.product_short_desc == '1' -%}
{%- assign description = description | strip_html | truncatewords: 30 -%}
{%- endif -%}
{%- endif -%}
{% if settings.language_enable %}
<div class="lang1">{{ description | split: '[lang2]' | first }}</div>
<div class="lang2">{{ description | split: '[lang2]' | last }}</div>
{% else %}
{{ description | split: '[lang2]' | first }}
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endif %}
<div class="middle-product-detail">
{% if product.description contains '[countdown]' and settings.product_countdown != blank %}
{% assign count_down_first = product.description | split:'[/countdown]' | first %}
{% assign count_down_final = count_down_first | split:'[countdown]' | last %}
<div class="bottom-product-dailydeal bottom-home-dailydeal">
<span class="title" {% if settings.language_enable %}data-translate="products.product.count_down"{% endif %}>{{'products.product.count_down' | t }} </span><div class="product-date" data-date="{{ count_down_final }}"></div>
</div>
{% endif %}
{% if settings.product_availability %}
<div class="product-inventory">
<span {% if settings.language_enable %}data-translate="products.product.availability"{% endif %}>{{ 'products.product.availability' | t }} </span>
<span class="in-stock">
{% if product.selected_or_first_available_variant.inventory_management %}
{% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
{% if first_inventory > 0 %}
{{first_inventory}} {{ 'products.product.in_stock' | t }}
{% else %}
{{ 'products.product.out_of_stock' | t }}
{% endif %}
{% else %}
{{ 'products.product.many_in_stock' | t }}
{% endif %}
</span>
</div>
{% endif %}
{% if settings.product_type %}
<div class="product-type">
<label {% if settings.language_enable %}data-translate="products.product.product_type"{% endif %}>{{ 'products.product.product_type' | t }} </label>
<span>{{ product.type }}</span>
</div>
{% endif %}
{% if settings.product_vendor %}
<div class="product-vendor">
<label {% if settings.language_enable %}data-translate="products.product.product_vendor"{% endif %}>{{ 'products.product.product_vendor' | t }} </label>
<span>{{ product.vendor }}</span>
</div>
{% endif %}
<div class="product-type-data">
<div class="price-box">
<div id="price" class="detail-price" itemprop="price">
<div class="price">{{ variant_tmp.price | money }}</div>
{% if variant_tmp.compare_at_price > variant_tmp.price %}
<s class="old-price"> {{ variant_tmp.compare_at_price | money }}</s>
<!--span class="price_percentage">-{{ variant_tmp.compare_at_price | minus: variant_tmp.price | times: 100.0 | divided_by: variant_tmp.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%</span-->
{% endif %}
</div>
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
{% if product.available %}
{% else %}
{% endif %}
</div>
</div>
</div>
<div class="product-type-main">
<form class="product-form" id="product-main-form" action="/cart/add" method="post" enctype="multipart/form-data" data-product-id="{{product.id}}" data-id="{{ product.handle }}">
<div id="product-variants" class="product-options" {% if product.options.size == 1 and product.options.first == 'Title' %}style="display: none;"{% endif %}>
<select id="product-selectors" name="id" style="display: none;">
{% 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>
</div>
<div class="product-options-bottom">
<div class="add-to-cart-box">
<span class="label" {% if settings.language_enable %}data-translate="products.product.quantity"{% endif %}>{{ 'products.product.quantity' | t }}:</span>
<div class="input-box">
<input type="text" id="qty" name="quantity" value="1" min="1" class="quantity-selector">
<div class="plus-minus">
<div class="increase items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;">+</div>
<div class="reduced items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;">-</div>
</div>
</div>
<div class="actions">
<div class="action-list addtocart">
<div class="button-wrapper">
{% if product.available %}
<div class="button-wrapper-content">
<button type="submit" name="add" class="btn-cart add-to-cart bordered uppercase">
<span>
<span {% if settings.language_enable %}data-translate="products.product.add_to_cart"{% endif %}>{{ 'products.product.add_to_cart' | t }}</span>
</span>
</button>
</div>
{% else %}
<div class="button-wrapper-content">
<i class="icon-cart"></i>
<button href="javascript:;" class="btn-cart add-to-cart">
<span>
<span {% if settings.language_enable %}data-translate="products.product.sold_out"{% endif %}>{{ 'products.product.sold_out' | t }}</span>
</span>
</button>
</div>
{% endif %}
</div>
</div>
<div class="action-list wishlist wishlist-{{product.id}}">
{% include 'wishlist-product-detail'%}
</div>
</div>
</div>
</div>
</form>
</div>
{% if settings.product_tags %}
<div class="tags">
<i class="icon-tags" {% if settings.language_enable %}data-translate="blogs.article.tags"{%endif%}>{{ 'blogs.article.tags' | t }}</i>
{% for tag in product.tags %}
<span class="separator">/</span>
<a href="/collections/all/{{ tag | handle }}" rel="tag">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% if settings.related_product_display and settings.related_product_move != blank %}
<div class="products-related move-related">
{% if settings.related_product_type == "tags" %}
{% include 'related-products-by-tags' %}
{% else %}
{% include 'related-products' %}
{% endif %}
</div>
{% endif %}
{% if settings.product_sidebar_position != 'none' %}
<div class="product-description rte" itemprop="description">
{% include 'product-page-tab' %}
</div>
{% endif %}
{% if settings.related_product_display and settings.related_product_move == blank and settings.product_sidebar_position != 'none'%}
<div class="products-related">
{% if settings.related_product_type == "tags" %}
{% include 'related-products-by-tags' %}
{% else %}
{% include 'related-products' %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if settings.product_sidebar_position != 'none' %}
<div class="col-sm-3 sidebar {% if settings.home_sidebar_position == 'left' %}f-left{% endif %}">
{% include 'product-sidebar' %}
</div>
{% endif %}
</div>
</div>
<script>
productsObj.id{{product.id}} = {{product | json}};
selectCallback = function(variant, selector) {
if (variant) {
if (variant.available) {
if (variant.compare_at_price > variant.price) {
$("#price").html('<div class="price">' + Shopify.formatMoney(variant.price, money_format) + "</div>" + '<del class="price_compare">' + Shopify.formatMoney(variant.compare_at_price, money_format) + "</del>")
} else {
$("#price").html('<div class="price">' + Shopify.formatMoney(variant.price, money_format) + "</div>");
}
frontendData.enableCurrency && currenciesCallbackSpecial("#price span.money"),
$(".add-to-cart").removeClass("disabled").removeAttr("disabled").html(window.inventory_text.add_to_cart),
variant.inventory_management && variant.inventory_quantity <= 0 ? ($("#selected-variant").html(selector.product.title + " - " + variant.title), $("#backorder").removeClass("hidden")) : $("#backorder").addClass("hidden");
if (variant.inventory_management!=null) {
$(".product-inventory span.in-stock").text(variant.inventory_quantity + " " + window.inventory_text.in_stock);
} else {
$(".product-inventory span.in-stock").text(window.inventory_text.many_in_stock);
}
$('.product-sku span.sku').text(variant.sku);
}else{
$("#backorder").addClass("hidden"), $(".product-view .add-to-cart").html(window.inventory_text.sold_out).addClass("disabled").attr("disabled", "disabled");
$(".product-inventory span.in-stock").text(window.inventory_text.out_of_stock);
$('.product-sku span.sku').empty();
}
if(swatch_color_enable){
var form = $('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
}
if (variant && variant.featured_image) {
var n = Shopify.Image.removeProtocol(variant.featured_image.src);
$(".product-image-thumbs .thumb-link").filter('[data-zoom-image="' + n + '"]').trigger("click");
}
variant && variant.sku ? $("#sku").removeClass("hidden").find("span").html(variant.sku) : $("#sku").addClass("hidden").find("span").html("");
};
convertToSlug= function(e) {
return e.toLowerCase().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-")
};
jQuery(function($) {
{% if product.available and product.variants.size >= 1 %}
var product = {{product | json}};
var layout = $('.product-view');
if (product.variants.length >= 1) { //multiple variants
for (var i = 0; i < product.variants.length; i++) {
var variant = product.variants[i];
var option = '<option value="' + variant.id + '">' + variant.title + '</option>';
layout.find('form.product-form > select').append(option);
}
new Shopify.OptionSelectors("product-selectors", {
product: product,
onVariantSelected: selectCallback,
enableHistoryState: true
});
//start of quickview variant;
var filePath = asset_url.substring(0, asset_url.lastIndexOf('/'));
var assetUrl = asset_url.substring(0, asset_url.lastIndexOf('/'));
var options = "";
for (var i = 0; i < product.options.length; i++) {
options += '<div class="swatch clearfix" data-option-index="' + i + '">';
options += '<div class="header">' + product.options[i] + '</div>';
var is_color = false;
if (/Color|Colour/i.test(product.options[i])) {
is_color = true;
}
var optionValues = new Array();
for (var j = 0; j < product.variants.length; j++) {
var variant = product.variants[j];
var value = variant.options[i];
var valueHandle = convertToSlug(value);
var forText = 'swatch-' + i + '-' + valueHandle;
if (optionValues.indexOf(value) < 0) {
//not yet inserted
options += '<div data-value="' + value + '" class="swatch-element '+(is_color ? "color" : "")+' ' + (is_color ? "color" : "") + valueHandle + (variant.available ? ' available ' : ' soldout ') + '">';
if (is_color) {
options += '<div class="tooltip">' + value + '</div>';
}
options += '<input id="' + forText + '" type="radio" name="option-' + i + '" value="' + value + '" ' + (j == 0 ? ' checked ' : '') + (variant.available ? '' : ' disabled') + ' />';
if (is_color) {
options += '<label for="' + forText + '" style="background-color: ' + valueHandle + '; background-image: url(' + filePath + valueHandle + '.png)"><img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
} else {
options += '<label for="' + forText + '">' + value + '<img class="crossed-out" src="' + assetUrl + 'soldout.png" /></label>';
}
options += '</div>';
if (variant.available) {
$('.product-view .swatch[data-option-index="' + i + '"] .' + valueHandle).removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
}
optionValues.push(value);
}
}
options += '</div>';
}
if(swatch_color_enable){
layout.find('form.product-form .product-options > select').after(options);
layout.find('.swatch :radio').change(function() {
var optionIndex = $(this).closest('.swatch').attr('data-option-index');
var optionValue = $(this).val();
$(this)
.closest('form')
.find('.single-option-selector')
.eq(optionIndex)
.val(optionValue)
.trigger('change');
});
}
if (product.available) {
Shopify.optionsMap = {};
Shopify.linkOptionSelectors(product);
}
//end of quickview variant
} else { //single variant
layout.find('form.product-form .product-options > select').remove();
var variant_field = '<input type="hidden" name="id" value="' + product.variants[0].id + '">';
layout.find('form.product-form').append(variant_field);
}
{% endif %}
});
</script>
</div>
{% if settings.product_sidebar_position == 'none' %}
<div class="product-view">
<div class="product-description rte" itemprop="description">
{% include 'product-page-tab' %}
</div>
<div class="container">
{% if settings.related_product_display and settings.related_product_move == blank%}
<div class="products-related">
{% if settings.related_product_type == "tags" %}
{% include 'related-products-by-tags' %}
{% else %}
{% include 'related-products' %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{%endif%}
</div>