Get rid of Checkout popup window?

Preston_Jones
New Member
1 0 0

Hi fellow shopifiers, 

I'm on the $9 plan (we don't want to use a online store theme): is it possible to force the checkout button to just continue to the next page rather than open a popup window? 

Basically you create a buy button -> click add to cart -> cart shows up on right hand side -> click checkout and the popup checkout window opens. 

Everything else is fine but again I just want to make the checkout button not go to a popup? I've called shopify and emailed them and everyone has said "they'll look into it"

Thanks for the help,

Preston 

 

Replies 6 (6)
Britton_Jenner
Shopify Staff (Retired)
398 0 78

Hi Preston,

Britton here with the Shopify support team.

At the present time it is not possible to change the Buy Button to open the checkout in the same window. The only changes that can be made to the Buy Button at the present time are the ones found when you create the Buy Button and those [found in this page](https://help.shopify.com/manual/sell-online/buy-button/edit-delete).

I hope that helps remove some of the ambiguity!

-Britton

Britton Shopify Guru
Tofolux
Tourist
9 0 5

Hi Britton,

It is clearly possible. If you look at an example on your own site here..

http://shopify.github.io/js-buy-sdk/examples/#product-checkout

In the first example, clicking on the "Buy Now" button opens the checkout page in the same window WITHOUT the annoying popup.

I myself am no coder and for life of me cant figure it out using the generated embed code supplied :(

Can anyone help with this please? Below is the generated code..

<div id='product-component-addc6cac047'></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: 'powapod.myshopify.com',
      apiKey: '395cea30438167f167ed53b6daf6334f',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [8585990145],
        node: document.getElementById('product-component-addc6cac047'),
        moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "buttonDestination": "checkout",
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "text": {
      "button": "BUY NOW"
    },
    "styles": {
      "product": {
        "text-align": "right",
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-weight": "bold"
      },
      "title": {
        "font-size": "26px"
      },
      "description": {
        "font-weight": "bold"
      },
      "price": {
        "font-size": "18px",
        "font-weight": "bold"
      },
      "compareAt": {
        "font-size": "15px",
        "font-family": "Helvetica Neue, sans-serif",
        "font-weight": "bold"
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "border-radius": "10px",
        "font-weight": "bold"
      },
      "variantTitle": {
        "font-weight": "bold"
      },
      "description": {
        "font-weight": "bold"
      },
      "price": {
        "font-weight": "bold"
      },
      "compareAt": {
        "font-family": "Helvetica Neue, sans-serif",
        "font-weight": "bold"
      }
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold"
      },
      "count": {
        "color": "#ffffff",
        ":hover": {
          "color": "#ffffff"
        },
        "font-size": "16px"
      },
      "iconPath": {
        "fill": "#ffffff"
      }
    }
  },
  "option": {
    "styles": {
      "label": {
        "font-weight": "bold"
      },
      "select": {
        "font-weight": "bold"
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
      });
    });
  }
})();
/*]]>*/
</script>

KC4
Tourist
21 0 2

Any update on this? It's completely unacceptable in 2017 to shop through popup window.

DiamondBlade
New Member
1 0 0

Honestly if your dev team could figure out away for this to work without the popup it would be make the Buy Now button extremely slick! 

iBeFound
New Member
9 0 0

It is possible to replace the checkout popup window with a full Shopify checkout page in the same tab / window.

To do so, you'll need to add the following code to the header or 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>