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
Click “Edit Settings” to access template-level configuration options that affect the entire campaign rather than individual blocks.
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 effectsThe preview shows campaign content within the editor environment. Actual appearance may vary based on your site’s existing CSS styling and theme configuration.
Preview 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