widget

<div id="left-side"> {{ customify-widget }}</div>
<div id="right-side">
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <link itemprop="availability" href="http://schema.org/InStock">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
        <h1 itemprop="name">{{ product.title }}</h1>
		{% assign form_grid = false %}
		{% if form_method == "standard" or product.variants.size == 1 %}
        <div class="customify-form-row"> <span id="ProductPrice" class="customify-price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}"> <span id="variant_price" >{{ product.price | money }}</span> </span>
         {% if product.compare_at_price > product.price %} <span id="PriceA11y" class="visually-hidden">Price</span> <s id="compare_price" class="product-single__sale-price"> {{ product.compare_at_price_max | money }} </s> {% endif %}</div>
        <form name="customify_form" id="customify_form" action="/cart/add" method="post" enctype="multipart/form-data">
            <input type="file" id="customify-upload" style="display: none" />
            <input type="hidden" id="customify_id" name="properties[customify_id]" /> {% if product.variants.size == 1 %}
            <input type="hidden" value="{{ product.variants.first.id }}" name="id" />{% else %}
            <select name="id" id="productSelect" class="product-single__variants"> {% for variant in product.variants %} {% if variant.available %}
                <option data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>{% else %}
                <option disabled="disabled"> {{ variant.title }} - Sold Out</option> {% endif %} {% endfor %} </select>{% endif %}{{ product_color_grid }}{{ customify_text_widget }}
            <div class="customify-form-row">
                <label for="Quantity">Quantity</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>
            <div class="customify-form-row">
                <label id="note-label" for="note">Note</label>
                <textarea id="note" name="properties[customify_note]"></textarea>
            </div>
            <div class="customify-form-row">
                <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
                <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
            </div>
        </form>
        <div class="customify-form-row"> {{ product.description }}</div>
		{% else %}
		{% assign form_grid = true %}
        <div id="customify-variant-table">
            <input type="file" id="customify-upload" style="display: none" />{{ product_color_grid }}{{ customify_text_widget }}
            <table width="100%" border="0" cellspacing="0" cellpadding="0" name="id" style="display:block;!important">
                <tbody>
                    <tr class="{% cycle 'rx','ry' %}">{% for option in product.options %}
                        <th>{{ option }}</th> {% endfor %}
                        <th scope="col" class="center">Price</th>
                        <th scope="col" style="width: 80px;" class="textright">Quantity</th>
                    </tr> {% for variant in product.variants %} {% if variant.available %}
                    <tr class="{% cycle 'xx','yy' %}" id="variant_tr-{{ variant.id }}"> {% for option in product.options %}
                        <td class='text'>{{ variant.options[forloop.index0] }}</td> {% endfor %}
                        <td value="{{ variant.id }}" title="" class="center">{{ variant.price | money }} {% if variant.compare_at_price > variant.price %} <del>{{ variant.compare_at_price | money }}</del>{% endif %}</td>
                        <td> {% if variant.available %}
                            <input data-idx="{{ variant.id }}" class='qty_input' type="text" value="0" name="qty_{{variant.id}}" id="qty_{{ variant.id}}" /> {% else %} Sold {% endif %}</td>
                    </tr> {% endif %} {% endfor %}</tbody>
            </table>
            <div class="msg-info" style="display: none; padding: 10px 0px;"></div>
        </div>
        <div class="customify-form-row">
            <button id="back-product" style="display: none; margin-right: 10px; " type="button" class="btn"> <span>&laquo; BACK</span> </button>
            <button type="submit" name="add" id="customify-addtocart" class="btn"> <span id="AddToCartText">ADD TO CART</span> </button>
        </div> {% endif %}</div>
</div>
{% if form_grid %}
<br />
<div class="customify-form-row"> {{ product.description }}</div>
{% endif %}

{% unless form_method  == 'grid' %}
{{ "option_selection.js" | shopify_asset_url | script_tag }}
{% endunless %}

