How to use Shopify order note element?

The Order Note element allows customers to add optional instructions or comments related to their order during checkout. This is useful for special requests such as delivery instructions, gift messages, or customization notes. 

I. Order Note Element - Content Settings

The Content tab controls the text displayed inside the order note textarea.

Textarea settings

• Label text
  Defines the label shown above the textarea.
  Example: Order note (optional)

• Placeholder text
  Sets the hint text displayed inside the textarea to guide customers on what they can write.
  Example: Special instructions for your order

These fields help customers understand that the order note is optional and what type of information they can enter.

II. Order Note Element - Basic Settings

The Basic tab manages layout, size, and visual structure of the Order Note element.

Element ID

• A unique identifier for the element, used for custom styling or scripting.

Alignment

• Controls the horizontal alignment of the Order Note within its container (left, center, or right).

Size

• X / Y: Adjusts the element’s position using pixel values.

• Width: Sets the width of the textarea (e.g., 300px).

• Height: Automatically adjusts based on content.

Container settings

• Customize spacing, background, and layout of the overall Order Note container.

Label settings

• Adjust typography, spacing, and appearance of the label text.

Textarea settings

• Control the appearance of the textarea, including padding, borders, and text styling.

III. Order Note Element – Advanced Settings

The Advanced tab allows you to control interactions, device visibility, animations, and custom styling for your text element.

Display on

Control where the text will be visible:

• Desktop – show/hide text on desktop devices.
• Mobile – show/hide text on mobile devices.

This helps you optimize the layout for different screens (responsive design).

Animation

Bring your text to life with animation effects.

• Type: Choose an animation style (e.g., fade, slide, bounce).
• Loop: Set how many times the animation repeats.
• Duration: Adjust how long the animation lasts (in seconds).
• Delay: Add a delay before the animation starts.

Custom CSS

• Turn this on to apply your own CSS code for advanced styling.
• This is especially useful for developers or advanced users who want unique effects beyond the built-in options.

=> The Advanced tab gives users more control, interactivity, and professional effects, making the text stand out and adapt perfectly to any device.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io