Important

You are browsing the documentation for version 4.2 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

How to Replace Placeholder Images for Products in the Storefront¶

The following article describes how to replace placeholder images in your custom OroCommerce application.

This topic assumes that you have previously created a custom application, a bundle, and a storefront theme, as described in the Storefront Customization topic.

Note

This tutorial is suitable for both cases, when you have created your own custom storefront theme, and when you need to change an out-of-the-box one. However, creating your own theme is recommended as it enables to manage your storefront appearance easily.

Replace a Placeholder¶

Place a new storefront placeholder image into your bundle`s public assets folder (e.g., Resources/public/{your_theme_id}/product/no_image.png):
- Resources/public/default/product/no_image.png

Specify the main placeholder image in your theme configuration file:

src/{your_bundle_id}/Resources/views/layouts/{your_theme_id}/theme.yml¶

image_placeholders:
  product: '@AppBundle/Resources/public/default/product/no_image.png'
  category: '@AppBundle/Resources/public/default/product/no_image.png'

or if files are in the same bundle with theme.yml

src/{your_bundle_id}/Resources/views/layouts/{your_theme_id}/theme.yml¶

image_placeholders:
  product: 'bundles/{your_bundle_id}/{your_theme_id}/images/product/no_image.png'
  category: 'bundles/{your_bundle_id}/{your_theme_id}/images/product/no_image.png'

Rebuild the assets:

Clear the cache to reload the Yaml configuration files:
```
php bin/console cache:clear
```
Publish images to the public web folder:
```
php bin/console assets:install --symlink
```
Generate new image dimensions:
```
php bin/console product:image:resize-all
```

Note

It is also possible to replace a placeholder from the back-office under System > Configuration > Commerce > Design > Theme. Keep in mind that the changes in the back-office will prevail overriding the changes described above in this article. For more details on how to replace a placeholder in the back-office, follow the theme configuration topic.