<script type="text/javascript">
    var the_form = $("#customify-variant-table");
    success_div = the_form.find(".msg-info");

    function add_to_cart_mass(t) {
        Shopify.queue = [];
        var i = 0;
		var data_form = JSON.stringify($("#customify_form").serializeArray());
        the_form.find('.qty_input').each(function() {
            idx = $(this).attr('data-idx');
            qty = $(this).val() * 1;

			data_form.push({"variant_id": idx,"quantity": qty});
			data_form.properties.customify_id = t;
            if (qty > 0) {
                Shopify.queue.push({data_form});
                i++;
            }
        });
        if (i > 0) Shopify.moveAlong();
    }
    Shopify.moveAlong = function() {
        if (Shopify.queue.length) {
            $('#customify-addtocart').attr('disable', true).html("<span id='AddToCartText'>Processing..</span>");
            var request = Shopify.queue.shift();
            Shopify.addItem(request.variant_id, request.quantity, request.properties, Shopify.moveAlong);
        } else {
            showModal('<span>Item(s) Added to the Cart!</span> <a href="/cart">View cart</a>').fadeIn(300).delay(7000).fadeOut(300);
            $('#customify-addtocart').attr('disable', false).html("<span id='AddToCartText'>" + add_to_cart_text + "</span>");
        }
    };
    Shopify.addItem = function(id, qty, properties, callback) {
        var params = {
            quantity: qty,
            id: id
        };
        if (properties != false) {
            params.properties = properties;
        }
        $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: params,
            success: function() {
                if (typeof callback === 'function') {
                    callback();
                }
            },
            error: function() {}
        });
    }


    $(document).ready(function() {
        function getUrlParams(e, n) {
            n || (n = window.location.href), e = e.replace(/[\[\]]/g, "\$&");
            var r = new RegExp("[?&]" + e + "(=([^&#]*)|&|#|$)"),
                a = r.exec(n);
            return a ? a[2] ? decodeURIComponent(a[2].replace(/\+/g, " ")) : "" : null
        }
        var variant_id = getUrlParams("variant");
        $("select[name='id']").val(variant_id);
        console.log("script proceed");
        var selectCallback2 = function(variant, selector) {
            $("#variant_price").html(Shopify.formatMoney(variant.price, "{{ shop.money_with_currency_format }}"));
            $("#compare_price").html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_with_currency_format }}"));
            if (variant.inventory_management == "shopify" && variant.inventory_policy == "deny" && variant.old_inventory_quantity == 0) {
                $("#customify-addtocart").prop("disabled", true);
                $("#recreation-button").hide();
                $("#AddToCartText").text("SOLD OUT");
            } else {
                $("#recreation-button").show();
                $("#customify-addtocart").prop("disabled", false);
                $("#AddToCartText").text("ADD TO CART");
            }
        };
        jQuery(function($) {
            new Shopify.OptionSelectors("productSelect", {
                product: {{ product | json  }},
                onVariantSelected: selectCallback2,
                enableHistoryState: true
            });
			{% if product.options.size == 1 and product.options.first != "Title" %}
            $(".selector-wrapper:eq(0)").prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
            {% endif %}
			{% if product.variants.size == 1 and product.variants.first.title contains "Default" %}
            $(".selector-wrapper").hide(); {% endif %}
        });
    });

    function add_to_cart(t) {
        document.getElementById("customify_id").value = t;
        document.getElementById("customify_form").submit();
    }
    $(window).load(function() {
        $("#customify_form div").removeClass("selectreplace");
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        if ($("#main-container").parents(".customify-back").length > 0) {
            $("#back-product").show().attr("onclick", "window.location='{{ product.url }}'");
        }
    });

   function showModal(htmlMessage, fullscreen, type) {

		type = type === undefined ? '' : type;

		var $body = $('body').addClass('fpd-overflow-hidden'),
			fullscreenCSS = fullscreen ? 'fpd-fullscreen' : '';
			html = '<div class="fpd-modal-internal fpd-modal-overlay"><div class="fpd-modal-wrapper fpd-shadow-3"><div class="fpd-modal-close"><span class="fpd-icon-close"></span></div><div class="fpd-modal-content"></div></div></div>';

		if($('.fpd-modal-internal').length === 0) {

			$body.append(html)
			.children('.fpd-modal-internal:first').click(function(evt) {

				$target = $(evt.target);
				if($target.hasClass('fpd-modal-overlay')) {

					$target.find('.fpd-modal-close').click();

				}

			});

		}

		if(type === 'prompt') {
			htmlMessage = '<input placeholder="'+htmlMessage+'" /><span class="fpd-btn"></span>';
		}

		$body.children('.fpd-modal-internal').attr('data-type', type).removeClass('fpd-fullscreen').addClass(fullscreenCSS)
		.fadeIn(300).find('.fpd-modal-content').html(htmlMessage);

		return $body.children('.fpd-modal-internal');

	}
</script>