Size option not showing (MISSING)

AzHeat
New Member
2 0 0

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 %}
                          <link itemprop="availability" href="http://schema.org/InStock" />
                          {% else %}
                          <link itemprop="availability" href="http://schema.org/OutOfStock" />
                          {% 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 ) &amp;&amp; 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&colon;;" 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>  

 

0 Likes
tim
Shopify Expert
2865 119 942

There is a couple of Javascript errors on your page.

Somewhere in your themeliquid  layout should be a code similar to 

  <script type="text/javascript">
    var productsObj = {}; 
    var swatch_color_enable = false;
    var asset_url = '//cdn.shopify.com/s/files/1/0521/2133/8028/t/2/assets//?895';
    var money_format = '<span class="money">${{amount}}</span>';
    var multi_language = ;
  </script> 

Pay attention to the var multi_language = ;  line -- see that there is nothing rendered on the right, however in your liquid you will see some code there.

If your theme has multi-language feature make sure it's off, or configure properly; it's hard to give further recommendations without seeing your code.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
AzHeat
New Member
2 0 0
Hi Tim.

This is what I have on my themeliquid:







<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

type="image/png" />
{% if template contains 'index' %}
{% if page_title != blank and page_title != 'Welcome' %}
{{ page_title }}
{% else %}
{{ shop.name }}
{% endif %}
{% elsif template == '404' %}
Page Not Found - {{ shop.name }}
{% else %}
{{ page_title }} - {{ shop.name }}
{% endif %}

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}" />
{% endif %}


{% include 'social-meta-tags' %}

<meta name="viewport" content="width=device-width, initial-scale=1,<br>minimum-scale=1, maximum-scale=1" />
<meta name="theme-color" content="{{ settings.color_primary }}" />
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
{% if template contains 'collection' %}
{{ 'bootstrap-select.min.css' | asset_url | stylesheet_tag }}
{% endif %}


{{ 'techmarket-icon.css' | asset_url | stylesheet_tag }}
{{ 'font-awesome.min.css' | asset_url | stylesheet_tag }}
{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}
{{ 'ultramegamenu.css' | asset_url | stylesheet_tag }}
{{ 'effect.css' | asset_url | stylesheet_tag }}
{{ 'magnific-popup.css' | asset_url | stylesheet_tag }}
{{ 'styles.scss.css' | asset_url | stylesheet_tag }}

{% if template contains 'product' %}
{{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
{%endif%}
{{ 'animate.css' | asset_url | stylesheet_tag }}
{{ 'color-config.scss.css' | asset_url | stylesheet_tag }}

{{ content_for_header }}
{% include 'oldIE-js' %}

{{ 'vendor.js' | asset_url | script_tag }}
{{ 'bootstrap.min.js' | asset_url | script_tag }}
{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{% endif %}
{% if settings.basic_font == 'google'%}

rel='stylesheet' type='text/css'>
{% endif %}
{% if settings.heading_font == 'google'%}

rel='stylesheet' type='text/css'>
{% endif %}

{% include 'translator' %}
<br> {% if settings.product_color_swatches_enable != blank %}<br> .product-view .product-options .selector-wrapper {<br> display: none;<br> }<br> {% endif %}<br> {% if settings.disable_responsive == 'yes'%}<br> .container{<br> width:1170px!important;<br> }<br> {% endif %}<br> {{settings.custom_style_1}}<br> {{settings.custom_style_2}}<br>





{% section 'header' %}




{% if settings.home_sidebar_position != 'none' and template
contains 'index' %}




{{ content_for_layout }}


{% include 'home-sidebar' %}




{%else%}
{{ content_for_layout }}
{%endif%}








{% if template contains 'index' and settings.newsletter_enable == '1' %}
{% include 'newsletter-popup' %}
{% elsif settings.newsletter_enable == '2' %}
{% include 'newsletter-popup' %}
{% endif %}
{% include 'box-popup' %}

{% if template == 'collection' or template contains 'collection.' %}
{{ 'shopify_common.js' | asset_url | script_tag }}
{{ 'jquery.history.min.js' | asset_url | script_tag }}
{{ 'bootstrap-select.js' | asset_url | script_tag }}
{% endif %}
{{ 'theme-scripts.js' | asset_url | script_tag }}
{{ "jquery.elevatezoom.min.js" | asset_url | script_tag }}
{% if template contains 'product' %}
{{ "jquery.fancybox.pack.js" | asset_url | script_tag }}
{%endif%}
{{ 'option_selection.js' | asset_url | script_tag }}
{{ 'theme.js' | asset_url | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{% include 'currency' %}
{% include 'linked-options' %}

{% include 'search-autocomplete' %}
{% if settings.admin_helper_panel != blank %}
{{ 'admin-panel.js' | asset_url | script_tag }}
{% endif %}


0 Likes
tim
Shopify Expert
2865 119 942

Use the "code" button which looks like "</>" and select "HTML" to paste your code, otherwise system does not allow some of what you've pasted. Anyway, the code in question is in the translator.liquid  snippet.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes