HELPFUL LINKS

Original Article: https://ecommerce.shopify.com/c/ecommerce-design/t/cart-widget-with-buy-button-go-to-full-checkout-and-not-popup-331134 Buy Button Customization Options (very helpful): https://github.com/Shopify/buy-button-js/blob/master/docs/customization/index.md

Method 1 - Minimal Code

The following method is the easiest & quickest, but is also limited in terms of flexibility. For more customization options use the Shopify JavaScript Buy SDK and follow method 2's instructions. http://shopify.github.io/js-buy-sdk/

Within the back-end of Shopify open Apps > Buy Button (May have to install if it isn't already.)

Walk through the WYSISYG editor and generate the code. The one problem with this is that when the cart button is clicked the checkout opens in a new popup window. While this is ideal for some environments, most of the time it is best to keep in the same window.

Set Popup to False

Locate where it says:

"cart": {

and add this on the next line:

 "popup":false,

So it should look like this:

"cart": {
      "popup":false,

Read more about the customization available at this link: https://github.com/Shopify/buy-button-js/blob/master/docs/customization/index.md

Final Code Example:

The final code output should look somewhat similar to the following:

<div id='product-component-59b3d8b528a'></div>
<script type="text/javascript">
/*<![CDATA[*/

(function () {
  var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'pre-order-test.myshopify.com',
      apiKey: '16a4d1e10b290a99cd42238e6f4f44bb',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [10011502797],
        node: document.getElementById('product-component-59b3d8b528a'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "layout": "horizontal",
    "variantId": "all",
    "width": "100%",
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "description": true,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "text-align": "left",
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "title": {
        "font-size": "26px"
      },
      "price": {
        "font-size": "18px"
      },
      "compareAt": {
        "font-size": "15px"
      }
    }
  },
  "cart": {
    "popup":false,
    "contents": {
      "button": true
    },
    "styles": {
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/


</script>

If All Else Fails, Force Override the Window Attribute

NOTE: THIS PART IS ONLY NEEDED IF SETTING POPUP TO FALSE IN THE PREVIOUS STEP DID NOT WORK.

If for some reason the previous code doesn't work then you can always just force override with JavaScript. Replace the following line of code:

<script type="text/javascript">

With the code below:

<script data-shopify-buy-ui="">
window.open = function (open) {
return function (url, name, features) {
// Pass through non-shopify URLS
if (url.indexOf("myshopify") < 0) {
return open.call(window, url, name, features);
}
// Use current window
console.log("Redirecting to:", url);
window.location.href = url;
return null;
};
}(window.open);

And thats it!

Method 2 - Using Buy Button API

Documentation coming soon.