The editor uses a block-based system where you can add, remove, and configure individual elements to create sophisticated campaign layouts and interactions.
Editor Interface Overview
The campaign editor is divided into three main areas: Left Panel: Block and sub-block management Center Area: Real-time visual preview Right Panel: Settings and configuration optionsBlock and Sub-Block Management
Blocks are the primary elements of your campaign template:- Container elements: Headers, sections, columns
- Content elements: Images, text, product displays
- Interactive elements: Buttons, links, forms
- Text content: Headlines, descriptions, calls-to-action
- Media elements: Images, videos, icons
- Product content: Individual products, categories, collections
Template Examples
Collage Template- Capacity: Up to 3 visual elements
- Content types: Images, products, or categories
- Use cases: Featured collections, promotional highlights, brand storytelling
- Customization: Individual sizing, positioning, and overlay text
- Capacity: Up to 12 columns
- Flexibility: Add varied content to each column
- Content mixing: Combine text, images, products within columns
- Responsive design: Automatic stacking on mobile devices
Visual Preview System
Real-Time Preview Features
Live updates: Changes appear immediately as you adjust settings Responsive preview: Toggle between desktop, tablet, and mobile views Content simulation: See how dynamic content will display Interactive testing: Test buttons, links, and hover effectsPreview Limitations and Solutions
Styling differences: Your site’s CSS may affect final appearance Font variations: Site fonts may differ from preview fonts Layout integration: Surrounding content may impact campaign display For accurate preview:- Use the PureClarity Debug Toolbar on your live site
- Test campaigns in staging environments before publication
- Check appearance across different page types and devices
Preview Testing Best Practices
Multi-device testing: Verify appearance on desktop, tablet, and mobile Browser compatibility: Check across different browsers Page context testing: Preview on homepage, product pages, and cart Loading simulation: Test appearance during page loadSettings Configuration
Block-Level Settings
When you select any block or sub-block, the right panel displays relevant configuration options: Content settings:- Text content: Headlines, descriptions, body text
- Image management: Upload, resize, alt text, linking
- Product selection: Manual picks or dynamic criteria
- Link configuration: URLs, targets, tracking parameters
- Colors and fonts: Typography and color scheme customization
- Spacing and sizing: Margins, padding, and element dimensions
- Alignment options: Text alignment, element positioning
- Visual effects: Hover states, transitions, animations
- Click actions: What happens when elements are clicked
- Display conditions: When elements show or hide
- Animation triggers: How elements appear and move
- Responsive behavior: How elements adapt to screen sizes
Template-Level Settings
Access overall campaign settings by clicking “Edit Settings”: Campaign identification:- Campaign name: Internal reference for organization
- Description: Purpose and goals documentation
- Tags: Organizational and filtering labels
- Overall dimensions: Width, height, aspect ratios
- Spacing standards: Consistent margins and padding
- Typography rules: Font families, sizes, line spacing
- Color schemes: Brand colors and design consistency
- Loading behavior: How campaign appears on page
- Interaction tracking: Click and engagement monitoring
- Performance optimization: Loading speed and efficiency
- Accessibility features: Screen reader compatibility, keyboard navigation
Advanced Customization Options
Dynamic Content Configuration
Product recommendations:- Source criteria: How products are selected
- Filtering rules: Price, category, brand restrictions
- Quantity limits: Minimum and maximum products displayed
- Fallback content: What shows when insufficient products available
- Customer-specific content: Name, preferences, history
- Behavioral triggers: Content based on current actions
- Segment targeting: Different content for different audiences
- Geographic customization: Location-based content variations
Interactive Element Setup
Button configuration:- Call-to-action text: Clear, compelling messaging
- Link destinations: Product pages, categories, external URLs
- Visual styling: Colors, fonts, hover effects
- Tracking setup: Analytics and attribution configuration
- Input fields: Email, preferences, feedback collection
- Validation rules: Required fields, format requirements
- Submission actions: Where data goes and what happens next
- Error handling: User-friendly error messages and guidance
Attribution Configuration
Control what happens when customers interact with campaign elements: Audience attribution:- Segment assignment: Add customers to automatic segments
- Behavioral tagging: Track interaction types and patterns
- Journey mapping: Understand customer path through site
- Persistence: How long attribution data remains active
- Product relationship: Link clicks to specific products
- Revenue tracking: Credit sales to campaign interactions
- Conversion attribution: Connect campaigns to purchase decisions
- Performance measurement: ROI and effectiveness analytics
- User properties: Set custom data points for customers
- Preference tracking: Record customer choices and interests
- Behavioral data: Capture interaction patterns and preferences
- Segmentation data: Information for future targeting
Attribution settings enable sophisticated customer journey tracking and performance measurement. Learn more about implementation in Campaign Attribution and Click Total.
Quality Assurance and Testing
Pre-Launch Checklist
Content accuracy:- Text proofreading: Check spelling, grammar, and messaging
- Image quality: Verify resolution, format, and loading
- Link testing: Ensure all URLs work correctly
- Product data: Confirm accurate pricing and availability
- Brand alignment: Colors, fonts, and style match brand guidelines
- Layout balance: Proper spacing and element arrangement
- Responsive design: Appropriate appearance across devices
- Accessibility: Alt text, contrast ratios, keyboard navigation
- Interactive elements: Buttons, forms, and links work properly
- Dynamic content: Recommendations and personalization display correctly
- Performance: Campaign loads quickly and doesn’t slow page
- Attribution: Tracking and analytics capture interactions properly
Common Issues and Solutions
Preview discrepancies:- CSS conflicts: Site styles overriding campaign styles
- Font loading: Custom fonts not available in preview
- JavaScript dependencies: Site features affecting campaign behavior
- Staging environment testing: Test on replica of live site
- CSS inspection: Use browser developer tools to identify conflicts
- Progressive testing: Test individual elements before combining
- Image optimization: Compress images without quality loss
- Content simplification: Remove unnecessary elements for speed
- Loading prioritization: Load critical elements first
- Caching strategy: Optimize for repeat visits