Using buy button - checkout to redirect not pop up

Andrew_Rubio
New Member
1 0 1

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

Replies 17 (17)
Busfox
Shopify Staff (Retired)
Shopify Staff (Retired)
628 49 107

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?

Andrew | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Tofolux
Tourist
9 0 5

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

Gary1ie
New Member
2 0 4

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

ScottyMojo
New Member
1 0 2

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
New Member
2 0 0

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

Nemo_de_Sol
New Member
1 0 5

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! 🙂

 

Keenan_Flogerzi
Shopify Partner
1 0 0

Stellar! Thank you!

Fiadh_Woven_Des
Shopify Partner
1 0 0

*So* simply. Thank you!

MAGNEZOL
Shopify Partner
1 0 0

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
New Member
1 0 0
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
New Member
1 0 0

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
New Member
5 0 0

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"
}
}

 

Screen Shot 2019-08-26 at 7.12.34 PM.png

levyelectric
New Member
5 0 0

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();
  }
Nik_Hawks
Shopify Partner
18 0 45

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?

Michelle_HJ
New Member
1 0 0

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
New Member
1 0 0

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
Tourist
9 0 1

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.