> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pureclarity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Placeholder Images Configuration

> Setting up fallback images for products and categories in Magento 2.x when default images are missing

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.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/pureclarity/images/magento/placeholder-settings.webp" alt="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
```

<Note>
  If no value is provided, Magento's default product placeholder image will be used. This ensures functionality even without custom configuration.
</Note>

### 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

<Info>
  Secondary placeholders are only relevant if you're using category override images in custom PureClarity templates. Most standard implementations won't need this setting.
</Info>

## 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

<Warning>
  Large placeholder images can impact recommendation loading times. Balance image quality with performance requirements.
</Warning>

## 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](/integrations/magento/magento-2/zone-debug) to:

* **Identify placeholder usage** in live recommendations
* **Verify image URLs** are correct
* **Test fallback behavior** when placeholders fail
* **Monitor loading performance**

<Tip>
  Create a dedicated test category with products that intentionally have no images to validate placeholder functionality during development.
</Tip>

## 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](/integrations/magento/magento-2/types-of-feed) - Understanding image data in feeds
* [Data Feeds & Indexing](/integrations/magento/magento-2/data-feeds-indexing) - Feed content configuration

### Visual Customization

* [Category Attributes](/integrations/magento/magento-2/category-attributes) - Override image configuration
* [Product Attributes](/integrations/magento/magento-2/product-attributes) - Product-specific settings
* [Templates Overview](/features/templates/overview) - PureClarity template customization

### Performance Optimization

* [Configuration Mode](/integrations/magento/magento-2/configuration-mode) - Impact on image delivery
* [Dashboard Overview](/integrations/magento/magento-2/dashboard) - 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