1. Home
  2. Documentation
  3. Tutorials
  4. Extending your website: Create a funnel for a quick checkout

If you would like to create a funnel on your website, like a button, from where the customers would go to complete the order, while keeping your business branding in place, you are able to create the URL that will take the customers straight to the Gigrove checkout – skipping the product page and the cart page. This will come handy for brands and businesses who already have the website, yet they want to add a fast checkout experience. In this tutorial, we will guide you on how to create the button and the URL.

1. First, we want to create the URL that will redirect your customers directly to the Gigrove checkout.

To make this happen, we would need to add a parameter in the URL: /checkout/?add-to-cart=5699479. 

“5699479” being the ID of your product or a service.

You can find the ID of the product that you want to offer on your website, in the URL, when you are editing the gig, from the “My gigs” page:

 

-Here’s the full live example of the Direct Checkout URL for a product with “5699479″ ID: https://gigrove.com/checkout/?add-to-cart=5699479

This redirect would work with your custom domain as well. You would just replace gigrove.com with your custom domain name. Note that this redirect can only work with Standard products.

 

2. Now we want to create the button. Please copy/paste the code below to insert the “Checkout” button on your website. Make sure to replace the URL below with your Checkout URL. You can skip this step if you’ve already created the button on your website:

<a href="https://gigrove.com/checkout/?add-to-cart=5699479" class="CheckoutButton">Checkout</a>


.CheckoutButton {
background:linear-gradient(to bottom, #000000 5%, #0d0d0d 100%);
background-color:#000000;
border-radius:28px;
border:1px solid #000000;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
}
.CheckoutButton:hover {
background:linear-gradient(to bottom, #0d0d0d 5%, #000000 100%);
background-color:#0d0d0d;
}
.CheckoutButton:active {
position:relative;
top:1px;
}

And that’s about it! Your customers can now quickly complete the checkout, without leaving your domain name. If you wish to create a redirect after successful checkout, and send the customer back to your main website, you can refer to this article.