atikju

jQuery( document.body ).trigger( 'wc_fragment_refresh' );

atikju

{% comment %}
Reach author at [email protected] for any queries!
{% endcomment %}
<div class="devTopbar center">
  <p>{{ section.settings.dev-top }}</p>
</div>

<style>
.devTopbar.center p {
    color: #fff;

atikju

//  1. Enter sheet name where data is to be written below
        var SHEET_NAME = "Sheet1";
         
//  2. Run > setup
//
//  3. Publish > Deploy as web app 
//    - enter Project Version name and click 'Save New Version' 
//    - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously) 
//
//  4. Copy the 'Current web app URL' and post this in your form/script action 

atikju

/*General*/
.vertically-top{
  vertical-align: top;
}
.vertically-center{
  vertical-align: center;
}
.vertically-bottom{
  vertical-align: bottom;
}

atikju

.btn{
    box-shadow: inset 0 0 0 0 #31302B;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
}
.btn{
    box-shadow: inset 100px 0 0 0 #fff;
}

atikju

<a href="https://site.com/cart/variant_id:qty" class="magic-add-cart-button">BUY NOW</a>

atikju

      var available_ids = []; //array of 'varaint_id - qty'
    //the following loop was for my case, you need to change the DOM selector for yours
      $('.devTable tbody tr').each(function(){
      	var thisQty = $(this).find('.devQty input').val();
        if(thisQty > 0){
          	var xVarID = $(this).find('.devQty input').attr('data-value');
          	var toPushItem = xVarID+'-'+thisQty;
          	available_ids.push(toPushItem);
        }
      }).promise().done( function(){ 

atikju

<div id="variant-inventory" class="devst-variant-inventory">
 {% if product.variants.first.inventory_management == "shopify" %}
    {% if product.variants.first.inventory_quantity > 0 %}
  		{% if product.variants.first.inventory_quantity > 10 %}
			{% assign hideValue = 'none' %}
  		{% else %}
			{% assign hideValue = 'block' %}
  		{% endif %}
  		<span id="qtyLogic" style="display:{{ hideValue }}">
          Only <span class="devStock">{{ product.variants.first.inventory_quantity }}</span> left!

atikju

{% for product in collections[product.handle].products %}
{{ product.title }}
{% endfor %}

atikju

{% comment %}
Add this snippet to your snippets folder and then include it at the very bottom of your theme.liquid right before </body>

The following script using fancybox app script. If your theme already has it in your theme, you can delete the fancy apps scripts.
{% endcomment %}

{% if template.name == 'index' %}
  <!-- Fancy apps Scripts -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>