Customise your Arlo checkout and forms

The following article explains how to settings available and design of your Arlo checkout and forms. If you are looking at how to edit the fields available on your registration forms, see this article.

Important: If you cannot access these settings and would like to make changes, you may not be on the correct service plan or website integration option. If you would like to discuss this, please contact Arlo Support.

Please note: If you add a course to the checkout and do not add details to the checkout fields, then click on the "Add another course" button, and select a different course to add,when the checkout loads, with all fields empty, it triggers the "This field is required" on all required fields.

This is expected behaviour and how the checkout is meant to work.

Overview

You can choose a range of settings to be available or unavailable for your checkout, such as the ability to accept promotional codes, vouchers, or the default bill to preferences. You can also customize your checkout design if you are using the complimentary checkout option with our WordPress, Web Controls, or API Web Integration methods. If you are using the Arlo Starter Template or Arlo Website you cannot edit your checkout design. Arlo Website checkouts inherit the Arlo Website theme automatically, so don't need to be customised.

If you plan to use Web Controls, WordPress, or an API integration, ensure Arlo is connected to your website before making any of these changes.

Edit your standard checkout and forms (look and feel)

Open the Settings menu.
Edit the relevant settings

Select Website Integration.

In the Registration pages and checkout section, click Edit.

Ensure the Preview page is set to Checkout.

Note: If you are on Arlo Enterprise, you will also be able to edit your application form and admin portal page design from this page. The theme you set is shared between the checkout and forms.

Add a logo

From the Logo section, press Select file to upload. This will open the file browser on your computer.

Select the logo you wish to add to the form.
Select the Position and Logo Size, using the drop-down options.
Press Open. The logo preview will now show your selected logo.
Preview your changes and continue to make other changes and press Save.

Delete a logo

From the Logo section, click Delete.
Preview your changes and continue to make other changes and press Save.

Add background image

From the Main content area, Background Image section, press Select file to upload.
Note: This image repeats vertically and horizontally.

Select the image file you wish to add to the page.
Press Open.
Note: To remove the image, press Delete.
Preview your changes and continue to make other changes and press Save.

Edit background colour

From the Main content area, Background colour section, click to open the colour selector.

Drag the mouse to your selected colour, or enter the Hex Code of the colour. We recommend using a light colour here. Hint: If you don't know the hex code of the colour, find the hex code at colour-hex.

Preview your changes and continue to make other changes and press Save.

Typography

From the Typography section:
- Select the desired font for the heading text.

Select the desired font for the body/paragraph text.

Preview your changes, and continue to make other changes and press Save.

Colours

From the Colours section, press the colour selector.
Drag the mouse to your selected colour, or enter the Hex Code of the colour.

Preview your changes, continue to make other changes and press Save.

Custom checkout and forms

The custom checkout feature can be used by developers to customise, with HTML/CSS, your checkout and lead forms (and for Enterprise customers, the application forms) from within your platform. Using this feature you can customise the look and feel of these forms by, for example, selecting your own colours, fonts, and by adding company logos and menus. You can also use this feature to add a tracking script to your checkout.

Checkout and forms customisation is not available to customers using the Arlo Website.

Included on the feature page is a handy guide which shows the placement of the sections within the code of the wider page.

Note: For the header sections, all custom CSS should be placed in Custom header section whereas code for other items you would like in the header, such as company logos and tracking script, should be placed in the Header section.

Activate the custom checkout and forms

Open the Settings menu.

Select Website Integration.

In the Registration pages and checkout section, for the Custom theme, click Select & Activate.

Important: Activating a custom checkout will override the settings on your current Complimentary checkout. These settings are not saved and charges to redesign your checkout may apply.

Choose which section you wish to add code to and then click Edit.

Enter code as required and then press Save.

The preview of the checkout will be shown on the right-hand side of the screen. To toggle the preview between the forms types, select the form you would like to preview.

Edit fields and labels on checkout pages

In the advanced checkout settings, you can select the default payer, what checkout fields are mandatory, and re-label some checkout (order process) fields.

Access settings

Open the Settings menu.

Select Website Integration.

In the Registration pages and checkout section, click Advanced settings.

Change the default payer to organization or individual

Select the option for the default payer (who usually pays for the attendee(s)). This option allows the user to choose who the payer is, but defaults to one individual or organisation.

Press Save.

Example: Checkout showing organisation as default or selected by user

Force payer to be an individual (disallow organization payers)

If you only have individuals paying for attendees and want to avoid organisations being created in Arlo, you can remove the option to make the payer an organisation.

Turn the Organisation field off.

Press Save.

Example: Checkout showing organisation payer field disabled

Force payer to be an organization

If you only have organisations paying for attendees, you can remove the option to make the payer an individual, and force the selection and creation of an organisation.