06032 – How to setup Checkout Boxes

You can use pop-ups to accept online payments and add them to other pages. A button, link, or image block can all be used to trigger checkout boxes.

To Get Started:

  • Go to Boosters, then select Checkout Boxes. 
  • The Checkout Boxes dashboard will open. Click on the Plus (+) icon on the upper right hand corner.
    In the pop up window, add a name for the Checkout box.
  • Then click on the Next Step button.
  • Once done, the Checkout Box editor will open.

 

 

Checkout Boxes Settings

⚙ STEP 1 – SETTINGS:

Here you can configure your Payment Settings.
This is the primary setting to your checkout boxes.

Payment Settings
Order Bump Settings
Promo Codes
Form Pop Up
  • In the page editor, click on Form Pop-up in the left-sidebar menu.
  • The Form Pop Up settings will appear.

 

Adding Content to the Pop Up

Just like you can do on the page you can add any block and row you want to the pop up. Simply use your mouse and add a row by clicking on the green plus or add a block inside a row by clicking on the black plus.

On the left sidebar you will see the pop up options such as the Modal View, the background and border

Modal View

You have 2 options in the drop-down menu.
Standard – your Form Popup will appear as small popup window in the middle of the page.
Full Width – your Form Popup will cover the whole page.

Popup Background

  • Image
    Click on Browse to upload an image from your computer.
    OR, click Select from gallery if you want to use an image that’s already been uploaded or been used in another template or page. Upon click, the image gallery popup window will appear with all the available images listed.
  • Background Repeat
    This feature will repeat the image you upload for the background, so that you have multiples copies of the same image displayed across the popup.From the drop-down, you have different repeat options to choose from i.e.
    No Repeat: the uploaded image will display as is
    Repeat : the uploaded image will repeat vertically and horizontally across the popup
    Repeat-x: uploaded image will repeat horizontally only
    Repeat-y: uploaded image will repeat vertically only
  • Background Size
    This feature allows you to control how the uploaded image displays.
    Auto: the image will display as per it’s dimensions
    Cover : the image will cover the entire popup
    Contained : the image will display in top half of the popup.
    Parallax : the image will fill the width and height of the popup and all rows and blocks added to the popup will appear above the popup image as if it is floating.
    100% 100%: the image will fill the width and height of the popup and the image, rows and blocks added to the popup will move as one unit as you scroll down the page.
  • Background Color
    The feature allows you to change the background color of the popup.
    To change the background color, you can either add a Hex code in the field provided or choose a color from the Color Wheel.
    If the Color Wheel is closed, simply click on the Color Picker button to the right of the background field.
  • Background Color Opacity
    This feature allows you to change the opacity of the background image.
    Simply move the slider left or right to increase or decrease the transparency of the image.
Popup Border

This feature allows you to add a border around your popup.

  • Border Type
    You can select the style for your border.

TIP 01 In order to see the border around your popup, you need to select one of the style options available e.g. Solid, dashed or dotted. If the setting is left on No Border Style, your selection in the Borders setting will not work.

  • Border Size
    You can change thickness of the border by selecting the pixel width you prefer.
  • Border Radius
    You can add rounded edges to the border by selecting the relevant pixel or percentage width. You may now control each side by entering the number on the Top Left, Top Right, Bottom Right and Bottom Left box.
  • Border Color
    You can change the color used for the border by selecting a new shade from the Color Wheel.

Once you are done, click SAVE at the bottom.

 

⚡ STEP 2 – CONTENT

Here you can customize the look of your Checkout box.
The pop-ups now support our advanced page builder, which means you can adjust the layout of the pop-ups to match your brand.

You can edit any aspect of the page by clicking on the element in the page builder. The settings for that particular element will then appear in the left sidebar menu. The page builder will also allow you to to add custom elements called Blocks. Giving you full control of how your Checkout box will look and function.

Here are the available blocks that can be added on your checkout box: Text
Image
Video
Personal or Company
Billing Block
Payment Block
Order Block
Accept Terms Block
Order Bump Block

Once a Billing Block element has been included on your page, it will be grayed out in the left options panel. This means you cannot have multiple instances of the same Billing element on one Checkout box.

Once done, your Checkout Box will be ready!

 

⚙ STEP 3 – TRIGGERS

After you’ve configured the Checkout boxes, you’ll need to configure the trigger on the page where you’ll add them. You can utilize three separate triggers, for example. Button, Text Link, and Image Blocks.

  • Image block
    Here you can upload an image from your computer or select an image from your Image Gallery that when clicked, Form Pop-Up will appear.
  • Text Link block
    If you setup this option, you will be able to trigger your Checkout box via a simple Text Link.
  • Button block
    If you setup this option, you will be able to trigger your Checkout box via a button.

 

Additional options:
  • To Edit an Checkout Box, click on the Edit button to the right of the item.
  • To Duplicate a Checkout box, click on the Copy button to the right of the item.
  • To Delete an Checkout box, click on the (x) Delete button to the right of the item.