Using buy button - checkout to redirect not pop up

[Andrew_Rubio]

Hi,

I'm currently using the "buy button" app as an embedded code on my website. It works well, however after clicking on "Checkout" on the cart slider that comes out of the right, the checkout is actually a pop up.

How can I do it so that the checkout actually redirects the current page instead of popping up. I think many of my users would prefer and trust it if it was on the same page.

Here is my website: www.andrewrubio.com

If you go to a product page and try a purchase you will see what I mean: http://www.andrewrubio.com/shop/gin-selection

Thanks so much,

Andrew

[Busfox]

Hi Andrew,

I did a bit of testing, and I believe that it's only ever going to be a modal, but our support team may know better. Can you reach out to them at support@shopify.com or 1-888-shopify?

[Tofolux]

Did anyone ever figure this out? Its driving me nuts 😞

[Gary1ie]

Hi,

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);

The checkout page should now open in the same window.

Cheers

Gary

[Michelle_HJ]

I'm new to Shopify and web development. I'm having trouble finding the line of code that needs to be replaced per Gary's solution (<script type="text/javascript">). Could someone please let me know where exactly to find it?

Also, the solution posted by Nemo_de_Sol about adding "popup":false, where exactly can i find the piece of code to add it to?

Thank you for your time!

[Lilly123]

Hi Gary, 

Thanks so much for this comment! I have been searching for ways to make the check out page appear in the same window and was so glad to find your answer! 

As I am new to Shopify, and a beginner at best with coding, where does this piece of code go so that I can make sure the check out stays on page? 

Thanks so much, your answer really has made my day!

Lilly 

[iBeFound]

Gary1ie's method works well.

However, if you have the Buy Button on multiple pages of your website, you would need to add the extra code to each instance of Buy Button.

Instead of messing with the Buy Button code each time, you can simply place the following code into the header/footer scripts section of your website. 

<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);
</script>

You only need to do this once and the checkout button will open in the same window.

I've tested this on 3 client websites and it works perfectly.

[ScottyMojo]

This works brilliantly! Is there a way to parse the cart data through a custom domain that is configured for a Shopify store instead of the checkout going through the https://checkout.shopify.com domain?

[Dear_Giana]

Does this code have to replace every element for every single instance where I am using the buy button?

[Nemo_de_Sol]

Hey guys/gals.

Actually, the solution is *very* simple. 

All you need to do is add:

"popup":false,

Like this:

},
  "cart": {
    "contents": {
      "button": true
    },
    "popup":false,
    "styles": {
      "button": {
        "background-color": "#d63c0b",
        "font-family": "Open Sans, sans-serif",
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
          "background-color": "#c1360a"

Took me 2 hours to figure this out! 🙂

[MAGNEZOL]

Why does this not work for me?

Using Debut theme

Copy Paste exact same place..

---

@Nemo_de_Sol wrote:

Hey guys/gals.

Actually, the solution is *very* simple. 

All you need to do is add:

"popup":false,

Like this:

},
  "cart": {
    "contents": {
      "button": true
    },
    "popup":false,
    "styles": {
      "button": {
        "background-color": "#d63c0b",
        "font-family": "Open Sans, sans-serif",
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
          "background-color": "#c1360a"

Took me 2 hours to figure this out! 🙂

---

[RiffOp]

Does this only work if you have a cart?

The ‘cart’ code is not in my embed.

We have it set up so you go straight to checkout from the ‘buy button’..


Any work arounds would be great! We sell one item exclusively and this pop up just makes everything super weird!!

[feefyou]

You might want to re-create your button, as it could be related to which options you enable when creating. 

I just did as the post suggested, adding that one line, at the right spot, and it indeed takes you to the checkout URL in the original window/screen.

[levyelectric]

I tired to use that line of code as well but after click checkout it re-directs to a blank page.  Any thoughts on what I might be doing wrong?

},
"cart": {
"contents": {
"button": true
},
"popup":false,
"text": {
"total": "Subtotal",
"button": "Checkout"
}
}

[Nik_Hawks]

Used DrBee's suggestion and it keeps me in the same window. However, if I want to checkout through the regular shop or go back to the store to order additional items, the "regular" store cart has nothing in it.  Any idea how to merge those two carts?

[Keenan_Flogerzi]

Stellar! Thank you!

[Fiadh_Woven_Des]

*So* simply. Thank you!

[levyelectric]

I'm having trouble following - should it look like this: 

<div id='collection-component-1566951966130'></div>
<script type="text/javascript">
<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);
/*<![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();
  }