Direct link using Shopify's Buy Button

Question

I have a website I designed in HTML5 and I want to link to a product checkout page but I really don't want to use all the BuyButton's formatting and all the extras.

Here's the code that Shopify is telling me to use:

<div id='product-component-xxx'></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: 'xxx.myshopify.com',
      storefrontAccessToken: 'xxx',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: 'xxx',
        node: document.getElementById('product-component-xxx'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#ff0042"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#ff0042"
        },
        "border-radius": "7px",
        "padding-left": "100px",
        "padding-right": "100px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "buttonDestination": "checkout",
    "contents": {
      "img": false,
      "title": false,
      "price": false
    },
    "text": {
      "button": "Buy now"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#ff0042"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#ff0042"
        },
        "border-radius": "7px",
        "padding-left": "100px",
        "padding-right": "100px"
      },
      "quantityInput": {
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "cart": {
    "styles": {
      "button": {
        "font-weight": "bold",
        "font-size": "18px",
        "padding-top": "17px",
        "padding-bottom": "17px",
        ":hover": {
          "background-color": "#ff0042"
        },
        "background-color": "#ca0027",
        ":focus": {
          "background-color": "#ff0042"
        },
        "border-radius": "7px"
      }
    },
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    },
    "popup": false
  },
  "toggle": {
    "styles": {
      "toggle": {
        "font-weight": "bold",
        "background-color": "#ca0027",
        ":hover": {
          "background-color": "#ff0042"
        },
        ":focus": {
          "background-color": "#ff0042"
        }
      },
      "count": {
        "font-size": "18px"
      }
    }
  }
},
      });
    });
  }
})();
/*]]>*/
</script>

But I really want just a simply HTML link to go to the product check out page

Buy Now

How can I do this? Is there anyway to keep the styling that I want and use and just have the buy button open the link?

Thanks

Answer 1

Here two really easy options:

1. just use the checkout API it's a rest API, you can use it with fetch, axios, ajax here more details

2. if you need something more simple you can do even a classic form post using the ajax cart api you need the product's variant Id plus the quantity.

to find the variant's ID, on shopify admin go to the product page and add .xml at the end. change

your-store.myshopify.com/admin/products/2373831663781

to

your-store.myshopify.com/admin/products/2373831663781.xml

after that you can do something like this:

await fetch('your-store.myshopify.com/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    id: 'XXX',
    quantity: 1,
  })
});

it response with a json, or you can use /cart/add on a form submit, it will redirect to checkout.