Order Notes
The Order Notes Widget is a powerful tool designed to enhance communication between you and your customers. By allowing shoppers to leave special instructions or messages during the checkout process, you can improve order accuracy and provide a more personalized service experience.
Playbook
"Stop the guessing game and reduce follow-up emails. Transform your cart into a communication hub that captures vital delivery instructions and personalization requests before the order is even placed"4.
The "Why" & The Metrics
Primary Metric Impact: Reduction in Customer Support (WISMO) tickets and improved Order Accuracy.
The Psychological Trigger: Confidence & Control — Shoppers feel more secure knowing their specific needs (like "leave at back door") are acknowledged
Best Fit Industries: Gifting, Home Decor, Fragile Goods, and Food/Beverage.
Strategic Use Cases (The "Plays")
Play #1: The Operational Optimizer (Activation)
The Concept: Standard capture of basic delivery instructions.
The Logic: Prevents failed deliveries by gathering gate codes or specific apartment directions.
Configuration Strategy:
Trigger/Condition: Show to all users in the Cart.
Key Setting: Set the Placeholder Text to "Enter delivery instructions or gate codes here...".
Play #2: The Gifting Personalizer
The Concept: Encouraging customers to add a short gift message.
The Logic: Increases the perceived value of the purchase without adding physical overhead.
Configuration Strategy:
Trigger/Condition: Use Audience Segmentation to show only when "Gift" products are in the cart.
Key Setting: Use Required Input if the store offers a dedicated card-writing service.
Play #3: The Eco-Friendly Switch
The Concept: Collecting packaging preferences (e.g., "Minimal packaging please").
The Logic: Appeals to sustainable shoppers and potentially reduces material costs.
Configuration Strategy:
Key Setting: Use the Style Tab to make the background color stand out so the note field isn't missed.
Copy/Creative Idea: "Is this a gift? Add a personal note or request minimal packaging here".
Pro-Tips & Constraints
Smart Constraint: This widget does not support product variant selection; it is strictly for text input20.
Optimization Tip: Keep placeholder text friendly and specific to the most common request you receive to maximize engagement.
Deployment Note: Verify that the widget is only placed in the Cart Zone to ensure data is passed correctly to the Shopify Admin.
Overview
Widget Name: Order Notes Widget
Primary Location: Cart Page
Core Purpose: Captures customer feedback, delivery instructions, or packaging preferences directly within the order details.
Key Features
Direct Integration: Notes are automatically passed to your Shopify Admin order notes field.
Instructional Clarity: Provides a dedicated text input area for customers to specify needs (e.g., "Please leave at the back door" or "Eco-friendly packaging only").
Enhanced Service: Reduces follow-up emails by gathering essential details at the point of sale.
Configuration Guide
Setting up your Order Notes widget is a straightforward process. Follow these steps to get started:
Step 1: Create the Widget
Navigate to the Create Widgets section in your dashboard.
On the Add New Widget page, fill in the following:
Widget Title: For internal organization.
Short Description: A brief note on the widget’s purpose.
Template: Select a pre-designed template that fits your store's aesthetic.
Step 2: Select and Customize
Once you have selected your template, you will move into the customization interface, which is divided into three main tabs:
1. Content (General Settings)
This section controls the logic and labels of your widget.
Title & Subtitle: Toggle these on or off to provide context to the user.
Input Requirements: Set the note field as Optional or Required.
Placeholder Text: Customize the ghost text inside the box (e.g., "Add your message here...").
Button Controls: Adjust button types, positions, and icons to match your workflow.
2. Style
Align the widget with your brand’s visual identity:
Typography: Adjust font size, weight, and color.
Background: Modify the widget container's background color.
Spacing: Fine-tune margins and padding for a clean look.
3. Advanced
For power users who need extra control:
Device Visibility: Choose whether to show the widget on Desktop, Mobile, or both.
Custom CSS: Insert your own code snippets to achieve unique styling effects not available in the standard editor.
Publishing Your Configured Widget Live
This following documentation section provides the final, detailed steps required to publish your fully configured widget and make it visible to customers on your live storefront.
01. How to successfully setup a widget
02. Understanding and Creating Audiences
03. Creating Placements and Zones
05. Displaying Your Widgets on the Storefront
After saving your changes, your widget will be live on your Cart page. We recommend visiting your storefront to verify the layout and functionality.
Pro Tip: Keep your placeholder text friendly and specific to encourage customers to provide the information you need most!