Size option not showing (MISSING)

AzHeat · ‎01-21-2021

Hi, my store is missing the size option. ((( azheatplug.com )))

Can you help?

I have this on the 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 %}

{% if settings.product_sidebar_position != 'none' %}

{%else%}

{%endif%}

{% include 'media' %}

</div>

{% if settings.product_prev_next != blank %}

{% if collection %}

{% if collection.previous_product or collection.next_product %}

{% if collection.previous_product %}

</a>

{% assign words = collection.previous_product | split:'/' %}

{% assign word = words.last %}

<h3 class="product-name">[title]</h3>

</script>

</div>

{% endif %}

{% if collection.next_product %}

</a>

{% assign words = collection.next_product | split:'/' %}

{% assign word = words.last %}

<h3 class="product-name">[title]</h3>

</script>

</div>

{% endif %}

</div>

{% endif %}

<h2>

{% if settings.language_enable %}

<span class="lang1">{{ product.title | split: '|' | first }}</span>

<span class="lang2">{{ product.title | split: '|' | last }}</span>

{% else %}

{% 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>

{% include 'addthis' %}

{% if settings.product_short_desc %}

{% if settings.product_short_desc %}

{%- 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 -%}

{% if settings.language_enable %}

<div class="lang1">{{ description | split: '[lang2]' | first }}</div>

<div class="lang2">{{ description | split: '[lang2]' | last }}</div>

{% else %}

{% endif %}

</div>

{% endif %}

</div>

{% endif %}

{% 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 %}

<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 %}

<span {% if settings.language_enable %}data-translate="products.product.availability"{% endif %}>{{ 'products.product.availability' | t }} </span>

{% if product.selected_or_first_available_variant.inventory_management %}

{% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}

{% if first_inventory > 0 %}

{% else %}

{% endif %}

{% else %}

{% endif %}

</span>

</div>

{% endif %}

{% if settings.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 %}

<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="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>

{% endif %}

</div>

{% if product.available %}

{% else %}

{% endif %}

</div>

{% 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 %}

{{ variant.title }} - {{'products.product.sold_out' | t}}

</option>

{% endif %}

{% endfor %}

</select>

</div>

<span class="label" {% if settings.language_enable %}data-translate="products.product.quantity"{% endif %}>{{ 'products.product.quantity' | t }}:</span>

<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>

{% if product.available %}

<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 %}

<span>

<span {% if settings.language_enable %}data-translate="products.product.sold_out"{% endif %}>{{ 'products.product.sold_out' | t }}</span>

</span>

</button>

</div>

{% endif %}

</div>

{% include 'wishlist-product-detail'%}

</div>

</form>

</div>

{% if settings.product_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 %}

{% endfor %}

</div>

{% endif %}

</div>

{% if settings.related_product_display and settings.related_product_move != blank %}

{% if settings.related_product_type == "tags" %}

{% include 'related-products-by-tags' %}

{% else %}

{% include 'related-products' %}

{% endif %}

</div>

{% endif %}

{% if settings.product_sidebar_position != 'none' %}

{% include 'product-page-tab' %}

</div>

{% endif %}

{% if settings.related_product_display and settings.related_product_move == blank and settings.product_sidebar_position != 'none'%}

{% if settings.related_product_type == "tags" %}

{% include 'related-products-by-tags' %}

{% else %}

{% include 'related-products' %}

{% endif %}

</div>

{% endif %}

</div>

{% if settings.product_sidebar_position != 'none' %}

{% include 'product-sidebar' %}

</div>

{% endif %}

</div>

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' %}

{% include 'product-page-tab' %}

</div>

{% if settings.related_product_display and settings.related_product_move == blank%}

{% if settings.related_product_type == "tags" %}

{% include 'related-products-by-tags' %}

{% else %}

{% include 'related-products' %}

{% endif %}

</div>

{% endif %}

</div>

{%endif%}

</div>

tim · ‎01-21-2021

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

AzHeat · ‎01-21-2021

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' %}

{% include 'home-sidebar' %}

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

{% section 'footer' %}

{% 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 %}

tim · ‎01-21-2021

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.

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

Size option not showing (MISSING)

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links