Product Generator Advanced Editor
Discover all advanced features of the product card editor
Product Generator Advanced Editor
The Product Generator advanced editor includes professional features for efficiently creating and editing product cards.
Editor Features
Smart Auto-save
The system automatically saves every 2 seconds when it detects changes:
- ✅ You don't lose work if you accidentally close
- ✅ Complete change history
- ✅ Visual indicator of save status
- ✅ Last save date visible
History System
Like Google Docs or GitHub:
- Undo (Ctrl/Cmd + Z): Reverts recent changes
- Redo (Ctrl/Cmd + Shift + Z): Restores undone changes
- Complete history: Access all previous versions
Rich Text Editor
The editor includes a complete toolbar:
- Bold (Ctrl/Cmd + B)
- Italic (Ctrl/Cmd + I)
- Underline (Ctrl/Cmd + U)
- Lists: Ordered and unordered
- Links: Add links to text
- Character counter: Shows characters in real-time
Real-time Validation
The editor automatically validates:
- ✅ Image URLs: Verifies they are accessible
- ✅ Required fields: Shows errors if missing
- ✅ Data format: Validates types and formats
- ✅ Visual feedback: Status indicators
Image Management
Image Gallery
- Add images: From URL or library
- Delete images: With confirmation
- Reorder: Drag & drop to change order
- Main image: Select with star button ⭐
Main Image Selector
- Click the star ⭐ to mark as main
- Main image is displayed prominently
- Automatically removed if you delete the main image
URL Validation
- Verifies URLs are valid
- Checks that images are accessible
- Shows errors if URL doesn't work
Templates
Using Existing Templates
- Select a template from the selector
- Content is applied automatically
- You can edit and customize afterwards
Available Templates
- Basic: Simple and clean structure
- Advanced: With multiple sections
- Custom: Created by your team
Restore Template
If you modify content too much, you can restore the original template at any time.
Responsive Preview
Before finishing, you can preview:
- 📱 Mobile: How it looks on mobile devices
- 💻 Tablet: View for tablets
- 🖥️ Desktop: Full view on desktop
Keyboard Shortcuts
Navigation
- Tab: Next field
- Shift + Tab: Previous field
- Esc: Cancel editing
Editing
- Ctrl/Cmd + S: Save
- Ctrl/Cmd + Z: Undo
- Ctrl/Cmd + Shift + Z: Redo
- Ctrl/Cmd + K: Show help
Text Formatting
- Ctrl/Cmd + B: Bold
- Ctrl/Cmd + I: Italic
- Ctrl/Cmd + U: Underline
Editor Tabs
The editor is organized in tabs:
📝 Content
- Title
- Short description
- Long description
- All configurable fields
🖼️ Images
- Complete gallery
- Main image selector
- Add/remove images
- Reorder with drag & drop
📊 Information
- Prices (minimum, maximum, average)
- Information sources
- Product metadata
- Generation data
🔄 History
- Previous versions
- Changes made
- Restore versions
- Compare changes
Editor States
Visual Indicators
- 💾 Saved: Everything saved correctly
- ⏳ Saving: Saving changes...
- ⚠️ Error: Error saving
- ✏️ Editing: There are unsaved changes
Action Feedback
- ✅ Success: Green toast notification
- ❌ Error: Red toast notification
- ⚠️ Warning: Yellow toast notification
- ℹ️ Info: Blue toast notification
Best Practices
Organization
- Use templates to maintain consistency
- Set a clear main image
- Complete all relevant fields
- Review preview before finishing
Editing
- Save frequently (even if automatic)
- Use history if you need to revert changes
- Validate URLs before saving
- Review character counter
Images
- Select high-quality images
- Use images relevant to the product
- Set a featured main image
- Maintain logical order in gallery
Troubleshooting
Auto-save doesn't work
- Check internet connection
- Verify team permissions
- Review browser console
Can't undo changes
- Verify there are changes in history
- Check that history is enabled
- Try reloading the page
Images don't load
- Verify URLs are valid
- Check that images are accessible
- Review CORS permissions