Accessing Placeholder Settings
Navigate to Stores > Configuration > PureClarity and locate the “Placeholder Images” section.
Placeholder Configuration Options
Product Image Placeholder
Purpose: Fallback image for products without imagesFormat: Full URL to image file
Fallback: Magento default placeholder if empty This image URL is sent to PureClarity when a product has no assigned image, ensuring recommendations always display product visuals. Best practices for product placeholders:
- Consistent dimensions - Match your typical product image size
- Brand appropriate - Use branded or neutral placeholder design
- High quality - Ensure images look professional in recommendations
- Optimized format - Use WebP or optimized JPG/PNG for performance
If no value is provided, Magento’s default product placeholder image will be used. This ensures functionality even without custom configuration.
Category Image Placeholder
Purpose: Fallback image for categories without imagesFormat: Full URL to image file
Fallback: Magento default placeholder if empty Used when category-based recommendations require images but the category has no assigned image. Use cases for category placeholders:
- Category recommendations - Visual category suggestions
- Navigation aids - Category browsing assistance
- Brand organization - When categories represent brands
- Promotional campaigns - Category-focused marketing
- Icon-based approach - Simple category icons
- Brand consistency - Match overall site design
- Scalability - Works at different display sizes
- Recognition - Easily identifiable as category content
Secondary Category Image Placeholder
Purpose: Fallback for category “Override Image” attributeFormat: Full URL to image file
Fallback: No value sent if empty This placeholder is used specifically when categories have no “Override Image” set in their PureClarity attributes. When this applies:
- Custom templates - Using override images in PureClarity templates
- Campaign-specific visuals - Different images for promotional periods
- A/B testing - Alternative category representations
- Brand customization - Specialized category imagery
Secondary placeholders are only relevant if you’re using category override images in custom PureClarity templates. Most standard implementations won’t need this setting.
Image Requirements and Optimization
Technical Specifications
Recommended formats:- WebP - Best compression and quality
- JPEG - Universal compatibility
- PNG - When transparency needed
- Product placeholders: 400x400px minimum
- Category placeholders: 300x200px minimum
- Responsive considerations: Ensure images scale well
Performance Optimization
Image delivery:- CDN hosting - Use content delivery networks
- Compression - Optimize file sizes without quality loss
- Caching - Leverage browser and server caching
- Format selection - Choose optimal format for content type
Large placeholder images can impact recommendation loading times. Balance image quality with performance requirements.
Placeholder Strategy
Design Approach
Brand consistency:- Logo integration - Include brand elements subtly
- Color scheme - Match site’s visual identity
- Typography - Use consistent fonts if text included
- Style alignment - Complement overall design language
- Informative placeholders - Indicate what’s missing
- Actionable design - Encourage interaction despite missing image
- Professional appearance - Maintain site credibility
- Accessibility - Include appropriate alt text concepts
Multi-Store Considerations
Store-specific placeholders:- Language variations - Localized placeholder content
- Cultural appropriateness - Region-specific imagery
- Brand differentiation - Different brands under one installation
- Currency implications - Consider pricing display context
Implementation Examples
E-commerce Focused
Brand-Heavy Implementation
Minimalist Approach
Testing Placeholder Configuration
Validation Steps
- Create test products without images
- Create test categories without images
- Run manual feeds to include test items
- Check recommendations for placeholder display
- Verify image loading and performance
- Test across devices for responsive behavior
Debug Testing
Enable Zone Debug Mode to:- Identify placeholder usage in live recommendations
- Verify image URLs are correct
- Test fallback behavior when placeholders fail
- Monitor loading performance
Create a dedicated test category with products that intentionally have no images to validate placeholder functionality during development.
Common Issues and Solutions
Placeholder Not Displaying
Troubleshooting checklist:- URL accessibility - Verify images load in browser
- Path accuracy - Check for typos in URLs
- Server permissions - Ensure images are publicly accessible
- Cache clearing - Clear Magento and CDN caches
- Feed status - Confirm feeds have run after configuration
Performance Issues
Optimization strategies:- Image compression - Reduce file sizes
- CDN implementation - Use geographically distributed delivery
- Format optimization - Choose efficient image formats
- Lazy loading - Implement for non-critical placeholders
Inconsistent Display
Common causes:- Mixed protocols - HTTP vs HTTPS mismatches
- Dimension variations - Inconsistent image sizes
- Format issues - Unsupported image types
- Cache problems - Outdated cached images
Advanced Configuration
Dynamic Placeholders
For more sophisticated placeholder systems:- Category-specific placeholders - Different images per category type
- Seasonal variations - Time-based placeholder rotation
- Inventory-based - Different placeholders for out-of-stock items
- Custom logic - Magento customizations for dynamic selection
Template Integration
When using custom PureClarity templates:- Template variables - Reference placeholder URLs in templates
- Conditional logic - Display different placeholders based on content
- Responsive design - Adapt placeholders for different screen sizes
- Accessibility - Include proper alt text and ARIA labels
Monitoring and Maintenance
Regular Reviews
Monthly checks:- Image accessibility - Verify all placeholder URLs work
- Performance impact - Monitor loading times
- Visual consistency - Ensure design alignment
- Usage analytics - Track placeholder display frequency
Optimization Opportunities
Continuous improvement:- A/B testing - Try different placeholder designs
- User feedback - Gather input on placeholder effectiveness
- Performance monitoring - Track impact on site speed
- Conversion analysis - Measure placeholder impact on recommendations
Related Configuration
Feed Integration
Placeholder images work with:- Types of Data Feeds - Understanding image data in feeds
- Data Feeds & Indexing - Feed content configuration
Visual Customization
- Category Attributes - Override image configuration
- Product Attributes - Product-specific settings
- Templates Overview - PureClarity template customization
Performance Optimization
- Configuration Mode - Impact on image delivery
- Dashboard Overview - Performance monitoring
Best Practices Summary
Image Quality
- Use high-resolution images that scale well
- Optimize file sizes for fast loading
- Maintain brand consistency across all placeholders
- Test across devices for responsive behavior
Configuration Management
- Document placeholder URLs for team reference
- Version control image assets
- Regular testing of placeholder functionality
- Monitor performance impact on recommendations
User Experience
- Clear visual indication of missing content
- Professional appearance maintains site credibility
- Consistent styling with overall site design
- Accessibility consideration for all users