Make a selection

Add Lightweight Frontend Experience (LiFE) to Checkout

Laurel
Laurel
  • Updated

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.

Element Type

Description

Use Cases

Text

A small text field, intended for a few words.

  • VAT ID
  • Member ID
Textarea

A large text area, intended for longer text responses.

  • Order notes
  • Shipping instructions
Checkbox

A checkbox

  • Tax exempt
  • Terms and conditions acknowledgement
HTML

An HTML snippet.

  • Link to shipping FAQs
  • Link to your return policy

 


 

LiFE anchor locations

You can place an element at one of the following anchor points in the checkout experience:

  1. Above the customer info section — customer_info
  2. Below the shipping address section — shipping
  3. Below the billing address section — billing_address_after
  4. Below the shipping method section — shipping_lines
  5. Below the payment method section — payment_gateway
  6. At the bottom of the main page, below the button to continue checkout — below_actions
  7. At the top of the summary sidebar — summary_above_header

Example:
The following screenshots show these anchor locations on the three page checkout.

Customer page
LiFE three page customer

Shipping page
LiFE three page shipping

Payment page
LiFE three page payment

 


 

Add a LiFE element

  1. Navigate to System > Configuration, and click Checkout in the Sales section of the left-hand menu.
  2. In the Current Configuration Scope drop-down menu, select Main Website.

    Main Website

  3. Expand the Bold Checkout Integration (LiFE) Elements section.

    LiFE element

  4. 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.
  5. Click Save Config.