🎨Create Checkout Buttons

Fully customisable checkout button dashboard

Customise your checkout button

After you've created your product, you can "Find a product" and select it to create and customise your checkout button to match your stores look and feel. This will increase conversion rates, can be installed in just 2 lines of code and it's got amazing features. Not only does it send your customers to a hosted checkout with your very own company logo but it has cashback, loyalty and follow up incentives to increase customer lifetime value.

It's not just a checkout button, it's what comes with it.

🎨 Customise

Customise your funky checkout button

Any colour, text, shape or size. You can customise these checkout buttons to suite the look and feel of your online store.

• Button text e.g. Subscribe

• Text Color

• Shape of Checkout Button

• Enable or Disable a Button Outline and choose a colour

• Select what size you want the checkout button to be

• Select a tagline for the checkout button

Configure your checkout button size

In order for your checkout button to display normally on your website, you first need to copy the “Checkout Button code” and paste it into a block that is at least 150px on your website.

There are also 5 basic size settings for the button:

1. Recommended (220 pixels by 40 pixels)

2. Small (150 pixels by 25 pixels)

3. Medium (250 pixels by 35 pixels)

4. Large (350 pixels by 40 pixels)

5. Responsive (Min width is 100px, max width 500px)

🏗Integrate

Integrate your checkout buttons

Click “Copy Script” to get the 2 lines of code that will be pasted into your online store.

1. “Main code”(Javascript) is pasted in the footer of our website (once off for all products)

2. “Checkout Button Code”(HTML) on your product page to show the checkout button + shopping cart 🏗

Once you have installed the "Main Code" into your footer or header, then you will not have to do it again. Any additional checkout buttons only need the "Checkout Button Code" to be added to your product page(online store).

Align your checkout button

In order to align the button, you must select any button size except responsive and then you need to add some style for the button. You will simply add an extra piece of code to your "Checkout Button Code", like example: "style=margin: 15px auto;" to centre it. Just compare your "Checkout Button Code" to know what your missing:

⏹Center:

<div productid="Your number" class="xion-subscription-button-wrapper"style="margin: 15px auto;"></div>

◀️ Left

<div productid="Your number" class="xion-subscription-button-wrapper"style="margin: 15px 0;"></div>

➡️ Right:

<div productid="Your number" class="xion-subscription-button-wrapper"style="margin: 15px 0 15px auto;"></div>

Please contact your service providers if you are having technical difficulties. Alternatively, contact us at [e-mail] or our support channel at https://xion.app

🛒 Upsell/Cross-sell

Increase your cart size for a more profitable sale

Looking to increase your cart size, just pay with crypto to unlock the follow up products feature. Then you can add some follow up checkout buttons to your original product so customers can add additional products to cart. It's recommended to add relatable or higher priced items to increase conversion rates and customer order value.

Example:

1. Create a shaving box subscription as the main checkout button

2. Click "Add Follow Up Product" to create a follow up checkout button for my aftershave kit

3. Now my customers will add the Shaving box subscription to cart and before they proceed the checkout they will be offered the option to add the aftershave kit to cart

Note: You need to create a main checkout button before you can “+Add Follow Up Product” and you need to pay with crypto to unlock this feature.

ℹ️ FAQ

FAQ

• Please Note: Insert the "Main Code" from any 1 of your checkout buttons "Copy Script" and paste it in your footer or header of your website. Once you've copied and pasted it, you never have to do it again. Only the "Checkout Button Code" will need to be pasted for every new checkout button.

• You cannot edit the price, billing interval or cycles of a saved recurring billing checkout button. Why? So that existing subscribers will not be affected and only pertains to new customers

• If a subscriber wants to pause their subscription indefinitely, they will need pay 12.5% of the total subscription price first. You get 10% and Xion gets 2.5% of the 12.5% amount paid. If you pause your checkout button then subscribers don’t pay 12.5%.

• The Dustbin icon can only be used to delete checkout buttons that have not been saved.  To Archive/Delete a saved checkout button you must do it in Management

• If your checkout button is not working please make sure the Main Code is pasted in the header or footer of your website, your Checkout Button Code is pasted on your product page(HTML) and your Checkout Button is Active in Management

• The Checkout Button is only available for products/services with no variants, as the price and title entered in the Checkout Button cannot change based on e.g. different type, size or colour

• Make sure to put the Billing Interval and Billing Cycles of your Checkout Button into your websites product description, to let your customers know when and how many times they will be billed e.g. 28th of every Month

• You need to save in order to “+Add Follow Up Product”