Order Note Widget

The Order Note widget allows customers to include special instructions or comments about their order during the checkout. As they proceed to the payment or thank you page, they encounter the Order Note, which provides an input field to add a special request, a specific delivery instruction, or share something important. For instance, the customer may leave a note like “This order is a gift. Please include a note saying Happy Birthday (Recipient's Name) with the package”. Customers need to type the info in the Order Note input, and their message will be displayed in the Notes from customer part of the Order Details section in Dashboard > Orders.

Adding an Order Note Widget

To add an Order Note widget:

Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
Go to Pages > Ecommerce > Checkout Payment/Thank You page.
Open the Widgets list on the left panel.
Type the widget name in the search bar or open the Ecommerce > Cart Widgets grouping.
Drag and drop the widget from the list onto the desired crafting area of the Layout Canvas.

Configuring the Order Note Widget

Once you have added the Order Note widget, click the widget to activate the Property Panel, where you can customize its Styles and Settings according to your preferences.

To configure the Order Note widget:

Go to Styles to modify the widget styling features:

Select the CSS design framework States: Normal or Hover.
Make the necessary configuration of principal styling features (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.

2. Go to Settings and expand Visibility to modify the widget visibility on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Tip: You can also access the UI Elements in the Design System from the upper-right corner of the Property Panel. Select one as a base for the widget, or create a new UI Element and style it according to your preferences.

Modifying the Order Note Widget Elements

Once you have configured the Order Note widget, you can modify its elements according to your preferences. This allows you to define the appearance and functionality of the widget on your website.

The following elements are available:

Label Element

The element allows you to add clear instructions or context for users about what to input, such as special instructions or delivery preferences.

To do so:
1. Click the Label element.
2. Configure the principal styling features (see Global Styles).
3. Edit the State of the label to Normal, Hover, or Active.

Form Item Element

The element allows you to customize the input fields, states, modes, and placement for optimal visibility.

To do so:
1. Click the Form Item element.
2. Go to Styles to configure:

The State of the form item into Normal or Hover.
The Mode of the form item into Normal or Error.
The principal styling features (see Global Styles).

3. Go to Content to configure:

The Label of the element. Enter the desired name.
The Placeholder of the element. Enter the placeholder text that you want your customers to see.
Enable/disable the Character Limit. If enabled, set the maximum number of characters allowed.

Tip: You can also access the UI Elements in the Design System from the upper-right corner of the Property Panel. Select one as a base for the Form Item element, or create a new UI Element and style it according to your preferences.

To do so:
1. Click the Dotted Menu on the Property Panel.
2. Select Reset Styles to discard the changes made to Form Item and restore its default style.
3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Text Area Element

The element allows you to opt for a larger text area for longer messages or detailed instructions, adjusting its size, character limit, and style.

To do so:
1. Click the Text Area element.
2. Edit the State of the element to Normal, Hover, Focus, or Active.
3. Edit the Mode of the element to Normal or Error.
4. Configure the principal styling features (see Global Styles).