Customize your return page

Return Page Customization Interface

The return page customization interface provides page-by-page editing with live preview on desktop and mobile devices.

• Left Panel: Customization forms for text, colors, and styles
• Right Panel: Live preview showing desktop and mobile views
• Top Bar: Page selector, language selector, and save buttons
• Real-time updates: Changes appear instantly in preview

What You Can Customize

Comprehensive customization options across all customer touchpoints:

• 11 Journey Pages: From order lookup to success confirmation
• Text Content: Titles, labels, button text, instructions, and messages
• Button Colors: Custom colors for each button using color picker
• Multi-Language: Support for multiple languages with language-specific content
• Preview Modes: Desktop and mobile view previews

All 11 Journey Pages

You can customize each of these customer journey pages:

• 1. Find Order - Where customers enter email and order number
• 2. Order List - Display list of orders to select from
• 3. Reason Popup - Modal for selecting return reasons
• 4. Return Review - Review return request before submission
• 5. Return Refund - Select refund method (exchange, store credit, etc.)
• 6. Courier List - Choose courier/shipping method
• 7. Return Success - Confirmation page after return submission
• 8. Exchange List - List items available for exchange
• 9. Exchange Variant - Select size/color variant for exchange
• 10. Exchange Review - Review exchange before submission
• 11. Exchange Success - Confirmation page after exchange submission

Navigate to Customization Page

Access the return page editor from your dashboard.

1. 1Log in to your Returndotai dashboard
2. 2Click on "Customization" in the left navigation menu
3. 3Select "Return Page" or "Customer Return View"
4. 4Click the "Edit" button to open the customization interface
5. 5The editor will load with the "Find Order" page selected by default

Understanding the Interface

The customization interface has three main sections:

• Top Bar:
• • Page selector dropdown - Switch between 11 pages
• • Language selector - Choose language to edit
• • View toggle - Switch between desktop and mobile preview
• • Save Draft button - Save without publishing
• • Publish button - Save and make live
• • Reset button - Restore default content
• Left Panel:
• • Customization forms organized by sections
• • Text input fields for content
• • Color pickers for buttons
• • Required field indicators
• Right Panel:
• • Live desktop preview (default)
• • Live mobile preview (switchable)
• • Browser chrome simulation
• • Real-time update as you type

Choose Your Journey Page

Select which page in the customer journey you want to customize.

1. 1At the top of the editor, locate the "Page" dropdown
2. 2Click the dropdown to see all 11 available pages
3. 3Select the page you want to customize (e.g., "Find Order")
4. 4The editor will load the customization options for that page
5. 5The preview will update to show that page

Deep Linking

The URL updates when you select a page, allowing you to bookmark or share specific page editors.

• Example URL: /customization/customerReturnView?page=find-order&view=desktop
• You can return to a specific page by using the URL
• Browser back/forward buttons work to navigate between pages

Edit Text and Labels

Customize all text content for the selected page.

1. 1In the left panel, find the text field you want to edit
2. 2Click into the input field
3. 3Type your custom text
4. 4The preview on the right updates in real-time
5. 5Required fields are marked with an asterisk (*)
6. 6All changes are tracked - you'll see an unsaved changes indicator

Common Text Fields by Page

Different pages have different customizable fields:

• Find Order Page:
• • Title (required)
• • Instruction text
• • Email label (placeholder)
• • Order number label (placeholder)
• • Button text
• • Footer policy text
• Order List Page:
• • Header text
• • Button 1 text
• • Button 2 text
• Reason Popup:
• • Header text
• • Quantity label
• • Reason label
• • Details label
• • Upload label
• • Submit button text
• Return Review Page:
• • Progress step labels (4 steps)
• • Summary section labels
• • Items section text
• • Return method text
• • Contact information labels
• • Submit button text
• • Disclaimer text
• Return Success Page:
• • Header text
• • RMA number label
• • Status section labels
• • Notification text
• • Summary labels
• • Contact details labels

Use the Color Picker

Customize button colors with a professional HSV color picker.

