The Checkout Lightweight Frontend Experience (LiFE) feature allows you to add customizable text fields, checkboxes, and other elements to a variety of locations on the checkout page.
Common uses for Checkout LiFE include:
- An HTML snippet including a link to more information.
- A checkbox to acknowledge terms and conditions.
- A short text input field for a VAT ID.
- A long text input field for a gift message.
LiFE element types
The following table shows the supported user interface elements and potential use cases for each.
A small text field, intended for a few words.
A large text area, intended for longer text responses.
An HTML snippet.
LiFE anchor locations
You can place an element at one of the following anchor points in the checkout experience:
- Above the customer info section — customer_info
- Below the shipping address section — shipping
- Below the billing address section — billing_address_after
- Below the shipping method section — shipping_lines
- Below the payment method section — payment_gateway
- At the bottom of the main page, below the button to continue checkout — below_actions
- At the top of the summary sidebar — summary_above_header
The following screenshots show these anchor locations on the three page checkout.
Add a LiFE element
- Navigate to System > Configuration, and click Checkout in the Sales section of the left-hand menu.
- In the Current Configuration Scope drop-down menu, select Main Website.
- Expand the Bold Checkout Integration (LiFE) Elements section.
- In the Custom elements section, select Add and set the desired properties for your element.
- Select your preferred Location as outlined in LiFE anchor locations above.
- Select the element Type as outlined in LiFE element types above.
- Select whether customers are Required to respond to the element.
- Enter the Field key. This is the name of the metadata that is added to the order. This is the name of the metadata that is added to the order. For example, if the field key is set to giftmessage, you will see giftmessage: Happy birthday! in the order notes.
- Optional: Enter a name for your element under Label.
- Optional: Under Placeholder, enter the placeholder value of the element. The behavior of this field depends on the element type.
- Text or Textarea: This value appears in the input field and disappears when the shopper begins typing.
- Checkbox: This value appears below the input label.
- Optional: Enter the Default input. The behavior of this field depends on element type.
- Text or Textarea: Set this value to your chosen string. The customer deletes the default input and adds their own value.
- Checkbox: Set this value to true to make the checkbox automatically selected.
- Add an Index number. If you have two elements in the same location then you must order them as to which should appear first. If you are only creating one element in a location then set the index to 1.
- Click Save Config.