Magento Swatches Do Not Work? Here Are Things To Be Checked
Magento CE (v1.9.1+) and Magento EE (v1.14.1+) introduce new long-awaited functionality, each and every store owner can benefit from. Magento swatch images now appear to be built-in feature, merchants can configure them in the admin panel and represent patterns of configurable product selections on the front-end.
Swatches make your product page more attractive, it is true. Instead of usual product dropdowns, your customer get miniature pattern, visualized version of attribute value. When your store visitors click a swatch, they can immediately see updated product image that displays product appearance within selected color swatch.
Although oftentimes something goes wrong and after configuring store owners stumble upon the fact that Magento swatch images do not work. In this article we have gathered the most common issues, Magento user come across when setting up swatch images, their reasons and solutions respectively.
Magento Swatch Images Added but Still Dropdowns Display at Frontend
It might be really frustrating. Having added swatches in Magento, you find out that still dropdown selectors show at the product page.
One of the reasons, standing behind this, is quite simple. You might have forgotten to activate configurable swatches in the admin. If this option is not enabled, product selections will not be visualized and your customers will see usual dropdowns with attribute values at product page. View also configurable product attribute, you’d like to display swatches for. You should mark this attribute as one displayed via swatches.
- Check whether swatch image option is activated in System->Configuration->Catalog->Configurable Swatches.
- Choose the attribute you want do display through swatches.
Getting Empty Image Placeholders Instead of Swatches
One more issue store owners claim, relate to empty swatches on product listing. Instead of miniatures you get boxes with attribute values, similar to ones we have at the screenshot below.
The matter is, small patterns that display attribute options, are .png images that should first be uploaded to Media Storage. This is Magento requirement and you can’t bypass it. If Magento swatches display text-based swatches, you, most likely haven’t uploaded miniatures to Media Storage or they have been removed somehow.
Please take into account, swatch image names and attribute value names should be identical, otherwise it will not display. For example, we have ‘Palette’ attribute and its values ‘Deelight’, ‘Enchanter’, ‘Star Quality’, etc. Our swatch images, that will represent these values at product page, should correspondingly be ‘deelight.png’, ‘enchanter.png’, ‘star_quality.png’, etc
- Upload swatch images (only .png) to /media/wysiwyg/swatches, named identically to attribute values.
- If swatch image filenames are in uppercase, change them to lowercase.
Swatch Thumbnail Do Not Show on Category Page
This is one of the most widespread question among Magento users. Why don’t thumbnails show on the category page under configurable product? This is now actually the issue, you just need to specify swatches of what attribute will be displayed in the listing of category page.
Navigate to Magento swatch image settings under System->Configuration->Catalog->Configurable Swatches and select desired attribute from ‘Product Attribute to Use for Swatches in Product Listings’
Configurable Product Image Doesn’t Swap When Swatch Is Clicked
This phemomenon causes loud debate in Magento community. Why don’t I get image changed when certain swatch is clicked on the storefront? Magento swatch images do not work and customers can’t view selected variant.
Upload desired images to each simple products and mark them as Base. For more details, read this post - How to Bulk Upload Magento Swatch Images
Configurable Swatches and Custom Theme
As it is officially stated by Magento, configurable swatches are available in RWD package that comes with the default Magento installation. Respectively, you can make use of this feature if you are using default RWD theme. Whenever your are trying to implement swatches on custom theme, you definitely will fail.
If you have enough knowledge and skills you are offered to integrate this functionality into your custom theme. You can fall back upon the instructions, outlined on StackExchange forum - How to use Magento 22.214.171.124 Configurable Swatches in Default package theme (or a custom theme)?
Magento stores all the swatch images on the server in the installation directory /media/catalog/swatches/ as we have already mentioned above in this post. They are resized and cached before using. Correspondingly, this might be one of the reason of incorrect swatch image displaying. If some changes has been made to existing swatches, its cache be refreshed.
In order to flush swatch image cache you need to do the following:
- Open System->Cache management in Magento admin panel.
- Click Flush Swatch Image Cache in this page.
Swatches is a great means to represent configurable product options at the frontend. Although they go out of action at times. If you find yourself in such a situation, you should check the points we have discussed above and make sure everything is configured as Magento itself requires.