Inline InStock Alerts form in Featured Homepage  / Homepage


    The customization requires the following steps.


  1. Creating the appropriate liquid file adding  our  javaScript code.

  2. Including our snippet  in the theme.liquid.

  3. Adding the Div to The Product Home page.





Our final Goal is Below!


Note : Kindly make  your changes into a copy theme, to ensure all is working properly before modifying the live theme.


1. Creating the appropriate liquid file adding our  javaScript code.


Create a new file in our Snippets folder, name it  swym-inline-form.liquid in the 




Paste The below Code in the File : 


<script>

  (function(){

    var productId = {{ product.id | json }};

    function swymCallbackFn(){

      var product = SwymViewProducts[productId]

      if(product){

        var variant = SwymWatchProducts[product.epi];

        var isOOS = window._swat.platform.isVariantOOS(variant);

        var container = document.querySelector(".product-" + productId + ".swym-isa-container");

        if(isOOS && container){

          window._swat.addToWatchList(

            {},

            SwymViewProducts[productId],

            function(r) {

              console.log("response", r);

            },

            container

          ); 


        }

      }

    }

    if(!window.SwymCallbacks){

      window.SwymCallbacks = [];

    }

    window.SwymCallbacks.push(swymCallbackFn);

    

  })();

  

</script>



2. Including our snippet  in the theme.liquid.


Search  for theme.liquid and include our newly created swym-inline-form.liquid after our 

swymSnippet.



3. Adding the Div to The Product Home page.



Find your homepage .liquid and paste the below div where you want your ISA form to appear.


<!--   Swym Inline form Begining     -->

      {% include 'swym-product-view', product: product %}

      {% include 'swym-inline-form', product: product %}

      

      <div class="product-{{product.id}} swym-isa-container"></div>    

  <!--  Swym Inline form End →




Note : The home-featured-page.liquid will vary according to your specific theme in shopify.

    

Save our changes and Preview, 


That's all folks!