The Campaign Preview and Settings editor is your visual workspace for customizing campaign appearance, functionality, and behavior. This interface provides real-time preview capabilities alongside comprehensive configuration options.
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 options

​
Block 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
Sub-blocks are nested elements within blocks:
  • 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
Column Template
  • 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 effects
The 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 load

​
Settings 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
Visual settings:
  • 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
Behavioral settings:
  • 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
Display parameters:
  • 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
Functional behavior:
  • 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
Personalization elements:
  • 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
Form elements:
  • 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 attribution:
  • 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
Custom attributes:
  • 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
Visual consistency:
  • 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
Functional testing:
  • 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
Resolution strategies:
  • 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
Performance optimization:
  • 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
The Campaign Preview and Settings editor provides powerful tools for creating engaging, effective personalization campaigns that align with your brand and drive customer engagement. Take advantage of the real-time preview and comprehensive customization options to create campaigns that resonate with your audience and achieve your business goals.