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 from your website. It can look like this:

Overlay example

To use the Checkout Page Overlay, you need to be able to add Javascript to your site, as well as be able to add HTML tags. If you're not sure how to do this on your site, please get in touch so we can find a solution together.

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.

The easy way

The easiest way to use the modal is to click on one of your Pages in your dashboard and press the 'Use' button. This will show you installation instructions specific to the page you have open, meaning you only have to copy/paste the snippets onto your site.

The manual way

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.

<script type="text/javascript" src="https://checkoutpage.co/js/overlay.js" defer></script>

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.

Seller ID

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.

Page slug

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.

Need more help?

Contact us via the Chat in the bottom-right corner or via email on info@checkoutpage.co