skip to Main Content

How to create a custom buy now button in Shopify without the payment gateway. It should be redirected to the checkout page.

enter image description here

        {{ form | payment_button }}

above one is a dynamic button. But don’t want to redirect to the payment gateway. It should redirect to checkout.

And I tried the below code. Which is not good. It shows also a popup for add to cart and redirects.

  <form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>
 function instantBuy(){
     var $ = jQuery;
   $(".engo-popup").hide();

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
    }

4

Answers


  1. Chosen as BEST ANSWER

    It was inside the form. That's why it shows a popup

      
     function instantBuy(){
         var $ = jQuery;
    
       var formParams = $('form.cart').serialize();
         $.ajax({
          url: "/cart/add",
          type: "post",
          data: formParams,
          success: function(){ 
           window.location.href = "/checkout";
          },
          error: function(){
          }
         })
     }
     {% endform %}
    <form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
    <input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
    <button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
    </form>


  2. <h2 id="create-a-buy-button-for-a-single-product">
    <a class="anchor" aria-hidden="true" href="#create-a-buy-button-for-a-single-product"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Create a Buy Button for a single product</h2>
    <p>You can create a Buy Button for a single product. The Buy Button can include one or all of the product's variants. When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more about <a href="#customizing-buy-buttons">customizing Buy Buttons</a>.</p><p>Before you create a Buy Button for a product, you must have <a href="/en/manual/products/add-update-products#add-a-new-product">added the product in your Shopify Admin</a> and <a href="/en/manual/products/add-update-products#make-products-available-on-your-sales-channels">made it available</a> to the Buy Button sales channel.</p>
    <h4 id="steps">
    <a class="anchor" aria-hidden="true" href="#steps"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Steps:</h4>
    
    <div class="section-tag-block">
      <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal">
    <li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li>
    <li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li>
    <li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li>
    </ul></div>
    <div class="desktop active changeable-content"><ol>
    <li><p>From your Shopify admin, go to <a href="https://www.shopify.com/admin/apps/buy_button"><strong>Buy Button</strong></a>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Product Buy Button</strong>.</p></li>
    <li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: customize the Buy Button.</p>
    <ol>
    <li> If your product has variants, then select <strong>All variants</strong> or select the variant that you want to include.
    </li>
    <li> Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li> By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    </li>
    <li><p>Click <strong>Next</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    <div class="iphone changeable-content"><ol>
    <li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
    <li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Product Buy Button</strong>.</p></li>
    <li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: click <strong>Customize</strong>.</p>
    <ol>
    <li>If your product has multiple variants, then select <strong>All variants</strong> or select a variant from the drop-down list.
    </li>
    <li>Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    <aside class="note tip">
      <h4>Tip</h4>
      <p>
    At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
    </aside>
    </li>
    <li><p>Click <strong>Done</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    <div class="android changeable-content"><ol>
    <li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
    <li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Product Buy Button</strong>.</p></li>
    <li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: click <strong>Customize</strong>.</p>
    <ol>
    <li>If your product has multiple variants, then select <strong>All variants</strong> or select a variant from the drop-down list.
    </li>
    <li>Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    <aside class="note tip">
      <h4>Tip</h4>
      <p>
    At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
    </aside>
    </li>
    <li><p>Click <strong>Done</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    </div>
    
    <h2 id="create-a-buy-button-for-a-collection">
    <a class="anchor" aria-hidden="true" href="#create-a-buy-button-for-a-collection"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Create a Buy Button for a collection</h2>
    <p>When you create a Buy Button for a collection, you are actually creating a button for each product in the collection.</p><p>When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more about <a href="#customizing-buy-buttons">customizing Buy Buttons</a>.</p><p>Before you create a Buy Button for a collection, you must have:</p>
    <ul>
    <li>
    <a href="/en/manual/products/add-update-products#add-a-new-product">Added the products in your Shopify Admin</a>,
    </li>
    <li>
    <a href="/en/manual/products/add-update-products#make-products-available-on-your-sales-channels">Made the products available to the Buy Button sales channel</a>
    </li>
    <li>
    <a href="/en/manual/products/collections">Created the collection</a>.
    </li>
    </ul>
    
    <h4 id="steps">
    <a class="anchor" aria-hidden="true" href="#steps"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Steps:</h4>
    
    <div class="section-tag-block">
      <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal">
    <li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li>
    <li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li>
    <li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li>
    </ul></div>
    <div class="desktop active changeable-content"><ol>
    <li><p>From your Shopify admin, go to <a href="https://www.shopify.com/admin/apps/buy_button"><strong>Buy Button</strong></a>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Collection Buy Button</strong>.</p></li>
    <li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: customize the Buy Button.</p>
    <ol>
    <li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    </li>
    <li><p>Click <strong>Next</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    <div class="iphone changeable-content"><ol>
    <li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
    <li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Collection Buy Button</strong>.</p></li>
    <li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: click <strong>Customize</strong>.</p>
    <ol>
    <li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    <aside class="note tip">
      <h4>Tip</h4>
      <p>
    At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
    </aside>
    </li>
    <li><p>Click <strong>Done</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    <div class="android changeable-content"><ol>
    <li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
    <li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
    <li><p>Click <strong>Create a Buy Button</strong>.</p></li>
    <li><p>Click <strong>Collection Buy Button</strong>.</p></li>
    <li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
    <li>
    <p>Optional: click <strong>Customize</strong>.</p>
    <ol>
    <li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
    </li>
    <li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
    </li>
    </ol>
    <aside class="note tip">
      <h4>Tip</h4>
      <p>
    At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
    </aside>
    </li>
    <li><p>Click <strong>Done</strong>.</p></li>
    <li><p>Click <strong>Copy code</strong>.</p></li>
    <li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
    <li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
    </ol></div>
    </div>
    Login or Signup to reply.
  3. This method adds product to cart & redirects to checkout page.

     addCartCheckout(el) {
    
        let form = document.querySelector('form[action="/cart/add"]');
        let formData = new FormData(form);
    
        fetch('/cart/add', {
            method: 'POST',
            body: formData
        }).then(function (response) {
            if (response.ok) {
                location.href='/checkout';
                return response.json();
            }
            throw response;
        }).then(function (data) {
            console.log(data);
        }).catch(function (error) {
            console.warn(error);
        });
    }
    
    Login or Signup to reply.
  4. This method is to create a url link with variant id & total quantity & redirect to checkout Page onclick.
    Example:

    • https://my-shop-name.myshopify.com/cart/36485954240671:3 — checkout with one variant

    • https://my-shop-name.myshopify.com/cart/36485954240671:3,31384149360662:1 — Add multiple variant

      //Select form --------------
      let form = document.querySelector('form[action="/cart/add"]');
      
      //Onclick Buynow -----------
      let btnBuy = form.querySelector('#buyNow');
      btnBuy.onclick = e => {
      
       //Get Variand Id -----------
       let variantId = form.querySelector('input[name="id"]').getAttribute('value')
      
       //Get Total Item -----------
       let quantity = form.querySelector('input[name="quantity"]').value; 
      
       //Generate link & redirect -----------
       let host = window.location.hostname;
       let newurl = `//${host}/cart/${variantId}:${quantity}`
       window.location.href = newurl;
      }
      
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search