Sell your products in a modal on your site
You can easily sell your products in a modal on your own website by using the Checkout Page Overlay. The advantages of using Checkout Page this way are that your customers don't have to leave your site, which increases trust and ensures a faster checkout.
What is the Overlay?
The Overlay is a modal in which a visitor to your site can buy your products. This is especially useful when you want to sell directly from your website. It can look like this:
Can I sell multiple products on one page?
Yes, this is one of the benefits of using the Overlay. You can add multiple Buy buttons to your site, where each of the button can open a different checkout Overlay.
Can a customer buy multiple products at the same time?
Currently this is not possible. While the Overlay allows you to sell multiple products on one page, it doesn't allow a customer to buy multiple products in once. Let us know if this is something you're looking for, as we're gauging interest to see if we want to add this in the future.
Let's find out how you can sell your products on your site with the Overlay.
1. Add the Overlay script to your HTML
In the HTML of your page, preferably at the bottom, you have to add the following code.
2. Add buy buttons to your site
For each product you want to sell, you have to add button. This is what your visitor will click on to open the checkout overlay. Your button can look like this:
<button class="cp-button" data-seller="5aaa701149321a00145c99b9" data-checkout="ux-animation-tool-license" >
It's important to keep the class
cp-button, as that's how our script will find the button to make it open the overlay.
In the data tag
data-seller, you add your 'seller ID' or your 'seller name'. You can find this by going to one of your checkout pages and copying the part of the URL before the page title.
In the data tag
data-checkout, you add the URL slug of the page you want the overlay to show. You can find this by going to one of your checkout pages and copying the last part to the URL.
3. Save and check!
That should be it! Now save/upload your changes (this depends on your website) and click the buttons you've added. If you want to test it, add a data tag
data-testing to your button. Don't forget to remove this after testing.