Placeholder images ensure your PureClarity recommendations always display properly, even when products or categories don’t have images assigned. Configure fallback images to maintain visual consistency and professional appearance.

​
Accessing Placeholder Settings

Navigate to Stores > Configuration > PureClarity and locate the “Placeholder Images” section. Placeholder Settings in PureClarity configuration page in Magento 2 admin

​
Placeholder Configuration Options

​
Product Image Placeholder

Purpose: Fallback image for products without images
Format: 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
Example configurations: 
https://yourstore.com/media/placeholder/product-placeholder.webp
https://cdn.yourstore.com/images/defaults/no-product-image.jpg
/media/wysiwyg/placeholders/default-product.png
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 images
Format: 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
Design considerations:
  • 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” attribute
Format: 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
Optimal dimensions:
  • 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
Content strategy:
  • 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

Product: https://yourstore.com/images/no-product-available.webp
Category: https://yourstore.com/images/category-placeholder.webp

​
Brand-Heavy Implementation

Product: https://cdn.yourbrand.com/placeholders/branded-product.jpg
Category: https://cdn.yourbrand.com/placeholders/branded-category.jpg

​
Minimalist Approach

Product: /media/placeholders/simple-product-box.png
Category: /media/placeholders/category-icon.png

​
Testing Placeholder Configuration

​
Validation Steps

  1. Create test products without images
  2. Create test categories without images
  3. Run manual feeds to include test items
  4. Check recommendations for placeholder display
  5. Verify image loading and performance
  6. 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

​
Feed Integration

Placeholder images work with:

​
Visual Customization

​
Performance Optimization

​
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