1. 1Scroll to the "Button Color" section in the left panel
2. 2Click on the color preview box to open the color picker
3. 3Use the 2D saturation/brightness selector to choose your color
4. 4Adjust the hue using the rainbow gradient slider below
5. 5The hex color code updates automatically
6. 6You can also paste a hex code directly (e.g., #FF5733)
7. 7The preview updates instantly with the new color
8. 8Click outside the picker to close it

Pages with Multiple Buttons

Some pages have multiple buttons you can customize separately:

• Order List Page: Two buttons (Button 1 Color, Button 2 Color)
• Other pages: Single button color
• Each button can have a different color
• Colors are applied to the background of the button

Switch Between Languages

Provide content in multiple languages for international customers.

1. 1At the top of the editor, locate the "Language" dropdown
2. 2Click the dropdown to see all available languages
3. 3Select the language you want to edit (e.g., "Spanish", "French")
4. 4The editor loads the content for that language
5. 5If no custom content exists, you'll see default content in English
6. 6Edit the text fields in the selected language
7. 7Save your changes
8. 8Repeat for other languages as needed

Managing Languages

Languages are managed separately in the system:

• Only published languages appear in the language dropdown
• Default language is English (en)
• Each language stores its own translations
• Colors and styles are shared across all languages
• You can have different text content for each language

Desktop and Mobile Preview

See how your customizations look on different devices.

1. 1The preview panel on the right shows your page in real-time
2. 2By default, you see the desktop view
3. 3Click the view toggle to switch to mobile preview
4. 4Mobile preview shows how the page appears on phones
5. 5Both previews update instantly as you make changes
6. 6The preview includes browser chrome (address bar) for context

Active Field Highlighting

See which element you're editing in the preview:

• Click into any text field in the left panel
• The corresponding element in the preview highlights with a blue ring
• This helps you identify exactly what you're editing
• Works for all text fields, buttons, and labels

Save Your Customizations

You have three save options:

• Save Draft: Click "Save Draft" to save without publishing
• • Changes saved but not visible to customers
• • Useful for work-in-progress
• • You can continue editing later
• Publish: Click "Publish" to save and make live
• • Changes become immediately visible to customers
• • Replaces current published content
• • Recommended when customization is complete
• Save (default): Saves to published version
• • Same as clicking Publish
• • Goes live immediately

Unsaved Changes Warning

The system tracks unsaved changes to prevent data loss:

• If you have unsaved changes and try to leave the page, you'll see a warning
• Browser shows "You have unsaved changes" confirmation
• You can choose to stay and save, or leave and discard changes
• Always save before switching pages or closing the editor

Restore Default Content

Reset any page back to its original default content.

• 1. Click the "Reset" button at the top of the editor
• 2. A confirmation dialog appears
• 3. Click "Confirm" to proceed with reset
• 4. The page resets to system default content
• 5. All custom text and colors are removed for that page
• 6. Only the selected page and language are reset
• 7. You can undo by not saving and refreshing the page

⚠️ Important: Reset Warnings

Reset removes ALL customizations for the selected page and language

• Action cannot be undone after you save
• Other pages and languages are not affected
• Consider saving a backup of your content before resetting
• You can choose not to save after reset to keep your customizations

Effective Customization Tips

Start with Find Order page - customers see this first

• Keep text concise and clear - long text may not fit in preview
• Use your brand colors for buttons for consistency
• Test on both desktop and mobile previews
• Save frequently to avoid losing work
• Use Save Draft while working, Publish when ready
• Customize success pages to reinforce your brand
• Keep required fields filled - they ensure good UX

Multi-Language Best Practices

Complete customization in your primary language first

• Then copy and translate to other languages
• Keep terminology consistent across languages
• Test each language to ensure text fits in the design
• Some languages (German, Russian) may need more space
• Consider cultural differences in messaging

Color Selection Tips

Follow these guidelines when selecting colors for your return portal buttons and elements:

• Use your brand's primary colors for consistency
• Ensure sufficient contrast between button color and text
• Test colors in both desktop and mobile previews
• Keep button colors consistent across similar pages
• Avoid very bright or very dark colors that reduce readability
• Test your colors in different lighting conditions

Workflow Recommendations

Key points to understand:

• Customize pages in the order customers experience them:
• 1. Find Order
• 2. Order List
• 3. Reason Popup
• 4. Return Review
• 5. Return Refund
• 6. Courier List
• 7. Return Success
• Save after each page completion
• Use the preview extensively before publishing
• Have someone else review your changes
• Test the actual customer journey after publishing

Common Issues and Solutions

Key points to understand:

• Issue: Changes not showing in preview
• → Solution: Ensure you're clicking in the text field. Preview updates on focus and change.
• Issue: Can't save changes
• → Solution: Check that all required fields (marked with *) are filled.
• Issue: Lost customizations after refresh
• → Solution: Always click Save or Publish before leaving the page.
• Issue: Text doesn't fit in design
• → Solution: Shorten your text or check mobile preview for better fit.
• Issue: Color picker not opening
• → Solution: Click directly on the color preview box.
• Issue: Language not showing
• → Solution: Ensure the language is published in the language settings.
• Issue: Preview not updating
• → Solution: Try refreshing the page or switching to a different page and back.

Getting Support

For issues not covered here, contact Returndotai support via live chat in the dashboard or email support@returndotai.com. Provide: page you're customizing, language selected, what you're trying to do, and any error messages.