SHOPIFY BUY BTN ONLY WITHOUT IFRAME - REVISED FOR RICO - HAND CODED

gistfile1.txt

<!--=======================================================
   =            SHOPIFY - COMMONT BUY BUTTON CODE            =
   ========================================================-->
<style type="text/css">
   /* Button Style */
   .shopify-buy-frame {
   text-align: center;
   }
   .shopify-buy__btn  {
   border-radius: 50px;
   background-color: #f8a0ca;
   padding: 1rem 4rem;
   font-size: 1.5rem;
   text-transform: uppercase;
   cursor: pointer;
   color: darkred;
   font-weight: 500;
   } 
   .shopify-buy__btn:hover  {
   background-color: #e96595;
   color: white;
   }
</style>
<script src="https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js" type="text/javascript"></script>
<script type="text/javascript">
   var client = ShopifyBuy.buildClient({
     apiKey: 'b4763ca24397865402e1817a64c60b55',
     domain: 'nuvaorganics-com.myshopify.com',
     appId: '6'
   });
   
   var ui = ShopifyBuy.UI.init(client);
   
</script>				
<!--====  End of SHOPIFY - COMMONT BUY BUTTON CODE  ====-->
<figure class="add-to-cart-btn text-center" style="margin-bottom: 5rem;">
   <!-- <a class="btn btn-default btn-lg" href="#">ADD TO CART</a> -->
   <!--=======================================================
      =            PRODUCT: ANTI ACNE AND AGING SOAP            =
      ========================================================-->
   <div id='product-component-1'></div>
   <script type="text/javascript">
      var product_id = [508737847341];
      
      ui.createComponent('product', {
        id: product_id,
        node: document.getElementById('product-component-1'),
        moneyFormat: 'RM%7B%7Bamount%7D%7D%20MYR',  
        options: {
          product: {
            // buttonDestination: 'modal'
            iframe: false,
      
            contents: {
              img: false,
              price: false,
              title: false
            },      
          },
          cart: {
            	// startOpen: true,
      		"contents": {
      			"button": true
      		},
      		"styles": {
      		  "button": {
      		    "background-color": "#f8a0ca",
      		    ":hover": {
      		      "background-color": "#df90b6"
      		    },
      		    "border-radius": "50px",
      		    ":focus": {
      		      "background-color": "#df90b6"
      		    }
      		  },
      		  "footer": {
      		    "background-color": "#ffffff"
      		  }
      		},    
          },
      	toggle: {
      		"styles": {
      		  "toggle": {
      		    "background-color": "#f8a0ca",
      		    ":hover": {
      		      "background-color": "#df90b6"
      		    },
      		    ":focus": {
      		      "background-color": "#df90b6"
      		    }
      		  }
      		}
      	}
      
        }
      
      });
      
   </script>
   <!--====  End of PRODUCT: ANTI ACNE AND AGING SOAP  ====-->
</figure>